🧩 Week 13 – React Routing + API Integration

—

✅ Day 2 – Dynamic Routes

🧠 Topics:

• What are dynamic routes? /product/\:id
• Access route parameters using useParams
• Conditional rendering based on params
• Nested Routes

🛠 Activities:

• Create a Blog route (/blog/\:id)
• Load and display data based on blog id
• Add "Back" button using useNavigate

—

✅ Day 3 – Fetch API Data

🧠 Topics:

• What is an API? JSON Placeholder
• Fetch API syntax (GET)
• Loading & error handling states
• useEffect with fetch

🛠 Activities:

• Fetch list of users from JSONPlaceholder
• Show loading while data is being fetched
• Handle API error gracefully

—

✅ Day 4 – Axios + Loading/Error States

🧠 Topics:

• Install Axios and use for API requests
• Axios vs Fetch: benefits
• Use custom hooks for API logic (optional)
• Separate API utility functions

🛠 Activities:

• Replace Fetch with Axios in previous project
• Add loading spinner and error banner
• Clean reusable API service file

—

✅ Day 5 – Project: News or Blog UI

🧠 Task:

Build a blog or news UI with:

• Homepage showing list of articles (fetched)
• Detail page for each article (/post/\:id)
• Author page showing author details
• 404 route for unknown URLs

🧠 Concepts Applied:

• React Router
• Axios/fetch
• Dynamic routing

—

✅ Day 6–7 – E-commerce UI Integration (Capstone Part 1)

🧠 Goal:

Start an e-commerce UI with routing & API:

• Show list of products (GET from API)
• Product detail view (/product/\:id)
• Cart component with dummy data
• Navigation bar with links: Home, Products, Cart

🛠 Activities:

• Setup pages and route files
• Axios call to fake store API
• Display product image, title, price, category

💡 Bonus:

• Add loader while products load
• Show "Add to Cart" buttons

—

Ready to continue with 🧩 Week 14 – React + Express Integration?