# EpicEvents-A Event Booking Site
Check Live Website: https://epicevents-suzancodes.netlify.app/ |
This is a React app that allows users to search for movies and purchase tickets for upcoming events. The app includes the following features:
- Movie Selection Interface: Displays a list of available movies with details (title, description, price, etc.) and allows users to select the quantity of tickets for each movie they want to purchase. Users can select only one card at a time.
- Price Calculation: Calculates the total price based on the selected quantity of tickets for each movie with tax vat and discount.
- Billing Information Form: Creates a form where users can enter their billing information (fullname, email, address, etc.). The form includes form validation to ensure proper input.
- Generation of Bill: Generates a bill in PDF format containing the details of the selected movies, quantity, total price, and billing information.
- Integration and UI Design: Integrates all components and ensures seamless functionality between movie selection, billing form, and bill generation. The app has a user-friendly interface for smooth navigation and a pleasing user experience.
- React Library for UI Functionality
- React Router for routing between pages and components
- node-sass for installing packages
- -React-Hook-form for handling form and form validation
- react-to-pdf for generating pdf
To run this app in ypur local machine, follow these steps:
Sure, here's a step-by-step README for running a React app built with Create React App on a local machine:
- Node.js installed on your machine. You can download it from Node.js website.
- npm or Yarn package manager installed (npm comes with Node.js installation).
-
Clone or download the project from a repository:
- If the project is hosted on GitHub, you can clone it using
git clone
command:git clone https://github.com/sujansince2003/Epic-Events-assignment.git
- Alternatively, you can download and extract the project ZIP file from its repository.
- If the project is hosted on GitHub, you can clone it using
-
Navigate to the project directory:
- Open a terminal or command prompt and navigate to the root directory of the project using the
cd
command:cd project-name
- Open a terminal or command prompt and navigate to the root directory of the project using the
-
Install dependencies:
- Use npm or Yarn to install the required dependencies for the project: - If using npm:
bash npm install
- If using Yarn:bash yarn install
This will install all the necessary packages mentioned in thepackage.json
file.
- Use npm or Yarn to install the required dependencies for the project: - If using npm:
-
Start the development server:
- After installing dependencies, start the development server: - If using npm:
bash npm start
- If using Yarn:bash yarn start
This command will start the development server and open the app in your default web browser athttp://localhost:3000
. Any changes you make in the code will automatically refresh the app in the browser.
- After installing dependencies, start the development server: - If using npm:
-
View the React app:
- Open a web browser and navigate to
http://localhost:3000
if it doesn't automatically open after starting the development server. You should see your React app running locally.
- Open a web browser and navigate to
-
Stopping the development server:
- To stop the development server, go to the terminal where the server is running and press
Ctrl + C
.
- To stop the development server, go to the terminal where the server is running and press
-
Build the app for production (optional):
- When you're ready to deploy the app, you can create an optimized production build using: - If using npm:
bash npm run build
- If using Yarn:bash yarn build
This command will create abuild
folder containing optimized static files ready to be deployed to a web server.
- When you're ready to deploy the app, you can create an optimized production build using: - If using npm:
That's it! You should now have your React app up and running on your local machine.
To use this app, follow these steps:
- Browse the results of movies received from omdbAPI and click on a movie to view more details.
- Select the number of tickets you want to purchase and click "Buy Tickets".
- Enter your personal information and click "Submit".
- Review your order summary and click "Confirm Order".
- Generate the Invoice PDF .