---
# System prepended metadata

title: Untitled

---


# 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
```bash
npx create-react-app creative-upaay-dashboard
cd creative-upaay-dashboard
````

### 2. Install Dependencies

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

```javascript
// 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)

---
