StarLight Cinema

Team Project

Team Project (Full Stack Essentials) · Client: Starlight Cinema

StarLight Cinema

Team Project (Full Stack Essentials) · Client: Starlight Cinema

The project was a cinema-themed website for a client, Starlight Cinema. It consisted of a full-stack web application split into: • A front-end site for public users to browse movies, events, showtimes, and more • A back-end API for handling data like movie details, FAQ, newsletters, and showtimes

Key Learnings:

Advanced experience with Bootstrap customization, responsive design, and JavaScript-based interactivity
Developed better understanding of dynamic content rendering and API integration
Gained hands-on experience with frontend-backend communication, form handling, and data submission via POST requests
Learned how to handle project collaboration through Git and address styling conflicts using specific CSS class naming

Screenshots

Technologies Used:

HTMLSCSSJavaScriptBootstrapFastAPIMySQL

My Contribution

I played a key role in multiple core features of the website and overcame significant front-end and JavaScript challenges (e.g., carousel sliders, dynamic content loading). Front-end Development: • Created two complete HTML pages: Now Showing & Membership • Carousel Slider (used on both homepage & Now Showing page) • Tabs Navigation for showtimes (Now Showing page) • Accordion & Forms (Membership page) Back-end Development: • GET /now_playing — Retrieves movie details for Now Showing section • GET /show_time?day=&month= — Fetches showtimes based on selected day and month • POST /new_customer — Submits membership form data to the database JavaScript Functionality: • Function nowPlaying — Loads movies dynamically in chunks of 5 using a "Load More" button • Function showTime — Fetches and displays showtimes dynamically in tabs • POST Function addMember(...) — Sends membership form data to the back-end • Function popUpWindow(data) — Displays a confirmation pop-up after a successful form submission