Jenny Makki

Kino Movie Theatre

A responsive movie browsing app built with Next.js and The Movie DB API

Next.jsMongoDBAPICloudinaryResponsiveFigma

Project Goal

The goal of this project was to create a sleek, easy-to-use movie search and event booking app that pulls real-time data from an API. My team and I wanted to build a system that not only lets users browse and explore movies, but also allows for live event listings, screenings, and ticket bookings — all backed by a structured database. On the admin side, the goal was to implement a secure and intuitive section for theater staff to easily manage: Events, Members, Screenings, Bookings, Movie info. The focus was on creating a smooth user experience, a maintainable backend, and a scalable structure that could realistically support a small cinema's digital needs.

Key Features

  • Live movie search with API integration
  • Admin panel for managing content
  • Booking system with real-time validation
  • Dynamic membership levels
  • Editable profile with Cloudinary image upload
  • Filter function for the movies
  • Responsive design for mobile and desktop

Snapshots

snapshot-0

Membership page created using Tailwind. The profile picture can be changed and is stored in Cloudinary. The tickets the member buys is displayed and the amount of tickets will decide the membership level.

snapshot-1

Admin section where the workers at the movie theatre can add offers and remove them. The offers are stored in MongoDB.

Role & Learning

I worked as part of a five-person team to develop this project. I collaborated closely on maintaining UI consistency and participated actively in code reviews. Working effectively in a Git-based team environment, I used Cloudinary to ensure secure and scalable image uploads. I also handled conditional logic for features such as membership tiers, while promoting clear communication and shared documentation within the team.

View RepositoryLive Demo