🎉 Festraa – Event Booking Website

A modern, responsive event booking platform built with pure HTML, CSS, and JavaScript.
Submitted as Assignment II (Mini Project) for 23ITR202 – Web Technology
Department of Information Technology, Karpagam College of Engineering — April 2026

---

👥 Team

Register No	Name
717825F112	Cibi K
717825F140	Pragadheeshwar D
717825F147	Sathiyarajan K
717825F152	Sriram G S
717825F153	Subash R

---

🌐 Live Demo

GitHub Pages URL:
https://gssriram9050.github.io/festraa/

Replace gssriram9050 with your GitHub username after deploying.

---

📌 About the Project

Festraa is a responsive event booking website that simplifies discovering, booking, and managing events. It provides:

• 🎵 Public Events – Concerts, tech fests, cultural shows
• 💍 Private Arrangements – Weddings, family gatherings, corporate dinners
• 👤 User Authentication – Register & login with profile management
• 📋 Booking History – Track all your confirmed bookings
• 📱 Fully Responsive – Works seamlessly on desktop, tablet & mobile

Since this is a GitHub Pages static deployment, all data is stored in localStorage (no backend required).

---

🗂️ Project Structure

festraa/
├── index.html      ← Single-page app (all views: Home, About, Login, Register, Profile)
├── style.css       ← Styling with pastel theme, animations, responsive layout
├── script.js       ← Auth logic, booking system, page routing (localStorage)
└── README.md       ← This file

---

✨ Features

Feature	Description
SPA Routing	All pages rendered in a single HTML file via JS page switching
User Registration	Stores user details securely in localStorage
Login / Logout	Session management with auth state UI updates
Event Booking Modal	Dynamic dropdowns for Public & Private events
Private Service Options	Checkbox selection for Food, Resort, Organiser add-ons
Booking Confirmation Toast	Animated success notification
Profile Page	Displays user info, member since, and all past bookings
Pastel Design System	CSS variables, smooth animations, glassmorphism navbar
Responsive Layout	Mobile-first grid, collapsible nav on small screens

---

🛠️ Technologies Used

Technology	Purpose
HTML5	Page structure and semantic markup
CSS3	Styling, animations, responsive grid, CSS variables
JavaScript (ES6+)	Interactivity, SPA routing, form validation, localStorage
Google Fonts	Playfair Display + DM Sans typography
localStorage API	Client-side data persistence (replaces MySQL for static hosting)

Original project used MySQL for the backend. This GitHub Pages version uses localStorage for full static compatibility — no server required.

---

🚀 Deploy to GitHub Pages

Step 1 — Create a new repository

Go to github.com/new and create a repository named festraa (public).

Step 2 — Upload the files

Upload all four files to the root of your repository:

• index.html
• style.css
• script.js
• README.md

Step 3 — Enable GitHub Pages

1. Go to your repository → Settings → Pages
2. Under Source, select main branch and / (root) folder
3. Click Save

Your site will be live at:
https://<your-username>.github.io/festraa/

---

🖼️ Screenshots

Page	Preview
Home / Hero	Animated hero with pastel blobs, stat counters
Events	Public & Private event cards with hover effects
Booking Modal	Dynamic event selector, date & guest inputs
Login / Register	Gradient auth pages with form validation
Profile	User info grid + booking history
About	Story section, feature highlights

---

📚 Course Outcomes Covered

CO	Description
CO3 (20 marks)	Apply HTML and CSS for structured, styled, and responsive web pages
CO4 (40 marks)	Implement JavaScript for client-side interactivity and dynamic content
CO5 (40 marks)	Integrate frontend with form handling, data persistence, and user management

---

📝 Notes

• All booking data persists in the browser's localStorage — data will remain until the browser storage is cleared.
• This project is a frontend-only demonstration. The original version included a Node.js/Express backend with MySQL.
• Images are loaded from Unsplash via CDN URLs.

---

© 2026 Festraa  ·  Crafted with ❤️ by Team Festraa