My goal was to create a movie site like netflix but with another design and without the movies 😉😂. Built with React js
- In the project directory, run
yarn
to install all dependencies - After installation, run
yarn start
. To view the site on 'localhost:3000/' in your browser
Nte: Get your api key from TheMovieDB
- Live Site URL: the/MovieFlix
- The application fetches data from TheMovieDB using 'useSWR' hook from the swr library
- Each inidividual components can be found in the components folder, the "shared" folder contains components shared by both the movie and tvshow.
- All reusable functions are located in the "utils" folder
- I used
ternary operator
to conditionally render some element instead of&&
to avoid mistakenly rendering 0. In Javascript,0 && anything
evaluates to0
because0
is a falsy value, so it dosen't evaluates the right side of the&&
. To read more: Use ternaries rather than && in JSX - I decided to use 'useSWR' hook for data fetching. It handles the loading and error state and also offers caching the data
- firebase for easy and simple setup for authentication (signin and signup)
One of the challenges I encouter was converting something like "132min to 2h 12min". I solved this with this function
let formatTime = (min) =>
`${Math.trunc(min / 60)}h ${`0${min % 60}`.slice(-2)}min`
- Add end to end testing
- Add searchbar in the header
- Website: Williams Samuel
- Twitter: @williams_codes