https://github.com/yaserdemet/movieapp-react
https://github.com/yaserdemet/movieapp-react
context-api firebase-auth helmet router tostify
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/yaserdemet/movieapp-react
- Owner: yaserdemet
- Created: 2022-07-16T20:48:20.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-24T12:22:21.000Z (almost 4 years ago)
- Last Synced: 2025-01-30T14:40:26.415Z (over 1 year ago)
- Topics: context-api, firebase-auth, helmet, router, tostify
- Language: JavaScript
- Homepage: movie-app-react-sigma.vercel.app
- Size: 595 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Description
[📍click here to see page](https://movie-app-react-68y1ey1wk-yaserdemet.vercel.app
)
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
Login Page
```
```jsx
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` :
```jsx
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` :
```jsx
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` :
```jsx
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` :
```jsx
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` :
```jsx
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.