React-Netflix-APP

Simple introduction to hooks

---

• Repository:
  • react-video
• Type of Challenge:
  • Learning Challenge
• Duration:
  • 3 days

Introduction

For this project you will create a netflix app. kind of :) This project is made for progressive enhancement.Wich means we are going to scale it from front-end app to a fullstack app. First of all create an account on the following platform

1 Setup you environment

With the create-react-app cli tool bootstrap a new project call react-video.

npx create-react-app video-app

or

yarn -g add create-react-app 

if you don't have npx, install it with

sudo npm install -g npx

When you have created your account go to the api section of the website and request an API-KEY. Here is an example on how your app should look like: mockup Feel free to create your own designs/mockups.

2 Use React hooks

Hooks are one of the latest features in React. It allows you to write a more readable and maintainable code. For this part you will only have to use to hooks:

• useState()
• useEffect()

In the src folder on your app you can create a view folder and a components folder.

3 Use react router dom

For each app, we need routes, and for that we have react-router-dom.

Sprints

Homepage:

Create Home.js inside of the view folder. Create Card.js inside of the components folder.

Fetch the Now playing movies from the TMDB database. inside of the Card.js display

• the title of the movie
• the image/poster of the movie
• the overview of the movie
• the Vote average of the movie.

Use the props to display everyting inside of Home.js (ps: The point of the Card.js component is to reuse it everywhere 😉 )

Search Bar:

On each page of our app, we should have the searchBar so we can search for movies everywhere. Create Search.js inside of the components folder. Fetch the user's search movies from the TMDB database. Use the Card.js to display the results in an other view called Result.js

Tools

-create-react-app is a tool the will create a react environment for you.

• JSdocs, a lot of developers work with . This little tool will generate a documentation for your code. i Strongly recommend it.

• Figma is UI UX software. really useful to create your mockups and designs. You can create an account it is free.

• Identify all the different components you will have to create. (think in react!)