🡠 Go Back

3's Cinema

3's Cinema is a fictional movie theater ecommerce website. Users can browse currently playing movies, select tickets, update their cart, and checkout.

Picture of 3's cinema app


  • Latest movie data saved from The Movie Database API every morning using crontab
  • MySQL and Express.js REST API to send cached movie data and checkout orders
  • Interactive React and TypeScript web application

Planned Features

  • Print or download tickets after checkout
  • User functionality to login and view order history
  • Fix timezone related issues

The Idea

After buying some tickets online from a local theater, I was struck with how boring and unintuitive the user experience was. I wanted to see if I could create a more interactive and exciting user experience using React. The first challenge I encountered was how to get the latest movie data. After carefully researching several options, I decided to create an Express.js server and MySQL database that stores data from The Movie Database API. After building the database and server, I created a crontab script that would update the database with the latest movies every morning.

How It Works

When the user first visits the site, the are presented with a full-screen carousel slider that shows the latest movies every few seconds.

Picture of cinema header

Below the header is a list of all of the available movie showings.

Picture of cinema showings

On the top is a date selector to change the currently selected day. By default, movies are shown for the current day, but movie showings can also be viewed for the next five days. At the bottom of each movie section is a list of the available show times.

Picture of cinema show times

Selecting a showing will take the user to the movie detail page which includes an embedded YouTube trailer.

Picture of cinema detail page

Below the trailer and description is a grid of all the available tickets.

Picture of cinema tickets

Clicking on a ticket will mark it as selected. Clicking the ticket again will unmark it as selected. The user will then have an option to add those tickets to their cart.

Picture of selected cinema tickets

Once the user has added their tickets to the cart, they will turn green and will no longer be clickable. Additionally, the cart icon in the top-right corner of the navbar will show the number of items currently in the cart.

Picture of added cinema tickets

Inside the cart page, the user will see a list of all of their tickets with an option to remove each one.

Picture of ticket

Below all of the selected tickets is an order summary that shows the total calculated price of all tickets with tax. The user can enter payment details (disabled in demo) and checkout.

Picture of ticket summary in cart

After checking out, an order with those tickets is created in the database, and those tickets are marked as no longer available. If any user visits that movies showtime, that selected seat will be blacked out.

Picture of purchased tickets
🡠 Back to Home

Get in touch