# Creative Upaay Full Stack Development Reference Document

## Assignment Overview
This assignment requires you to **implement a functional dashboard UI** in React.js based on the provided **Figma design**.
The project focuses on:
- UI replication (pixel-perfect implementation).
- Core **task management features** (add, move, filter tasks).
- Proper **state management with Redux**.
- **Persistence with Local Storage** (tasks remain after refresh).
- Optional advanced features like **drag-and-drop**.

**Figma Design Link:**
👉 [Creative Upaay Dashboard Design](https://www.figma.com/design/2joKVlIEH43PfO9pFfsX51/DASHBOARD-DESIGN-TASK---CREATIVE-UPAAY?node-id=0-1&t=ShcwKcmHcyTqLA5T-1)

---

## Objective
- Replicate the **dashboard UI** exactly as per Figma.
- Create an **interactive task management system** with features like adding, moving, and filtering tasks.
- Apply **Redux for state management** and ensure persistence with **Local Storage**.
- Deliver a **deployable, production-ready React application**.

---

## Tools & Technologies (with Justification)
- **Framework: React.js**
→ Industry-standard, component-based, easy to scale for dashboards.

- **UI Libraries (choose one):**
- **Material-UI (MUI):** Rich component library, fast prototyping.
- **Chakra UI:** Lightweight, highly customizable with responsive props.
- **Tailwind CSS:** Utility-first, enables pixel-perfect replication of Figma quickly.

- **State Management: Redux**
→ Centralized global state management, predictable, easy persistence.

- **Persistence: Local Storage**
→ Lightweight browser-based storage, ensures tasks remain after refresh.

- **Optional Libraries:**
- `react-beautiful-dnd` → For drag-and-drop task movement.
- `redux-persist` → Simplifies Local Storage integration with Redux.

---

## Project Setup

### 1. Initialize Project

npx create-react-app creative-upaay-dashboard
cd creative-upaay-dashboard

### 2. Install Dependencies

# React Router for navigation
npm install react-router-dom

# Redux for state management
npm install redux react-redux

# UI Library (choose one)
npm install @mui/material @emotion/react @emotion/styled   # Material-UI
# or
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
npm install -D tailwindcss && npx tailwindcss init

# Optional drag-and-drop
npm install react-beautiful-dnd

### 3. Folder Structure (Recommended)

creative-upaay-dashboard/
│
├── src/
│   ├── components/         # Reusable components (TaskCard, Navbar, FilterBar, etc.)
│   ├── pages/              # Page-level components (Dashboard.js, NotFound.js)
│   ├── redux/              # Store, reducers, actions
│   ├── utils/              # Helper functions
│   ├── styles/             # Global CSS or Tailwind configs
│   ├── App.js
│   └── index.js

---

## Assignment Requirements (Detailed)

### 1. UI Implementation

* **Match Figma Design 1:1** → Pay attention to spacing, fonts, and colors.
* **Dashboard Layout:**

* Three sections (Kanban-style board):

* **To Do**
* **In Progress**
* **Done**

### 2. Task Management Features

* **Add Task:**

* User can add tasks inside any column.
* Required fields: `title`, `description`.
* Other fields (e.g., `category`, `dueDate`) can be **hardcoded**.

* **Move Task:**

* Option A: Add a dropdown/controls to change task status.
* Option B: (Optional) Implement **drag-and-drop** between sections.

### 3. Filtering

* Add a **filter bar** (dropdowns or input fields).
* Possible filter criteria:

* `Category` (Work, Personal, Urgent, etc.).
* `Priority` (High, Medium, Low).
* `Due Date` (Upcoming, Overdue).

### 4. State Management (Redux + Local Storage)

* **Redux Store:**

* `tasksReducer`: Handles add, update, delete, move task actions.
* **Local Storage Integration:**

* Save state on every update.
* Load state from Local Storage on app start.
* Persistence Example:

// store.js
import { createStore } from "redux";
import rootReducer from "./reducers";

const saveToLocalStorage = (state) => {
  localStorage.setItem("appState", JSON.stringify(state));
};

const loadFromLocalStorage = () => {
  const data = localStorage.getItem("appState");
  return data ? JSON.parse(data) : undefined;
};

const store = createStore(
  rootReducer,
  loadFromLocalStorage()
);

store.subscribe(() => saveToLocalStorage(store.getState()));

export default store;

### 5. Drag and Drop (Optional, Bonus)

* Use `react-beautiful-dnd` to allow **drag-and-drop** task movement.
* Enhances UX, feels like **Trello/Jira boards**.

---

## Styling & Responsiveness

* **Responsive Design:**

* Ensure dashboard adapts to both **desktop and mobile**.
* **Dark/Light Mode (Optional):**

* Implement a toggle switch using Context or Redux.
* **UI Library Guidelines:**

* **Tailwind:** Utility classes (flex, grid, spacing).
* **MUI/Chakra:** Use pre-built `Card`, `Grid`, `AppBar` components.

---

## Submission Guidelines

1. **GitHub Repository**

* Public repo with clear commit history.
* Proper **branching** if possible (`main`, `dev`).

2. **README.md** (Must Include)

* Project overview.
* Steps to run locally (`npm install`, `npm start`).
* Technologies used.
* Known limitations.

3. **Video Demonstration**

* Short screen recording (Loom/OBS/QuickTime).
* Show all features: Add Task, Move Task, Filtering, Persistence.

4. **Deployment**

* Use **Netlify / Vercel / Render**.
* Provide **live link** in README.

---

## Reference Resources

* React Docs: [https://react.dev/](https://react.dev/)
* Redux Docs: [https://redux.js.org/](https://redux.js.org/)
* Tailwind Docs: [https://tailwindcss.com/docs](https://tailwindcss.com/docs)
* Material-UI Docs: [https://mui.com/](https://mui.com/)
* Chakra UI Docs: [https://chakra-ui.com/](https://chakra-ui.com/)
* React Beautiful DnD: [https://github.com/atlassian/react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)

---