🚀 React HTTP Request Practice Projects Scope

---

📂 HTTP Request Projects Roadmap

react-http-scopes/
│
├── README.md   # main roadmap
│
├── basic/
│   ├── 01-todo-list.md
│   ├── 02-contact-manager.md
│   └── 03-currency-converter.md
│
├── medium/
│   ├── 04-notes-app-jsonserver.md
│   ├── 05-book-library.md
│   ├── 06-ecommerce-product-list.md
│   ├── 07-employee-management.md
│   └── 08-ticketing-system.md
│
└── high/
    ├── 09-inventory-dashboard.md
    ├── 10-healthcare-appointments.md
    ├── 11-learning-management.md
    ├── 12-food-ordering-app.md
    └── 13-blog-platform.md

1. Todo List App (CRUD with Fake API)

scope:

• Use JSONPlaceholder API for todos.
• Add (POST), Edit (PUT), Delete (DELETE), View (GET).
• Focus: Practicing all HTTP methods in React.

2. Contact Manager

scope:

• Manage contacts (name, phone, email).
• Store and update using API.
• Focus: Form handling + CRUD operations.

3. Currency Converter

scope:

• Use ExchangeRate API.
• Convert amount from one currency to another.
• Focus: Query params, GET request handling.

4. Notes App with JSON-Server

scope:

• Set up local json-server backend.
• CRUD: Add, Edit, Delete, View Notes.
• Focus: Local API + CRUD cycle.

5. Book Library App

scope:

• Manage book collection (title, author, year).
• CRUD with JSON-server.
• Focus: Full-stack-like local DB management.

6. E-commerce Product List (with Axios Instance)

scope:

• Display product list.
• Add Axios instance with interceptors to attach API key.
• Focus: Centralized API management in real-world apps.

7. Employee Management System

scope:

• HR-style app to add, update, delete employees.
• Features: Search/filter employees by role or department.
• Focus: CRUD + search + API handling.

8. Ticketing System (Customer Support)

scope:

• Create support tickets (POST).
• Update status (PUT).
• Delete old tickets (DELETE).
• Show list of active/resolved tickets.
• Focus: Real-world workflow app with error handling.

9. Inventory Management Dashboard

scope:

• Manage stock items, update quantities, delete old inventory.
• Show “Low stock” warnings.
• Use Axios interceptors for auth tokens.
• Focus: Industry-style dashboards.

10. Healthcare Appointment System

scope:

• Patients → book appointments.
• Doctors → update/cancel appointments.
• Error handling: prevent double-booking.
• Focus: Healthcare SaaS-style application.

11. Learning Management System (LMS)

scope:

• Admin: Add/edit courses.
• Students: Enroll in courses.
• Auth with Supabase/Appwrite.
• Focus: EdTech industry real-world app.

12. Online Food Ordering Platform (Zomato/Swiggy Lite)

scope:

• Browse restaurants/menus.
• Add to cart, update quantity, remove items.
• Axios interceptors for authentication.
• Focus: E-commerce & FoodTech workflow.

13. Blogging Platform (Final Capstone Project)

scope:

• Signup/Login (Supabase or Appwrite).
• CRUD for blog posts (title, content, tags, images).
• Error handling for failed requests.
• Axios instance for secure API calls.
• Focus: Full production-style app combining all concepts.

---

🙋‍♂️ Author

Made with ❤️ by Tanmay Shil GitHub: @TanmayShil