EVENTIFY

Overview

Eventify is a full-stack event planner application built with React (frontend), ExpressJS (backend), and PostgreSQL (database). It allows users to create, edit, delete events with multiple tags and type: public/ private, rsvp on events. Users can also search based on title, tags and type. Authentication is through simple jwt based token.

Deployment

• Hosted on Vercel.com at https://event-planner-jehz.vercel.app/
• It has 1-minute cold start due to begin on free tier

Setup Instructions

Prerequisites

Ensure you have the following installed:

• Node.js
• PostgreSQL (You can run docker compose up too.)
• npm

Environment Variables

A .env.example file is provided inside backend folder with the required environment variables. Copy its contents into a new .env file inside backend and modify the values as needed. Also, do the same for frontend environment management.

Frontend Setup

1. Clone the repository

    git clone https://github.com/ShresthaPrajwal/Event-Planner.git

2. Navigate to the frontend directory

    cd frontend

3. Install dependencies

    npm install

4. Start the server

If you want to run a development server you will need to set the VITE_API_URL in .env file to http://localhost:3000/api/v1. Then,

    npm run dev

No change is required to build the project.

  npm run build

Backend Setup

1. Navigate to backend directory

    cd backend # Or cd ../backend if you are inside frontend

2. Install dependencies

    npm install

3. Run docker setup for postgres and adminer

    docker-compose up

• If you dont have docker then use postgres locally and set env variables accordingly.

1. Run database migrations

    npm run db:migration

3. Start the backend server

The development mode has CORS restrictions enabled so, in .env file add url where the frontend project has been started.

    npm run dev

No change is required to build the project.

  npm run build

This will generate build file inside backend inside dist folder which can be started with:

    npm run start

The server starts at http://localhost:3000. The server docs will be available at http://localhost:3000/api/v1/docs.

Engineering Decisions

Tech Stack

• Frontend: React
• Backend: Express.js with Knex.js.
• Database: PostgreSQL

Authentication & Authorization

• Authentication: Implemented using simple token based authentication for simplicity.
• Authorization: Events are owned by users, and simple ownership checks ensure only the creator can modify/delete them.

Features

• API Documentation: Available at /docs, making it easy to explore and test the API.

• CRUD: Application has crud for events and attendees. User can create events with multiple tags and edit or delete them later. Users have option to rsvp event with yes/no/maybe.

• Filtering: Application supports server side filtering based on title, tags and type.

• Pagination: Events are listed with offset based pagination.

• Api response Format: Api has a standard format. Simple response format:

  {
      success: true,
      message: "message...",
      data: data,
  }

Paginated response format:

     {
         success: true,
         message: "message...",
         data: [data],
         pagination: {
             page: 1,
             limit: 10,
             totalItems: total,
             totalPages: tatalPage
         }
     }

• Logging: Backend has robust logging mechanism for errors, info and every request accepted by the server with request path and request body and timestamp with its own response body.

• Validation: Validation uses a two-layer approach: client-side validation with custom rules in the React form hook, complemented by comprehensive Zod schema validation on the backend API for data integrity.

• Error handling: Errors are handled using centralized error handler in backend side with Zod validation too whereas in frontend side component level basic user feedback for simplicity.

• Database Design: Fully normalized database is implemented.

• UI Sample:

Assumptions

• Users own their events, and there are no shared events.
• Users cannot rsvp to their own events.
• Users cannot rsvp unless logged in, but can explore events.
• Event Tags are user-defined, meaning each user can create and assign tags for their events whereas Event Types are pre-defined, meaning it has only public/private type.
• Pagination and filtering happen on the server side for efficiency.
• No admin roles, only regular users.