https://github.com/casperkristiansson/movieboxdb
A website that showcases movies. It is possible to search for a specific movie and observe information about that specific movie such as actors, release date, genre, score etc. The site allows users to add shows to a watchlist and a favourites list where they can store their favourite movies.
https://github.com/casperkristiansson/movieboxdb
dh2642 discover firebase firestore javascript model movie movieboxdb movies project react search tracker ux-prize
Last synced: about 2 months ago
JSON representation
A website that showcases movies. It is possible to search for a specific movie and observe information about that specific movie such as actors, release date, genre, score etc. The site allows users to add shows to a watchlist and a favourites list where they can store their favourite movies.
- Host: GitHub
- URL: https://github.com/casperkristiansson/movieboxdb
- Owner: CasperKristiansson
- License: mit
- Created: 2021-11-11T09:54:37.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-11T12:45:54.000Z (over 1 year ago)
- Last Synced: 2025-01-15T11:13:26.449Z (3 months ago)
- Topics: dh2642, discover, firebase, firestore, javascript, model, movie, movieboxdb, movies, project, react, search, tracker, ux-prize
- Language: JavaScript
- Homepage: https://movieboxdb.web.app/
- Size: 17 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MovieBoxDB
View the website here:
https://movieboxdb.web.app
## Default or Basic Usage
```
$ git clone https://github.com/CasperKristiansson/MovieBoxDB
$ cd MovieBoxDB
$ npm install
```
Next step is to create a api key at: https://developers.themoviedb.org/3/getting-started/introduction
Create a file at the path: src/js/apiConfig.js
```
export const API_KEY = API_KEY;
export const BASE_URL = "https://api.themoviedb.org/3";
export const IMAGE_URL = "https://image.tmdb.org/t/p/original";
```
Next step is to create a firebase application: https://firebase.google.com/docs/build
Create a file at the path: src/js/firebaseConfig.js
```
export const firebaseConfig = {
//...
};
```
```
$ npm start
```
## Description of Project
The API that has been used in this project is:
https://developers.themoviedb.org/4/getting-started/authorization
What we have decided to create is a website that showcases
movies. It is possible to search for a specific
movie and observe information about that specific movie
such as actors, release date, genre, score etc. The site allows
users to add shows to a watchlist and a favourites list where
they can store their favourite movies. The site also has score for each
show, and it is possible to sort through all movies depending on
multiple factors such as genre, language, release dates, region
and more. The way that users are able to store their movies
is by creating an account and logging in. This gives them
access to edit different aspects of their profile such as
bio, profile picture and name. Creating an account also
gives the user access to the MovieMatcher, which is a game
inspired by the dating app "Tinder", where the user swipes
in one of the four directions for movies depending on
whether or not they want to skip, add to favourites, add to
watchlist or see more info about the movie.
.gif)
Aside from this there is also a discover page that helps users find new
movies to either save or watch. The movies that appear in
the discover page can be sorted by min score, max score, newest
or oldest, most or least popular, highest or lowest rated, year,
and lastly most and least revenue.
Aside from these features the
site also shows how many movies have been saved to either the
favourites list or the watchlist at the bottom of the home page.
## Project file structure
We are following the React structure for files, which means that
we utilize a public folder where we store all our imgs and our
index files. Then we have a source file where our main files are, such as
index.js which is our rendering module where we use ReactDOM to render.
In app we render each presenter, where we use react component router.
Our project follows the MVP-structure:
In our source folder we have the folders css, which contains all the css
files for all styles for all pages as well as the earlier mentioned index.js.
and App.js files. The source folder also contains a js folder that houses
all our presenters, the views folder that holds all the views for all pages.
Lastly the js folder also contains general files like apiFetch, model and
firebaseConfig etc.