React Task - Architecture & Custom Hooks

• You will refactor and build a small React application using clean architecture patterns and reusable custom hooks.

🛠 Project Setup

• clone the project

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

• Checkout the Refactor Branch

git checkout app

# Analyze the existing codebase before making changes.

• Refactor to Feature-Based Architecture

📁 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 app, not rewrite it.

📌 Objective

This task focuses on refactoring an existing React application to demonstrate a strong understanding of:

• Feature-based architecture

• Custom hook design and reuse

You will not create a new app from scratch.

Feature-based architecture

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

# Example target structure:

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

Rules:

No feature logic in App.tsx

No API or business logic inside UI components

Each feature must be isolated

Extract Custom Hooks

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

Required:

1. Data-related hook

   1. Handles fetching, loading, and error state

   2. Cleanup where necessary

2. Logic-related hook

   1. Examples:

      1. useCanvas

      2. useFetch

      3. useMobile

Rules:

Hooks must be generic

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 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

Check App BranchStart the React task