100

Ticket Box

The Ticket Box project is an adaptable and user-friendly online platform that allows users to easily book movie tickets. Developed with a user-friendly interface that caters to both smartphones and computers, this initiative was a result of the collaboration among my team comprising of five individuals.

Website

Features

Special feature

Utilized the feature of reserving seats in real-time

Responsibilities

Integrate VNPay payment method

To easily book movie tickets, I have integrated the VNPay payment method into the cinema web application

Banking integration

In order to enhance convenience for customers during the payment process, I have implemented a banking integration feature with Vnpay wallet, allowing them to save valuable time

You have the option to integrate their bank accounts on the information update page

or on the checkout page (if you haven't linked your bank account previously)

Note: Please carefully check your IP address

Personal information

To optimize the project capacity, I utilized Amazon Web Services' S3 service for storing various application images, such as customer images, movies, posters, etc

Change password

To increase the security of the application before saving the passwords to the database, I processed the raw passwords by encrypting them

Order

Attension: You can only access the order details mentioned above if you are logged in with the correct account

Showtime management

Check QR code

Developed APIs that verify the authenticity of a QR code and retrieve order data. This function is designed for staff members checking tickets at the counter

Automation testing

Developed an automated test for searching movies using the Cypress framework

Other functions

  • Created unit test classes for various services, including seat, showtime, staffdetails, and ticket classes
  • Developed APIs for storing tickets, orders, toppings, generating QR codes upon successful payment, and managing order statuses
  • Developed APIs that retrieve data for the homepage and movie details page
  • The booking page and personal information change page were both responsive
  • Contributed to database entity creation
  • Fixed bugs, etc

Built with

  • Front end: NextJS, NextAuth, Tailwind CSS, Ant Design
  • Back end: Spring Boot, Doma Framework, Pusher
  • Database: PostgreSQL
  • Testing: Mockito, Cypress

Sources

Gitlab link to refer to source code

Front end

Back end

Installation

Requirement

  • JDK (Java Development Kit) 8 or higher
  • Maven
  • Node.js and npm (installed together with Node.js)

Step 1: Installing PostgreSQL

Download and Install PostgreSQL: Visit the PostgreSQL official website to download and install PostgreSQL for your operating system

Click on the link to download the database file

Step 2: Installing Spring Boot

Open the project and run Spring Boot App (or run JUnit Test if you want to test)

Step 3: Installing Next.js

npm install
npm run dev

Step 4: Accessing the Application

Open a web browser and go to http://localhost:3000 to view your application in action.

Deployment

Demo

Click on the link to book tickets

Accounts used to test the website

Customer account

Payment method

VNPay wallet

Local bank card
  • Bank abbreviation: NCB
  • Bank code: 9704198526191432198
  • Cardholder's name: NGUYEN VAN A
  • Issued on: 07/15
  • OTP: 123456
VISA (No 3DS)
  • Bank code: 4456530000001005
  • CVC/CVV: 123
  • Cardholder's name: NGUYEN VAN A
  • Issued on: 12/23
  • Email: test@gmail.com
  • Address: 22 Lang Ha
  • City: Ha Noi

Paypal wallet

Reference

Check out the full docs on cinema.com for more details.