/cineflex

🎞 Cineflex is a web application that allows users to reserve seats to watch a movie at a movie theater. It was developed using React.js, React Router, Axios, and Styled-Components, and features a list of popular movies, session selection, seat selection, and booking confirmation.

Primary LanguageJavaScript

Cineflex Project


ℹ️ About

Cineflex is a web application that allows users to reserve seats to watch a movie at a movie theater. The main features of the project include:

  • Choose a movie from a list of popular movies;
  • Choose a session to watch the movie;
  • Select available seats for the chosen session;
  • Reserve the selected seats;
  • View the booking confirmation.

Cineflex was developed as a personal project to practice my web development skills. I was motivated to create this application because it is a tool that can be useful for many people and can be used in different contexts


🛠️ Technologies

react logo js logo html5 logo css3 logo figma logo git logo github logo

I chose to use React.js because it is one of the most popular web development libraries today and provides a scalable and maintainable framework for building modern web applications. React Router was used to manage application routes. Axios was used to make API calls to fetch information about available movies, sessions and seats. Styled-Components was used to create the user interface and provide a nice and intuitive experience for users.


⚙️ Functionalities

Movie Choice (/)

On the home screen, you can view a list of popular movies. The user can select a movie to see more information and choose a session to watch the movie.

Choose Session (/sessoes/:idMovie)

On this screen, the user can choose a session to watch the chosen movie. Session information such as time and number of available seats is provided by the API.

Seat Selection (/seats/:idSessao)

On this screen, the user can select the seats for the chosen session. Available seats are marked in green and seats selected by the user are marked in blue. The user can select or deselect seats by clicking on them.


🚀 Next Steps

  • Implement a login system for users to save their information and history
  • Add a feature for users to rate and review movies
  • Implement an admin panel to manage movies and sessions

🖇 How to run

To run this project locally, you'll need to follow these steps:

  1. Clone this repository: git clone https://github.com/natividadesusana/cineflex.git
  2. Install the dependencies: npm install
  3. Run the development server: npm start
  4. Access http://localhost:3000 in your browser to see the app running.

How to Contribute

Contributions are always welcome! If you find any bugs or have suggestions for new features, feel free to open an issue or pull request.