Freedom Fest
A hackathon-winning event management website built with HTML, CSS, and JavaScript, enabling users to create, browse, and register for events through a clean, responsive interface.
About This Project
Freedom Fest is a first-year college hackathon project (2 members) built to simplify event management using only frontend technologies. The website allows organizers to add event details like name, date, time, and description, while users can browse available events displayed in a card-style layout. The project features a fully responsive, mobile-friendly design and smooth form validations using vanilla JavaScript. Despite being a beginner-level, frontend-only project with no backend, it won 1st prize for its clear functionality, user-friendly interface, and clean design. JavaScript objects and arrays were used to simulate dynamic data handling within the browser.
Key Features
- Event Creation Page: Organizers could add event details like name, date, time, and description
- Event Listing: All available events displayed in a clean, card-style layout for easy browsing
- Responsive Design: Mobile-friendly layout adapted well across different screen sizes
- Interactive UI: Smooth navigation and form validations using vanilla JavaScript
Challenges & Solutions
No Backend: As a front-end-only project, storing event and registration data dynamically was not possible
Simulated persistence using JavaScript arrays and localStorage — submitted events were pushed into an in-memory array and serialized to localStorage, so the event listing page could read and render them on load without a backend
Time Constraint: Completing the entire UI and core logic within the limited duration of the hackathon
Prioritized a component-first approach: built reusable HTML/CSS card and form components first, then wired JavaScript logic to them, allowing both team members to work on UI and logic in parallel and merge cleanly within the time limit
Form Validation: Implementing real-time validation without using any libraries was initially tricky
Wrote a lightweight vanilla JS validation utility that listened to 'input' and 'blur' events on each field, applied regex checks, and toggled error message elements — keeping validation stateless and reusable across both the event creation and registration forms