Description

📍click here to see page

Project aims to create a Movie App.

Problem Statement

• Have multiple pages, and visiter should not visit all page without registeration. After registeration redirect them to relevant pages.

Project Skeleton

005 - Movie App (folder)
|
|----readme.md         # Given to the students (Definition of the project)
SOLUTION
├── public
│     └── index.html
├── src
│    ├── auth
│    │     └── firebase.js
│    ├── components
│    │     ├── MovieCard.js
│    │     └── Navbar.js
│    ├── context
│    │     └── AuthContext.js
│    ├── pages
│    │     ├── Login.js
│    │     ├── Register.js
│    │     ├── Main.js
│    │     └── MovieDetail.js
│    ├── router
│    │     └── Router.js
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
├── package.json
├── .env
└── yarn.lock

At the end of the project, following topics are to be covered;

📌 Props and State Logic

📌 Global State Management ( Context Api )

📌 Conditional Rendering

📌 Firebase Authentication

📌 React Router Pages

📌 3rd Part Libraries ( Toastify, Axios )

📌 Helmet for SEO optimization

📌 Crypto apiKeys in .env files

📌 Deployment with Vercel and Netlify

At the end of the project, i will be able to;

• improve coding skills within HTML & CSS & JS & ReactJS.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Steps to Solution

• Step 1 : Create React App using npx create-react-app movie-app

• Step 2 : Signup https://firebase.google.com/ and create new app in firebase.

• 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:

• For SEO optimization i have add Helmet, to use helmet

yarn add helmet-react 

then in your component add title and meta tag

      <Helmet>
        <title>Login Page</title>
        <meta name="description" content="login page" />
      </Helmet>
      

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);
  });

• 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
  }
});

• 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.
  });

• Step 4 : Signup https://www.themoviedb.org/documentation/api and get API key for getting data from https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}, for searching movies https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query= and for movie details https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}.

• Step 5: You can use css frameworks like Bootstrap, Semantic UI, Material UI.