A react movie project where you can access many details and trailers about the desired movie using tmdb api. Firebase, toastify, tailwind.css were used in this project.
- Movie App (folder)
|
SOLUTION
βββ public
β βββ index.html
βββ src
β βββ assets
β β βββ [icons]
β βββ auth
β β βββ firebase.js
β βββ components
β β βββ ErrorPage.jsx
β β βββ MovieCard.jsx
β β βββ Navbar.jsx
β β βββ SearchInput.jsx
β β βββ Switch.jsx
β β βββ VideoSection.js
β βββ context
β β βββ AuthContext.js
β β βββ MovieContext.jsx
β βββ helpers
β β βββ toastNotify.js
β βββ pages
β β βββ Login.jsx
β β βββ Main.jsx
β β βββ MovieDetail.jsx
β β βββ NotFound.jsx
β β βββ Register.jsx
β βββ router
β β βββ AppRouter.jsx
β β βββ PrivateRouter.jsx
β βββ App.js
β βββ index.css
β βββ index.js
βββ .env.local
βββ .gitignore
βββ example.env.local
βββ LICENSE
βββ package.json
βββ README.md
βββ tailwind.config.js
βββ yarn.lock
-
Before start you can watch these tutorials:
-
Step 1 : Create React App using
npx create-react-app movie-app
and install firebasenpm 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 createAuthentication
operations.- Add the Firebase Authentication JS codes in your
firebase.js
file and initialize Firebase Authentication:
- Add the Firebase Authentication JS codes in your
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 usehttps://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}
orhttps://api.themoviedb.org/3/movie/now_playing?language=en-US&page=1&api_key=${API_KEY}
to search movies usehttps://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=
, to get movie details usehttps://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}
and to get video key usehttps://api.themoviedb.org/3/movie/${id}/videos?api_key=${API_KEY}
. Usehttps://image.tmdb.org/t/p/w1280${poster_path}
for imagesrc
.