Animation of the Website

Description

Project aims to create a Movie App.

Project Skeleton

react-movie-app
|
├── public
│    ├── favicon.ico
│    └── index.html
├── src
│    ├── auth
│    │      └── firebase.js
│    ├── components
│    │       ├── AlertSendMail.jsx
│    │       ├── BasicModal.jsx
│    │       ├── Footer.jsx
│    │       ├── MovieCard.jsx
│    │       ├── Navbar.jsx
│    │       └── Search.jsx
│    ├── context
│    │       ├── LoginContext.jsx
│    │       └── MovieCardContext.jsx
│    ├── pages
│    │       ├── Home.jsx
│    │       ├── Login.jsx
│    │       ├── MovieDetail.jsx
│    │       └── Register.jsx
│    ├── router
│    │       ├── AppRouter.jsx
│    │       └── PrivateRouter.jsx
│    ├── App.js
│    ├── index.css
│    └── index.js
├── .gitignore
├── movie-app.gif
├── package.json
├── README.md
└── yarn.lock

Overview

I mastered HTML, CSS, JS, React, Material UI and Firebase features in this project. You can see the visual representation of the website above.

Steps to Solution

• Step 1 : Create React App using npx create-react-app movie-app and install firebase npm i firebase / yarn add firebase

• Step 2 : Signup https://firebase.google.com/ and create new app in firebase. Firebase is a backed application development software that enables developers to develop iOS, Android and Web apps. It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit. It is built on Google’s infrastructure. Firebase offers a number of services, including: analytics,authentication, cloud messaging, realtime database, performance and test lab. Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents.

• Step 3 : Use https://firebase.google.com/docs/auth/web/start and create Authentication operations.

  • Add the Firebase Authentication JS codes in your firebase.js file and initialize Firebase Authentication:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Replace the following with your app's Firebase project configuration at project settings part
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

• Use this method to Sign up new users :

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
  })
  .catch((error) => {
    console.log(error);
  });

• Go to https://console.firebase.google.com => Authentication => sign-in-method => enable Email/password
• Use this method to Sign in existing users :

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
  })
  .catch((error) => {
    console.log(error);
  });

• Use this method to Set an authentication state observer and get user data :

import { getAuth, onAuthStateChanged } from "firebase/auth";
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
  } else {
    // User is signed out
  }
});

• Go to https://console.firebase.google.com => Authentication => sign-in-method => enable Google
• Use this method to Authenticate Using Google with Popup :

import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    console.log(error);
  });

• Use this method to Sign Out :

import { getAuth, signOut } from "firebase/auth";
signOut(auth)
  .then(() => {
    // Sign-out successful.
  })
  .catch((error) => {
    // An error happened.
  });

• Use this method to Send a password reset email :

import { getAuth, sendPasswordResetEmail } from "firebase/auth";
sendPasswordResetEmail(auth, email)
  .then(() => {
    // Password reset email sent!
  })
  .catch((error) => {
    const errorMessage = error.message;
    // ..
  });

• Step 4 : Signup https://www.themoviedb.org/documentation/api and get API key. In order to get data use https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}, to search movies use https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=, to get movie details use https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY} and to get video key use https://api.themoviedb.org/3/movie/${id}/videos?api_key=${API_KEY}. Use https://image.tmdb.org/t/p/w1280${poster_path} for image src.