This project was bootstrapped with Create React App.
Project Summary: Book My Show App
Our team of three developers successfully created a web application called Book My Show, which allows users to select movie names, choose a slot, and book seats for their preferred showtimes. The app also provides users with the option to view their previous bookings. The project utilized a combination of front-end and back-end technologies to deliver a seamless user experience.
Front-End Technologies:
- React: We chose React as our front-end framework due to its component-based architecture, which enabled us to create reusable UI elements and efficiently manage state throughout the application.
- CSS Styling: We used CSS to style the application, ensuring an attractive and intuitive user interface that aligns with the Book My Show brand.
- React Hooks: Leveraging React Hooks allowed us to manage state and perform side effects, such as API calls, within functional components.
- Axios: To fetch data from the server, we integrated Axios, a popular JavaScript library that simplifies the process of making HTTP requests.
Back-End Technologies:
- MongoDB: We selected MongoDB as our database to store movie details, slot information, seat availability, and user bookings. Its flexibility and scalability made it an ideal choice for our application.
- Express.js: As the back-end framework, Express.js facilitated the creation of a robust API for handling user requests, managing data, and communicating with the database.
User Flow:
- Movie Selection: Users can select their preferred movie title.
- Slot and Seat Selection: Once a movie is chosen, users can view available time slots and select one. They can then choose their desired seat numbers from a visual representation of the theater layout.
- Booking Confirmation: When the user clicks "Book Now," the app processes the request and confirms the booking.
- Previous Bookings: Users can access their booking history, which displays details such as movie name, slot, seat numbers.
Overall, our team successfully implemented a Book My Show app that allows users to conveniently book movie tickets online. By utilizing React, CSS, React Hooks, and Axios on the front end, along with MongoDB and Express.js on the back end, we delivered a seamless and user-friendly experience. The app offers the essential features of movie selection, slot and seat selection, booking confirmation, and a history of previous bookings.
-
Overview
-
Booking a Movie
-
Previous Booking
-
Responsive Design
- Deployed Link --> https://bookmyshow-iwij.onrender.com/
- Live Server LInk --> https://bookmyshow-api.onrender.com/api/booking
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify