WPH-Bootcamp/challenge-9-BISNISCREATIVE: wph-bootcamp-batch-3-challenge-9-t-challenge9-b3 created by GitHub Classroom

In this assignment, you'll create a movie app using public API from TMDB. You can check the API DOCUMENTATION HERE

You'll be provided with a basic project setup, and your task will be to implement the design by writing React component utilize with Tailwind CSS v4.

The design for this assignment is located at the following Figma link:

Figma Design Link

The goal is to assess your ability to:

• Interpret a design from Figma.
• Structure a webpage with React.
• Apply styles using Tailwind CSS.
• Create a responsive layout.
• Integrate your app with public API

You are provided with the following folder structure:

• |- node module
• |- public
• |- src
• |-- assets
• |-- components
• |--- container
• |--- layout
• |--- pages
• |--- ui
• |-- hooks
• |-- interfaces
• |-- routes
• |-- services
• |-- app.tsx
• |-- index.css
• |-- main.tsx

etc.

Don't forget to run npm install for this project first (this project already installed libraries that you need, such as Axios, React Query, React Router DOM, Tailwindcss, clsx, react-intersection-observer)

Study the Figma Design: Open the Figma link and thoroughly examine the design. Understand the layout, spacing, colors, typography, and responsive behavior.

Start to code using all structured files that provided (you can also add what you need)

You don't have to change index.html or main.tsx, also you can create a structure folder as you want, but remember to stay on reusable principe

The evaluation for this assignment will be based on the following criteria:

1. Structure and organize component: How you can split the code into components and organize it
2. Props Handling: How you use props effectively
3. Conditional Rendering: How you display a different component with conditions
4. Reusable Components: How can you reuse the component so you're code will be cleaner
5. Code Clarity: Code quality checking
6. Hooks usage: How can you utilize hooks effectively (u don't have to use all hooks)

Check this module: click this

LINK WEBSITE : MOVIE