Finnkino Cinema

A movie ticket booking website built with ReactJS, Redux and Material UI.

See the live demo -> Finnkino Cinema (the API might be expired when you visit the website).

Use this account for testing:

👨🏻‍💻Username: tule07
🔐Password: 123456Tu

Tech stack

Core

ReactJS: JavaScript library for building user interfaces.
Redux: client state management with Thunk middleware.
React Hook Form | Formik: form state management and validation with Yup.

UI & Styling

Material UI: React-based UI component library.
SCSS/Sass: CSS pre-processor for styling the website.

Features

👸🏻For users:

Fully responsive design on devices (laptop, tablet and mobile).

Page	Features
Home	- show theaters, movies and showtime schedules
Movie details	- show movie details
Authentication (login + signup)	- validate login and signup forms
Ticket booking	- build grid-shaped seat layout with different types of seat - map each seat row in alphabetical order - allow to select a maximum of 5 seats - cannot select sold seats
Profile	- allow to change user information - show transaction history

👩🏻‍💼For administrators:

Page	Features
User management	- display the table of users (both clients and administrators) - search user by name - create, update and delete user. Validate user information forms.
Movie management	- display the table of movies - search movie by name - create, update and delete movie. Validate movie information forms - create movie showtime schedules. Validate showtime schedule information forms

Project structure

Main source structure

root
└── src
    ├── api                         # Axios client configuration and request setup
    ├── assets                      # Shared multimedia files
    ├── components                  # Shared components
    ├── constants                   # Shared constants
    ├── containers                  # Pages
    │   ├── AdminTemplate           # Admin pages
    │   │   ├── index.js            # Admin template
    │   │   ├── components          # Shared components for admin template
    │   │   ├── UserDashBoard
    │   │   └── MovieDashBoard
    │   ├── AuthTemplate            # Authentication pages
    │   │   ├── index.js            # Authentication template
    │   │   ├── components          # Shared components for authentication template
    │   │   ├── LoginPage
    │   │   └── RegisterPage
    │   ├── HomeTemplate            # Home pages
    │   │   ├── index.js            # Home template
    │   │   ├── components          # Shared components for home template
    │   │   ├── HomePage
    │   │   ├── MovieDetailsPage
    │   │   ├── ProfilePage
    │   │   └── TicketBookingPage
    │   └── NotFoundPage            # 404 not found page
    ├── guard                       # Protect private routes
    ├── hooks                       # Shared hooks
    ├── i18n                        # Translation feature configuration
    ├── routes                      # Routing setup
    ├── store                       # Redux configuration and reducer setup
    ├── validators                  # Schema validators for user inputs
    ├── App.js
    └── index.js

Routing setup

Installation and run

Check out the website -> Finnkino Cinema or run locally by running the following commands:

Clone the project

git clone https://github.com/scoobytux/finnkino-cinema.git
cd finnkino-cinema

Install dependencies

npm install

Run the development server

npm start

Open http://localhost:3000 with your favorite browser to see the project 😎.

Some project's views on devices

On MacBook/Laptop

On Mobile

Contributors

Thanks go to these wonderful people ✨

_{Phuong Vu (Chloe)}

_{Tu Le (Liam)}

Credits and references

Resource	Description
CyberSoft Academy	API provider
Finnkino	A cool Finnish website for booking online movie tickets we got inspiration from