Skip to content

About

Techtonica project - Full-stack event application that utilizes CRUD, Express, Node, Vite, React and PostgreSQL.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

Eventonica 🎉

Eventonica is a full-stack web application with CRUD for managing, discovering, and organizing events. Built with a robust PERN stack (PostgreSQL, Express, React, Node.js), this application allows users to seamlessly add events, assign categories, update details, search by name, and track their favorite activities.

🛠️ Built With

JavaScript HTML5 CSS3 React Vite React Router

Bootstrap Node.js Express.js PostgreSQL

NPM Dotenv Nodemon GitNetlify Render

✨ Features

  • Interactive Dashboard: View a comprehensive list of all events with associated categories, descriptions, and timestamps.
  • Event Management (CRUD): Create, read, update, and delete events directly from the UI.
  • Search & Filter: Search for specific events by name, or toggle the view to show only your favorited events.
  • Categorization: Organize events by category (e.g., Music, Tech, Sports), complete with custom color-coding and emojis.
  • Favorites System: Quickly "heart" or "un-heart" events to keep track of your top picks.

📸 Screenshots

(Replace these placeholder links with actual paths to your screenshots/gifs once uploaded to your repository)

Dashboard View Add/Edit Event
Eventonica_Dashboard Eventonica_Add-Edit
Search & Filter Functionality
Eventonica_Toggle-Favorites

💻 Tech Stack

Frontend:

  • React 18 (Bootstrapped with Vite)
  • React Router DOM
  • Bootstrap / React-Bootstrap for responsive styling
  • React Icons & Moment.js for UI enhancements

Backend:

  • Node.js & Express.js
  • PostgreSQL
  • pg (node-postgres) for database connections
  • Cors & Body-Parser

🔌 API Reference

The backend exposes the following RESTful endpoints under /api:

Method Endpoint Description
GET /api/events Fetches all events (accepts ?searchInput= query to filter by name).
POST /api/events Creates a new event.
PATCH /api/events/:id Updates details of an existing event.
PUT /api/events/:id/favorites Toggles the favorite (is_favorite) status of an event.
DELETE /api/events/:id Deletes a specific event from the database.
GET /api/categories Fetches the list of all available categories.

🔐 Environment Variables

To run this project, you will need to add the following environment variables to a .env file located in your server/ directory:

# Your PostgreSQL Database URI
VITE_DB_URI="postgresql://<user>:<password>@localhost/<database>"

# Optional: Port for the Express server (Defaults to 3000)
PORT=3000

🚀 How to Run Locally

Follow these steps to get the development environment running on your machine:

Clone the repository

    git clone [https://github.com/LilRed92/eventonica.git](https://github.com/LilRed92/eventonica.git)
    cd eventonica

Setup the Database

Ensure PostgreSQL is running on your machine. Load the provided database dump to create the necessary schemas and initial category data:

psql -U postgres -d postgres -f server/db/eventonica_dump.sql

(Note: Replace postgres with your specific database username/database if different).

Install Dependencies

You will need to install the dependencies for both the client and the server.

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

Start the Application

The server's package.json includes a concurrently script that will launch both the Express backend and the Vite frontend at the same time.

# Navigate back to the server directory if you aren't already there
cd ../server

# Start both servers
npm run dev

🌍 Deployment

This application is configured for continuous deployment (CD) utilizing GitHub Actions.

  • Frontend: Deployed and hosted via Netlify.
  • Backend API: Deployed and hosted via Render.
  • Database: Deployed and hosted via Neon Tech.

The .github/workflows/ci.yml pipeline is set up to automatically trigger production deployments when code is pushed or merged into the main branch. Deployments are only executed if all prerequisite linting, formatting, and tests pass successfully.

Visit the deployed version of Eventonica!

Future Feature Updates

  • Transition to TypeScript: Migrate the existing JavaScript codebase to TypeScript to improve type safety, code maintainability, and the overall developer experience.
  • Expand Database Schema: Add a users table to the PostgreSQL database to support individual user profiles.
  • Implement User Favorites: Create a user_favorites join table to establish a many-to-many relationship, allowing multiple users to maintain their own unique lists of favorited events.
  • Integrate Authentication: Implement secure user authentication to allow individuals to register, log in, and manage their personalized event dashboards.
  • Add Comprehensive Testing: Write and implement automated tests across the frontend, backend, and API to ensure application reliability.
  • Deploy Application: Deploy the completed application to a cloud hosting platform for live, public access.

About

Techtonica project - Full-stack event application that utilizes CRUD, Express, Node, Vite, React and PostgreSQL.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages