# 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

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

* Checkout the Refactor Branch

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

{% hint style="info" %}
You will **not** create a new app from scratch.
{% endhint %}

#### Feature-based architecture

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

```bash
# Example target structure:

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

```

{% hint style="danger" %}
**Rules:**

No feature logic in `App.tsx`

No API or business logic inside UI components

Each feature must be isolated
{% endhint %}

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

{% hint style="danger" %}
**Rules:**

Hooks must be generic

Hooks must not depend on specific UI components
{% endhint %}

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

{% hint style="success" %}
**Notes**

* UI improvements are **not required**
* Styling changes are **not required**
* Focus on structure and logic only
  {% endhint %}

{% hint style="warning" %}
**Deadline:** 4 Jan 2026 11:59 PM
{% endhint %}

<p align="center"><a href="https://github.com/ITC-Frontend-Advanced/React-Task-Architecture-Custom-Hooks/tree/app" class="button secondary" data-icon="github">Check App Branch</a><a href="https://github.com/organizations/ITC-Frontend-Advanced/repositories/new" class="button primary" data-icon="react">Start the React task</a></p>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.elorabiabderraouf.dev/documentation/react/tasks/react-task-architecture-and-custom-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.