Project aims to create a Movie App with React.
- Develop a movie app using with https://www.themoviedb.org/
Movie App (folder)
|
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── icons
│ │-----------└── avatar.png
│ │-----------└── Googleicon.js
│ ├── auth
│ │ └── firebase.js
│ ├── components
│ │ ├── MovieCard.js
│ │ └── Navbar.js
│ │ └── Switch.js
│ │ └── VideoSection.js
│ ├── context
│ │ └── AuthContext.js
│ ├── pages
│ │ ├── Login.js
│ │ ├── Register.js
│ │ ├── Main.js
│ │ └── MovieDetail.js
│ ├── router
│ │ └── Router.js
│ │ └── PrivateRouter.js
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
├── .env
└── yarn.lock
└── readme.md
Check The Live Website ➡️ Live Website
- I made an Movie App with React & Firebase(for Authentication).
- User can login with his/her Google account or register and create new user.
- If some error happens while logging in, some alerts will show up which I created using react-toastify.
- I used Tailwind for styling.
- I get the data with AXIOS and fetch from themoviedb
- I added some restrictions. Without logging in user can not reach details page or can not make a search.
- I used useNavigate to redirect to desired pages.
I used;
- Firebase
- React-toastify
- Tailwindcss
- Components
- useState
- useEffect
- useContext
- React Router DOM V6
- useNavigate
- useParams
- axios
- import/export
- Props
- React Developer Tool
- Destructuring props
- array map method
- You can use HTML,CSS ,JAVASCRIPT and REACT to complete this project.