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.
- 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.
(Replace these placeholder links with actual paths to your screenshots/gifs once uploaded to your repository)
| Dashboard View | Add/Edit Event |
|---|---|
![]() |
![]() |
| Search & Filter Functionality |
|---|
![]() |
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
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. |
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=3000Follow these steps to get the development environment running on your machine:
git clone [https://github.com/LilRed92/eventonica.git](https://github.com/LilRed92/eventonica.git)
cd eventonica
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).
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
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
-
The frontend will be running on http://localhost:5173
-
The backend API will be listening on http://localhost:3000
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!
- 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
userstable to the PostgreSQL database to support individual user profiles. - Implement User Favorites: Create a
user_favoritesjoin 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.


