The Component Builder (React Advanced)

APIs, Routing & Authentication with React

Welcome to the React Advanced practice repository! This module takes your React skills to the next level - you'll learn to fetch real data from APIs, build multi-page applications, and implement secure authentication with a Python backend.

---

Module Overview

Real applications don't live in isolation. They fetch data from servers, navigate between pages, and protect content behind login screens. In this module, you'll master side effects with useEffect, integrate third-party APIs, build client-side routing, and implement full JWT authentication with Flask.

---

Key Learnings

Topic	Description
useEffect & Side Effects	Timers, event listeners, cleanup, and the component lifecycle
API Integration	Fetching real data from Weather API and JSONPlaceholder
Client-Side Routing	Hash-based navigation for multi-page React applications
JWT Authentication	Login, register, protected routes with Flask backend
Full Project Architecture	Combining all concepts in a production-style Expense Tracker

---

Repository Structure

repo/
├── advance-1/       ⭐ useEffect & Side Effects
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── advance-2/       ⭐⭐ Fetching Data from APIs
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── advance-3/       ⭐⭐⭐ React Router & Navigation
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── advance-4/       ⭐⭐⭐⭐ Authentication (React + Flask)
│   ├── README.md
│   ├── backend/
│   │   ├── app.py
│   │   └── requirements.txt
│   └── frontend/
│       ├── index.html
│       └── script.js
│
├── advance-5/       ⭐⭐⭐⭐⭐ Final Project (Expense Tracker)
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── README.md
│
└── README.md        📖 This file

---

Getting Started

Prerequisites

• Completed the React Basics course (or equivalent knowledge)
• Understanding of components, props, state, events, and forms
• A modern web browser (Chrome, Firefox, Edge)
• A code editor (VS Code recommended)
• For Advance-4: Python 3.8+ installed

How to Use This Repository

1. Clone or download this repository to your computer
2. Start with Advance 1 - open the advance-1 folder
3. Open index.html in your browser to see the working examples
4. Open script.js in your code editor to study the code (reference copy)
5. Progress sequentially - each module builds on the previous
6. For Advance 4 - set up the Flask backend (see below)
7. Finish with Advance 5 - the final project combining everything

Running the Code (Step by Step)

Advance 1, 2, 3, and 5 (Frontend Only)

1. Navigate to the module folder (e.g., advance-1/)
2. Double-click index.html to open it in your browser (Chrome, Firefox, or Edge)
3. The page loads with working examples - interact with them
4. Open script.js in your code editor (VS Code recommended) to study the code
5. The working code runs inline inside index.html — script.js is a reference copy
6. To complete exercises, edit the <script> block inside index.html, then save (Ctrl+S)
7. Refresh the browser (Ctrl+R or Cmd+R) to see your changes
8. Open Developer Tools (F12) > Console tab to check for errors

No installation required for these modules. React loads automatically from the internet via CDN.

Advance 4 (Authentication - Requires Python Backend)

Step 1: Set up the backend (one-time setup)

cd advance-4/backend
python -m venv venv
venv\Scripts\activate        # Windows
# source venv/bin/activate   # Mac/Linux
pip install -r requirements.txt

Step 2: Start the Flask server

python app.py

You should see: Server running on http://localhost:5000

Step 3: Open the frontend

• Open advance-4/frontend/index.html in your browser
• The frontend communicates with the Flask server running on port 5000

Step 4: Test it

• Register a new user, then login
• Open the Console (F12) to see the JWT token
• Access the protected Dashboard

Important: The Flask server must be running while you use the frontend. If you close the terminal, the server stops.

---

Module-by-Module Guide

Advance 1: useEffect & Side Effects ⭐

Difficulty: Intermediate

Master React's useEffect hook for side effects:

• Dependency arrays (empty, with values, no array)
• Cleanup functions for timers and listeners
• Document title updates
• Debouncing patterns

Go to Advance 1

---

Advance 2: Fetching Data from APIs ⭐⭐

Difficulty: Intermediate+

Fetch and display real data from third-party APIs:

• fetch() inside useEffect
• Loading and error state patterns
• Open-Meteo Weather API (free, no key)
• JSONPlaceholder for mock data

Go to Advance 2

---

Advance 3: React Router & Navigation ⭐⭐⭐

Difficulty: Advanced

Build multi-page React applications:

• Hash-based routing (#/page)
• URL parameters
• Active link highlighting
• Navigation guards

Go to Advance 3

---

Advance 4: Authentication (React + Flask) ⭐⭐⭐⭐

Difficulty: Advanced+

Build a complete login and registration system:

• Flask backend with SQLite
• Password hashing with Bcrypt
• JWT token generation and verification
• Protected routes and dashboard

Go to Advance 4

---

Advance 5: Expense Tracker (Final Project) ⭐⭐⭐⭐⭐

Difficulty: Expert

Build a complete Expense Tracker combining all concepts:

• CRUD operations with localStorage
• Category filtering and sorting
• Dashboard with spending breakdown
• Hash-based routing for navigation
• Simulated authentication

Go to Advance 5

---

APIs Used (Free, No Keys Required)

API	URL	Used In
JSONPlaceholder	https://jsonplaceholder.typicode.com	Advance 2
Open-Meteo Weather	https://api.open-meteo.com/v1/forecast	Advance 2
Open-Meteo Geocoding	https://geocoding-api.open-meteo.com/v1/search	Advance 2

---

Tech Stack

Component	Technology
Frontend	React 18 (CDN)
Backend (Advance-4)	Python Flask
Database (Advance-4)	SQLite
Password Hashing	Bcrypt
Authentication	JWT (JSON Web Tokens)

---

Tips for Success

1. Complete React Basics first - this course assumes that knowledge
2. Check the Network tab - inspect API requests and responses in DevTools
3. Use console.log() - debug data flow and state changes
4. Handle errors - always add loading and error states for API calls
5. Clean up effects - always return cleanup functions from useEffect

---

Troubleshooting

Problem	Solution
API data not loading	Check browser console for errors, verify URL is correct
useEffect runs infinitely	Check dependency array - missing [] causes infinite loops
CORS error	Ensure Flask-CORS is installed and configured
Flask server won't start	Activate virtual environment first, check requirements installed
Token expired	Login again to get a new JWT token
Changes don't show	Save the file and refresh browser

---

Completion Checklist

• Advance 1: useEffect & Side Effects
• Advance 2: Fetching Data from APIs
• Advance 3: React Router & Navigation
• Advance 4: Authentication (React + Flask)
• Advance 5: Expense Tracker (Final Project)

---

Additional Resources

• React Official Docs
• MDN Fetch API
• JWT.io
• Flask Documentation
• Open-Meteo API Docs

---

Happy Coding!

Remember: Every real-world app needs data, navigation, and security. You're building those skills right now!