Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enes9103/045_firebase_movie_app
https://github.com/enes9103/045_firebase_movie_app
api-rest axios-react database design firebase-auth firebasedatabase javascript movie-database react reactjs router-dom
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/enes9103/045_firebase_movie_app
- Owner: enes9103
- Created: 2022-04-11T18:09:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-05-08T14:51:27.000Z (over 2 years ago)
- Last Synced: 2024-05-01T16:35:12.981Z (7 months ago)
- Topics: api-rest, axios-react, database, design, firebase-auth, firebasedatabase, javascript, movie-database, react, reactjs, router-dom
- Language: JavaScript
- Homepage: https://movie-app-with-firebase.herokuapp.com/
- Size: 56.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project : Movie App (RC-08)
## Project Outcome
## Description
Project aims to create a Movie App.
## Project Skeleton
```
008 - 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
```
## Objective
Build a Movie App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students 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.
- 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.
- Step 6: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities to your app.
**
☺ Happy Coding ✍
**