🧠 React Task: Architecture & Custom Hooks

📌 Objective

You will refactor an existing React application to demonstrate a strong understanding of:

• Feature-based architecture
• Custom hook design and reuse

You will not create a new application from scratch. The goal is to improve structure, separation of concerns, and logic organization.

---

🛠 Project Setup

1️⃣ Clone the Repository

git clone https://github.com/ITC-Frontend-Advanced/React-Task-Architecture-Custom-Hooks.git

2️⃣ Checkout the App Branch

git checkout app

3️⃣ Analyze the Codebase

Before making any changes, carefully analyze the existing codebase.
Understand how components, logic, and data flow are currently structured.

---

📁 Repository Structure

The repository contains two branches:

• main
  Contains this task description and instructions.

• app
  Contains an existing React application with:

  • Mixed responsibilities
  • Centralized logic
  • Poor or flat structure

Your job is to refactor the application, not rewrite it.

---

🧩 Feature-Based Architecture

You must reorganize the project into a feature-based architecture.

Example Target Structure

src/
 ├─ features/
 │   ├─ users/
 │   │   ├─ components/
 │   │   ├─ hooks/
 │   │   ├─ services/
 │   │   └─ index.ts
 ├─ shared/
 │   ├─ components/
 │   ├─ hooks/
 │   └─ utils/
 └─ app/
     └─ App.tsx

Rules

• No feature logic inside App.tsx
• No API or business logic inside UI components
• Each feature must be isolated and self-contained

---

🔁 Custom Hooks Extraction

You must extract at least two custom hooks from the existing code.

Required Hooks

1️⃣ Data-Related Hook

• Handles data fetching
• Manages loading and error states
• Includes cleanup when necessary

2️⃣ Logic-Related Hook

Examples:

• useCanvas
• useFetch
• useMobile

Rules

• Hooks must be generic and reusable
• Hooks must not depend on specific UI components

---

📤 Deliverables

Your submission must include:

• ✅ Refactored code pushed to GitHub
• ✅ Clean, feature-based folder structure
• ✅ A README.md file explaining:
  • What was refactored
  • Why the new structure is better
  • List of extracted custom hooks
  • How to run the project

---

📝 Notes

• UI improvements are not required
• Styling changes are not required
• Focus on structure and logic only

---

⏰ Deadline

4 Jan 2026 — 11:59 PM