├── README.md ├── backend ├── db │ └── schema.sql ├── package-lock.json ├── package.json ├── src │ ├── app.ts │ ├── config │ │ └── database.ts │ ├── controllers │ │ ├── bookingsController.ts │ │ └── moviesController.ts │ └── routes │ │ ├── bookings.ts │ │ └── movies.ts └── tsconfig.json └── frontend-angular ├── .editorconfig ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.ts │ ├── app.module.ts │ ├── booking-confirmation │ │ ├── booking-confirmation.component.css │ │ ├── booking-confirmation.component.html │ │ └── booking-confirmation.component.ts │ ├── models │ │ ├── booking.model.ts │ │ └── movie.model.ts │ ├── movie-details │ │ ├── movie-details.component.css │ │ ├── movie-details.component.html │ │ └── movie-details.component.ts │ ├── movie-list │ │ ├── movie-list.component.css │ │ ├── movie-list.component.html │ │ └── movie-list.component.ts │ ├── seat-selection │ │ ├── seat-selection.component.css │ │ ├── seat-selection.component.html │ │ └── seat-selection.component.ts │ └── services │ │ └── api.service.ts ├── environments │ └── environment.ts ├── index.html ├── main.ts └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /README.md: -------------------------------------------------------------------------------- 1 | # Ticket Booking System - Full Stack 2 | 3 | This is a full-stack web application for booking movie tickets, built with an Angular frontend and a Node.js/Express backend connected to a MySQL database. 4 | 5 | ## Features 6 | 7 | * Browse a list of currently playing movies. 8 | * View detailed information about a specific movie. 9 | * Select showtimes for a movie. 10 | * Visually select available seats for a chosen showtime. 11 | * Book selected seats. 12 | * View booking confirmation details. 13 | 14 | ## Tech Stack 15 | 16 | * **Frontend:** Angular (Standalone Components) 17 | * **Backend:** Node.js, Express.js 18 | * **Database:** MySQL 19 | * **API Communication:** RESTful API 20 | 21 | ## Prerequisites 22 | 23 | Before you begin, ensure you have the following installed: 24 | 25 | * [Node.js](https://nodejs.org/) (which includes npm) 26 | * [MySQL Server](https://dev.mysql.com/downloads/mysql/) 27 | 28 | ## Installation & Setup 29 | 30 | 1. **Clone the repository:** 31 | ```bash 32 | git clone https://github.com/Krishna18062005/Ticket_Booking_System_Full-Stack.git 33 | cd Ticket_Booking_System_Full-Stack 34 | ``` 35 | 36 | 2. **Backend Setup:** 37 | * Navigate to the backend directory (e.g., `cd backend` - adjust if your folder name is different). 38 | * Install dependencies: 39 | ```bash 40 | npm install 41 | ``` 42 | * **Database Configuration:** 43 | * Create a MySQL database (e.g., `movie_booking_db`). 44 | * Configure your database connection details. This might be in a `.env` file or directly in a config file (e.g., `src/config/database.ts`). You'll typically need: 45 | * `DB_HOST` (e.g., `localhost`) 46 | * `DB_USER` (e.g., `root`) 47 | * `DB_PASSWORD` (your MySQL password) 48 | * `DB_NAME` (e.g., `movie_booking_db`) 49 | * *(If using a `.env` file, create one based on a potential `.env.example`)* 50 | * **Database Schema:** Run the necessary SQL scripts to create the `movies` and `bookings` tables. You might have these in an `sql/` directory or need to create them based on your entity models. 51 | ```sql 52 | -- Example table structures (adjust as per your actual schema) 53 | CREATE TABLE movies ( 54 | id INT AUTO_INCREMENT PRIMARY KEY, 55 | title VARCHAR(255) NOT NULL, 56 | description TEXT, 57 | duration INT, -- Duration in minutes 58 | rating DECIMAL(3, 1), 59 | -- Add other fields like poster_url, release_date etc. if needed 60 | created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 61 | ); 62 | 63 | CREATE TABLE bookings ( 64 | id INT AUTO_INCREMENT PRIMARY KEY, 65 | movie_id INT NOT NULL, 66 | showtime VARCHAR(50) NOT NULL, -- Or DATETIME if storing specific date/time 67 | seats TEXT NOT NULL, -- Storing seats as JSON array string '["S1", "S5"]' 68 | created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, 69 | FOREIGN KEY (movie_id) REFERENCES movies(id) ON DELETE CASCADE 70 | ); 71 | ``` 72 | * **Seed Data (Optional):** Insert initial movie data into the `movies` table using SQL `INSERT` statements. 73 | 74 | 3. **Frontend Setup:** 75 | * Navigate to the frontend directory (e.g., `cd ../frontend-angular` - adjust if your folder name is different). 76 | * Install dependencies: 77 | ```bash 78 | npm install 79 | ``` 80 | 81 | ## Running the Application 82 | 83 | 1. **Start the Backend Server:** 84 | * Navigate to the backend directory. 85 | * Run the development server (this command might differ based on your `package.json`): 86 | ```bash 87 | npm run dev 88 | ``` 89 | * The backend API should now be running (typically on `http://localhost:3001`). 90 | 91 | 2. **Start the Frontend Server:** 92 | * Navigate to the frontend directory. 93 | * Run the Angular development server: 94 | ```bash 95 | ng serve -o 96 | ``` 97 | * This will compile the Angular app, start a development server (usually on `http://localhost:4200`), and open it in your default browser. 98 | 99 | Now you should be able to access and use the ticket booking application. 100 | 101 | ## API Endpoints (Example) 102 | 103 | * `GET /api/movies`: Get list of all movies. 104 | * `GET /api/movies/:id`: Get details of a specific movie. 105 | * `GET /api/bookings/booked-seats?movieId=&showtime=