Watch Me

Preview   |    Project   |    Next Level   |    Technologies   |    Getting started   |    Tests   |    License

---

✨ Preview

Online system
https://study-ignite-react-challenge-01-02.vercel.app

💻 Project

In this challenge, you will have to create an application to train what you have learned so far in ReactJS.

This will be an application where your main objective is to refactor a page for listing films according to genre.

The application is already fully functional but a large part of its code is directly in the App.tsx file. To solve this in the best way, it is necessary to divide the application into at least two main parts: sidebar and the main content that has the header and the list of films.

• The application has only one main feature, which is the listing of films;
• In the sidebar it is possible to select which category of films should be listed;
• The first category on the list (which is "Action") should start as marked;
• The application header has only the name of the selected category that must be changed dynamically.

This is a project developed during the Ignite - Trilha React, carried out by @Rocketseat.

💎 Next Level

• Added styled-component
  • Styles to component
  • Styles do Global
• Separating the application into more components:
  • Button
  • Content
  • Header
  • Icon
  • MovieCard
  • SideBar
• A custom hook was created concentrating the logic for "Genres"

🔖 Technologies

This project was developed using the following technologies:

• React
• TypeScript
• Styled-Components

🚀 Getting started

Clone the project

$ git clone https://github.com/KesleyDavid/study_Ignite_React_Challenge-01-02.git

Access the folder

$ cd study_Ignite_React_Challenge-01-02

Follow the steps below

# Install the dependencies
$ yarn

# Start the server (backend)
$ yarn server

# Start the web (frontend)
$ yarn dev

🥇 Tests

  # Coming soon

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Made with ♥ by Kesley DEV