Event Management Platform

An Angular application for browsing events, booking tickets, and managing bookings, built with standalone components and a local json-server mock API.

Tech Stack

• Angular 22 (standalone components, no NgModules)
• Angular signals for state management
• Reactive Forms for the ticket booking flow
• Plain SCSS, no UI framework
• json-server as a local mock backend

Prerequisites

• Node.js and npm

Getting Started

Install dependencies:

npm install

The app needs two processes running at the same time: the mock API and the Angular dev server.

Start the mock API (serves db.json at http://localhost:3000):

npm run api

In a separate terminal, start the Angular dev server:

npm start

Open http://localhost:4200 in a browser. Both processes must stay running for the app to load or save data.

Features

Events Listing & Discovery

• Card-based events list with title, date, location, price, and category
• Search by event title
• Filters for category, date range (upcoming, this week, this month), and price range (free, under $50, $50+)
• Sort by date or price
• Favorite/like toggle on each event card, persisted in localStorage
• Event details page with full description, ticket types, and pricing

Ticket Booking

A three-step booking flow with a step indicator, back/next navigation, and validation on each step:

1. Select ticket type and quantity, with a live price total
2. Attendee details form (name, email, phone per ticket) with validation
3. Booking summary and confirmation, with a generated booking reference number

My Bookings

• List of the current user's bookings with event name, date, ticket count, total amount, and status
• Filter by upcoming or past events
• Cancel an upcoming booking, with a confirmation dialog before cancelling

Theme Toggle

• Light and dark mode, toggled from the header
• Applies across the whole application using CSS custom properties
• Preference persisted in localStorage

User Experience

• Loading indicators while fetching data
• Error messages on failed requests
• Empty state messages (e.g. no events found, no bookings yet)
• Toast notifications on booking cancellation
• Responsive layout for desktop and mobile

Project Structure

src/app/
  core/
    models/       Event, TicketType, Booking, Attendee interfaces
    services/     EventsService, BookingsService, ThemeService, ToastService
    constants.ts  API base URL and current user id
  shared/         Reusable UI: loading spinner, empty state, confirm dialog, toast
  layout/
    header/       Navigation and theme toggle
  features/
    events/       Events list, event card, event details
    booking/       Booking flow and its three steps
    bookings/      My Bookings list

Mock API

The db.json file at the project root is the data source for json-server. It is rewritten in place whenever a booking is created, updated, or cancelled.

Method	Endpoint	Description
GET	/events	Fetch all events
GET	/events/:id	Fetch a single event by id
GET	/bookings?userId=...	Fetch all bookings for a user
POST	/bookings	Create a new booking
PATCH	/bookings/:id	Update a booking's status (cancel)

There is no authentication in this project. A fixed user id (user1, see src/app/core/constants.ts) is used for all bookings.

Available Scripts

Command	Description
npm start	Run the Angular dev server on port 4200
npm run api	Run the json-server mock API on port 3000
npm run build	Build the application for production
npm test	Run unit tests