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
- 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.
- Material UI: React-based UI component library.
- SCSS/Sass: CSS pre-processor for styling the website.
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 |
| 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 |
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
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-cinemaInstall dependencies
npm installRun the development server
npm startOpen http://localhost:3000 with your favorite browser to see the project 😎.
- On MacBook/Laptop
- On Mobile
Thanks go to these wonderful people ✨
 Phuong Vu (Chloe) 💻📖 |
 Tu Le (Liam) 💻📖 |
| Resource | Description |
|---|---|
| CyberSoft Academy | API provider |
| Finnkino | A cool Finnish website for booking online movie tickets we got inspiration from |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent