EventPrime_Booking_App

Overview

We are excited to introduce you to the EventPrime project! This application, built using React, is designed to mirror the user interface and features of the well-known ticket booking platform, EventPrime. Whether you are a developer eager to delve into React or an individual keen on developing a personalized ticket booking application, this project offers a solid groundwork to start with.

Description

EventPrime is a well-known platform where users can explore and purchase tickets for movies, events, and a variety of entertainment shows. This replica project replicates the essential functionalities of the EventPrime platform, delivering a smooth and engaging user interface.

Technology Stack

Frontend

• React JS: Modern JavaScript framework for building interactive user interfaces.
• React Router: Declarative routing for navigation within the application.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Axios:Promise based HTTP client for the browser and node.js

Features

There are many Features like a payment integration, OTP generator, Google SignUp

Homepage

• Interactive landing page featuring upcoming movies, events, and popular shows.
• Prominent banners showcasing exclusive promotions and deals.

Movie Details

• Comprehensive details about the chosen movie, such as screening times, cast members, and reviews.
• Ability to choose seats and purchase tickets for a specific screening.

Events Information

• Details about upcoming events, live concerts, and performances.
• Simple ticket booking process for various events.

Ordering Process

• Effortless ordering system that enables users to add tickets to their cart and finalize their booking.

Download the App

Get the EventPrime Clone app today for a smooth ticket booking experience! 🎫🍿.

Libraries Used:

Library Name	Description
React Js	Frontend Framework
React Router	Routing library
React Slick	For carousel implementation
slick-carousel	Carousel library (used with React Slick)
Axios	HTTP client for making API requests
headlessui/react	Accessible React components
react-oauth/google	Google OAuth library for authentication
React Icons	Icon library for React
React Helmet	Manage document head for SEO
Tailwind CSS	Utility-first CSS framework

Tools Used:

Tool Name	Description
npm	Package Manager tool

Guide for Installation and Usage

Forking the Repository

To begin, locate the "Fork" button situated at the top right corner of the page. By clicking on it, you will successfully create a duplicate of the repository within your GitHub account.

Clone the Repository

git clone https://github.com/your-username/GateUp.git](https://github.com/anupamthackar/EventPrime_Booking_App.git

Navigate to the project directory

cd EventPrime-clone

Install the dependencies using npm

npm install

Configuration

Create a .env file in the root directory and add the following configurations:

REACT_APP_API_KEY = 'YOUR_MOVIEDB_API_KEY'
REACT_APP_GOOGLE_CLIENT_ID = 'YOUR_GOOGLE_CLIENT_ID'
REACT_APP_RAZORPAY_KEY = 'YOUR_RAZORPAY_API_KEY'
REACT_APP_OPENCAGE_API_KEY = 'YOUR_OPENCAGE_API_KEY'

Please update the placeholders <YOUR_MOVIEDB_API_KEY>, <YOUR_GOOGLE_CLIENT_ID>, <YOUR_RAZORPAY_API_KEY>, and <YOUR_OPENCAGE_API_KEY> with your respective API keys. You can find these keys by visiting the following sources:

• MovieDB API Key: The MovieDB API
• Google Cloud API Key: Google Cloud Console
• Razorpay API Key: Razorpay Dashboard
• OpenCage API Key: OpenCage Data.

To initiate the development server and preview the application, execute the subsequent command:

npm start

This action will launch the application on the local development server of your computer, which can be accessed at http://localhost:3000.

ScreenShots

Home Page:

Sign In Page:

Movie Page:

Razopay Interface

Payment Page

Payment Option

404 Not Found Page

Website Demo

Websit Demo