📘 Project: Product Listing Application (React + API Integration)
🧩 Problem Statement
Build a React application that fetches product data from a public API and displays it in a responsive card layout.
Students must integrate an external REST API using Axios and manage application state using React Hooks (useState, useEffect).
The goal of this project is to understand:
- API integration in React
- State management using React Hooks
- Rendering dynamic UI using
.map() - Handling loading and error states
- Creating reusable UI components
📦 Functional Requirements
1. Fetch Products from API
API Endpoint:
Requirements:
- Fetch data using Axios
- API call must be implemented inside
useEffect - Store response data using
useState
2. Display Products in Card Format
Each product card must display:
- Product Image
- Product Title
- Product Price
- Product Category
- “View Details” Button (UI only, no navigation required)
Design Requirements:
- Cards must be responsive
- Use CSS Grid or Flexbox for layout
- Clean and properly aligned UI
3. Loading State
- Display “Loading…” while the API request is in progress
4. Error Handling
- Display an appropriate error message if the API request fails
🧠 Non-Functional Requirements
- Clean component structure
- Proper
keyusage while mapping products - No console errors
- Proper separation of JSX and CSS
- Readable and well-formatted code
🏗 Technical Constraints
Students must use:
- React Functional Components
useStateuseEffect- Axios
- CSS (No UI frameworks unless explicitly permitted)
🎯 Learning Objectives
After completing this assignment, students should be able to:
- Integrate third-party APIs into a React application
- Understand component lifecycle using hooks
- Manage asynchronous data
- Render dynamic UI components
- Handle real-world UI states (loading and error)
🚀 Bonus (Optional Enhancements)
Students may optionally implement:
- Search functionality
- Category filtering
- Pagination
- Sorting by price
- Product detail page using React Router