Cinemix App ©️

💻 https://cinemix-app.vercel.app/

Description

Cinemix is a dynamic, responsive and user-friendly web application built using React, Vite for faster development and better performance, TailwindCSS, Firebase Authentication, and Axios for API requests. It allows users to register and login securely using Firebase Authentication, browse movies fetched from an external API categorized by genres, view movie details, and add their favorite movies.

Outcome

Project Planning & Management

Epic User Story: As a cinemix application user, I must be able to authenticate to the application both with email and password and with Google. I should also be able to see the details of the movie I want by querying it. Then I should be able to add and remove my favorite movies.🎥

User Stories:

1️⃣ Register for an Account:

• 🥇 As a user, I want to be able to register for an account so that I can access the application securely.

• 🥈 As a user, I should be able to provide my email address and create a password to register.

• 🥉 As a user, I should also be able to authenticate with Google

  Task-1 = Create registration form UI.
  Task-2 = Validate user input in the registration form (e.g., email format, password strength).
  Task-3 = Implement Firebase Authentication (+ Google Auth) to create a new user account.
  Task-4 = Handle registration success and failure cases.
  Task-5 = Redirect the user to the home page after successful registration.
  Task-6 = Display appropriate error messages with Toastify for registration failures.
  

2️⃣ Log in to Account:

• 🥇 As a registered user, I want to be able to log in to my account using my email address, password and also my Google account.

• 🥈 Logging in should authenticate me securely and grant access to the application's features.

  Task-1 = Create login form UI.
  Task-2 = Validate user input in the login form (e.g., email format).
  Task-3 = Implement Firebase Authentication to log in with email and password.
  Task-4 = Handle login success and failure cases.
  Task-5 = Redirect the user to the home page after successful login.
  Task-6 = Display appropriate error messages for login failures.
  Task-7 = Implement "Forgot Password" functionality if required to redirect the user to the reset page.

3️⃣ Browse Movies Categorized by Genres:

• 🥇 As a user, I want to browse movies categorized by genres.

• 🥈 As a user, I should be able to click on a genre category to view movies belonging to that genre.

  Task-1 = Fetch movie genres from the external API.
  Task-2 = Display movie genres as clickable categories.
  Task-3 = Fetch movies based on selected genre using Axios.
  Task-4 = Display fetched movies in a visually appealing manner.
  Task-5 = Implement pagination if the number of movies is large.
  Task-6 = Handle loading and error states during API requests with appropriate Toastify messages.

4️⃣ Search for Movies:

• 🥇 As a user, I want to be able to search for movies by their titles.

• 🥈 As a user, I should be able to enter keywords in a search bar and see relevant movie results.

  Task-1 = Implement Search Bar UI
  Task-2 = Fetch Movie Results and display it in MovieDetail page based on Query

5️⃣ View Movie Details:

• 🥇 As a user, I want to be able to view detailed information about each movie.

• 🥈 Clicking on a movie should display its title, synopsis, release date, and other relevant details.

  Task-1 = Create a component to display detailed information about a movie.
  Task-2 = Fetch additional details of a movie when the user clicks on it.
  Task-3 = Display movie details such as title, total rate, release date, etc.
  Task-4 = Ensure that the movie details page is visually appealing and user-friendly.
  Task-5 = Implement a button or link to navigate back to the previous page.

6️⃣ Add Movies to Favorites:

• 🥇 As a user, I want to be able to add movies to my favorites list for easy access.

• 🥈 As a user, I should be able to mark movies as favorites and view them later in a dedicated favorites section.

  Task-1 = Implement functionality to add a movie to the user's favorites list.
  Task-2 = Display a heart icon or similar to indicate whether a movie is in the user's favorites.
  Task-3 = Store favorite movies in Firebase Firestore or Realtime Database.
  Task-4 = Update UI to reflect changes when a movie is added or removed from favorites.
  Task-5 = Ensure that users can easily manage their favorites list (add/remove).

7️⃣ Responsive Design:

• 🥇 As a user, I expect the application to be responsive and work seamlessly on various devices and screen sizes.

• 🥈 The UI should adapt to different screen sizes, ensuring a consistent and user-friendly experience.

  Task-1 = Use TailwindCSS for styling components and layouts.
  Task-2 = Design UI components to be responsive and adapt to different screen sizes.
  Task-3 = Implement responsive navigation for smaller screens (e.g., mobile devices).
  Task-4 = Ensure that text, images, and other UI elements are legible and accessible on all devices.

Project Skeleton 🩻

📖Cinemix (folder)
|
├── 📁.firebase
│
├── 📁src
│    ┣ 📂assets
│    ┃       ┗ [images, icons and font-families]
|    ┃
│    ┣ 📂auth
│    ┃     ┗ firebase.js
|    ┃
│    ┣ 📂components
│    ┃       ┣ Banner.jsx
│    ┃       ┣ ErrorPage.jsx
│    ┃       ┣ MovieCol.jsx
│    ┃       ┣ MovieRow.jsx
│    ┃       ┣ Navbar.jsx
│    ┃       ┣ SearchForm.jsx
│    ┃       ┣ Switch.jsx
│    ┃       ┗ VideoSection.jsx
|    ┃
│    ┣ 📂context
|    ┃    ┗ AuthContext.jsx
|    ┃
│    ┣ 📂helpers
|    ┃    ┗ toastNotify.js
|    ┃
│    ┣ 📂pages
│    ┃       ┣ Home.jsx
│    ┃       ┣ Login.jsx
│    ┃       ┣ MovieDetail.jsx
│    ┃       ┣ NotFound.jsx
│    ┃       ┣ Profile.jsx
│    ┃       ┣ Reset.jsx
│    ┃       ┗ Signup.jsx
│    ┃
│    ┣ 📂routers
|    ┃       ┣ AppRouter.jsx
│    ┃       ┗ ProtectedRouter.jsx
|    ┃
│    ┣ 📂services
│    ┃       ┗ movieServices.js
|    ┃
│    ┣ App.jsx
│    ┣ index.css
│    ┗ main.jsx
|
├── cinemix-app.gif
├── .firebaserc
├── .gitignore
├── example.env
├── firebase.json
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── vite.config.js

Objective

With this project, a single-page Movie Application will be developed using ReactJS and TailwindCSS, and it is aimed to develop skills in subjects such as API usage, asynchronous data processing and dynamic content management and conditional rendering.

Technologies Used 🎯

• React (React-Router & React-Context API)

• TailwindCSS

• Axios

• Firebase Authentication

• Toastify (For Error Messages)

• Vite

Step-By-Step Project Guide

• Step 1: Clone the Repository to Your Local Machine:

  Copy the URL of the project repository from GitHub or a similar platform. Open your terminal or command prompt and navigate to the directory where you want to store the project. Use the following command to clone the repository:

  git clone <repository_url>
  

  Replace <repository_url> with the URL of the project repository you copied.

• Step 2: Install Node Package Manager:

  Navigate to the root directory of the project in your terminal or command prompt. Use the following command to install npm packages:

  npm install
  

  This command will install the project's dependencies based on the list in the package.json file.

• Step 3: Signup https://developer.themoviedb.org/docs/getting-started and get api key, signup also https://firebase.google.com/ to create a project and copy project configurations. After that, paste your personal api key and firebase configurations into your .env file (like example.env file) that you will create in your project root directory. You can check "example.env" file in project root directory.

  VITE_FIREBASE_API_KEY=[YOUR_VITE_FIREBASE_API_KEY]
  VITE_FIREBASE_AUTH_DOMAIN=[YOUR_VITE_FIREBASE_AUTH_DOMAIN]
  VITE_FIREBASE_PROJECT_ID=[YOUR_VITE_FIREBASE_PROJECT_ID]
  VITE_FIREBASE_STORAGE_BUCKET=[YOUR_VITE_FIREBASE_STORAGE_BUCKET]
  VITE_FIREBASE_MESSAGING_SENDER_ID=[YOUR_VITE_FIREBASE_MESSAGING_SENDER_ID]
  VITE_FIREBASE_APP_ID=[YOUR_VITE_FIREBASE_APP_ID]
  VITE_TMDB_KEY=[YOUR_VITE_TMDB_KEY]
  

  Replace [YOUR...] with your personal firebase configurations and TMDB api key that you get from tmdb_

• Step 4 : Once all packages are successfully installed and api key is pasted, use the following command to start the project:

  pnpm dev
  

  This command will start the development server and open a live preview of the project in your default web browser. If the browser doesn't open automatically, you can view the project by navigating to http://localhost:3000.

Additional Data 📦

• Assets
• FIREBASE
• TMDB_API

Contributing 🤝

Your insights and contributions greatly enrich my projects! Whether you're bursting with fresh project concepts or have ideas to enhance existing ones, your input is invaluable. Feel free to open an issue to initiate a dialogue about your thoughts, or submit a pull request with your proposed modifications. Every contribution plays a vital role in my growth and improvement, so thank you for being an integral part of my community!

LICENSE 🪪

This repository is licensed under the MIT License. See the MIT licence file for details. For more information please visit MIT License

☺ Happy Coding ✍