HANDS ON PROJECT — 1
Event Management Platform
Project Requirements Document · Angular
Build an Event Management Platform where users can browse events, book tickets, and manage their
bookings. This project is built using Angular (standalone components, no NgModules required).
1. Events Listing & Discovery
Events Page
• Display all available events in a card-based layout
• Each event card must show: title, date, location, price, and category
• Implement search by event title
• Implement filters:
■ Category (Technology, Music, Sports, Arts, etc.)
■ Date (Upcoming, This Week, This Month)
■ Price range (Free, Under $50, $50+)
• Sort events by date or price
• Show a "favorite/like" icon on each event card
Event Details Page
• Display complete event information (description, date, time, location, organizer)
• Show available ticket types with pricing
• Display a "Book Tickets" button
2. Ticket Booking
Booking Flow
Step 1 — Select Tickets
• Choose ticket type and quantity
• Show price calculation in real-time
• Display total amount
Step 2 — Attendee Details
• Form to collect: Name, Email, Phone for each ticket
Hands on Project 1 · Angular Event Management Platform · Page 1
• Validate all fields
• Show error messages for invalid inputs
Step 3 — Confirmation
• Display booking summary
• Show success message with booking reference number
• Button to view "My Bookings"
Requirements
• Show progress indicator (Step 1 of 3, Step 2 of 3, etc.)
• Allow going back to previous steps
• Prevent moving forward if current step is invalid
3. My Bookings
• Display list of user's bookings
• Show: Event name, date, number of tickets, total amount, booking status
• Filter by: Upcoming or Past events
• Ability to cancel upcoming bookings
• Show confirmation dialog before cancellation
4. Theme Toggle
• Implement Light and Dark mode
• Theme toggle button in header/navigation
• Theme should apply to the entire application
• Theme preference should persist using localStorage
User Experience Requirements
• Loading indicator when fetching data
• Error messages when something goes wrong
• Empty state messages (e.g., "No events found", "No bookings yet")
• Success notification after booking or cancellation
• Responsive design (works on desktop and mobile)
Navigation
• Header/navbar with links to: Events, My Bookings, Profile/Theme Toggle
• Clear indication of current active page (Angular Router routerLinkActive)
Hands on Project 1 · Angular Event Management Platform · Page 2
Data Structure
Use a simple local backend like json-server to set this up locally.
Sample JSON Server Data
{
"events": [
{
"id": "1",
"title": "Angular Conference 2025",
"description": "Annual Angular developers conference",
"category": "Technology",
"date": "2025-07-15",
"time": "09:00 AM",
"location": "Toronto, ON",
"venue": "Convention Centre",
"image": "[Link]
"organizerName": "Tech Events Inc",
"ticketTypes": [
{ "id": "1", "name": "General", "price": 99, "available": 100 },
{ "id": "2", "name": "VIP", "price": 299, "available": 20 }
]
}
],
"bookings": [
{
"id": "1",
"userId": "user1",
"eventId": "1",
"eventTitle": "Angular Conference 2025",
"eventDate": "2025-07-15",
"tickets": [{ "type": "General", "quantity": 2, "price": 99 }],
"attendees": [
{ "name": "John Doe", "email": "john@[Link]", "phone": "1234567890" }
],
"totalAmount": 198,
"status": "confirmed",
"bookingDate": "2025-02-01",
"referenceNumber": "BK123456"
}
]
}
Required API Interactions
Hands on Project 1 · Angular Event Management Platform · Page 3
Method Endpoint Description
GET /events Fetch all events (with optional query params for filters)
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 booking status (for cancellation)
Hands on Project 1 · Angular Event Management Platform · Page 4