1. Objective

The goal of this project is to create a fully functional Product Listing Page (PLP) that matches the design specified in the Figma file (accessible at https://www.figma.com/file/N0Tv7yYLf3kfMLQjUncUlx/Design-Task---PLP?type=design&node-id=0-1&mode=design&t=mEpvVYQ7GInQPxXk-0).

This page simulates an e-commerce listing interface, typically including sections like a header with navigation, filters for refining products, a grid of product cards, and a footer.

The purpose is to demonstrate skills in front-end development, including:

• Translating a UI design into code using HTML, CSS, and React.js.
• Ensuring responsiveness across devices (desktop, tablet, mobile).
• Optimizing for SEO (e.g., semantic tags, meta descriptions, alt text).
• Integrating optional dynamic data from a mock API (e.g., Fake Store API).
• Deploying the page to a public host and version-controlling the code on GitHub.

By the end, you'll have a live, shareable page that evaluators can review for code structure, naming conventions, minimal dependencies, screen adaptability, and minimal DOM size. This project emphasizes clean, efficient code without over-relying on external libraries.

2. Technical Requirements

• Software and Tools:
  • Code Editor: Visual Studio Code (VS Code) – free, with extensions like Prettier for formatting and ESLint for code linting.
  • Version Control: Git – install from https://git-scm.com/. You'll need a free GitHub account.
  • Node.js and npm: Version 14+ (includes npm for package management). Download from https://nodejs.org/. Node.js is optional if not using a server, but required for React setup.
  • Browser: Google Chrome or Firefox for testing, with developer tools enabled.
  • Deployment Platform: Netlify account (free tier) – sign up at https://www.netlify.com/.
  • Optional Mock API: Use https://fakestoreapi.com/ for sample product data (no setup needed; it's a public API).
• Libraries/Packages:
  • React.js (via Create React App) – minimal setup.
  • No heavy frameworks like Bootstrap; use pure CSS for styling to minimize dependencies.
  • Optional: Axios for API calls (if using mock data) – install via npm if needed.
• Skills Assumed:
  • Basic knowledge of HTML/CSS/JavaScript.

Ensure your system is updated, and test installations by running commands like node -v and git --version in your terminal.

3. Step-by-Step Instructions

Follow these steps in order. Each step includes why it's important, what to do, and tips for beginners. Take your time—test frequently by running the app locally.

Step 1: Review the Figma Design

• Why? Understand the layout, colors, fonts, and components to accurately replicate the page.
• How to Do It:
  1. Open the Figma link in your browser.
  2. Inspect layers: Click on elements to see properties like sizes, colors (e.g., hex codes), fonts (e.g., Roboto), and spacing.
  3. Note responsive views: Check artboards for desktop, tablet (e.g., 768px width), and mobile (e.g., 375px width).
  4. Sketch a wireframe on paper: Identify sections like header (logo, nav, search), sidebar filters (categories, price sliders), product grid (cards with images, titles, prices), pagination, and footer.