TABLE OF CONTENTS

1. Project Overview 1

2. Objectives 1

3. Tech Stack 2

4. Features 3

5. Module Documentation 4

6. Summary 6

1. Project Overview {#project-overview}

   This React + Vite app is a kanban-style task manager with login and register screens, board lists, board detail pages, columns, and tasks that you can create, edit, delete, and move around. It uses Redux Toolkit with localStorage to save authentication and mock data, drag-and-drop libraries for reordering, and a ThemeContext for switching themes.

2. Objectives {#objectives}

   The objectives are:

• To let users register and log in securely using Redux Toolkit and localStorage for session persistence.
• To help users create and manage boards as separate workspaces for different projects.
• To organize work into columns so tasks can move through stages like To Do, Doing, and Done.
• To allow creating, editing, and deleting tasks inside each column for better task tracking.
• To support drag-and-drop reordering so users can quickly move tasks between columns and change priorities.
• To give a smooth user experience with theme switching through a React context and theme hooks.
• To keep the app working without a backend by storing data locally in the browser for now.

3. Tech Stack {#tech-stack}

   This project uses a modern React frontend stack with routing, global state management, drag-and-drop support, and API handling. React 19 is the core UI library, React Router v7 handles navigation, Redux Toolkit with React-Redux manages shared application state, and Axios is available for service calls.

Layer	Technology	Purpose
Framework	React 19 (react, react-dom)	UI rendering and component architecture.
Routing	React Router v7 (react-router-dom)	Page navigation and route handling.
State Management	Redux Toolkit + React-Redux	Global state management through the store and feature slices.
Store Structure	src/app/store.js	Central Redux store configuration.
Feature Structure	src/features/*	Organized feature-based slices and logic.
Drag and Drop	@dnd-kit/core, @hello-pangea/dnd	Drag-and-drop interactions for sortable and list-based UI flows. dndkit+1
HTTP Client	Axios (axios)	Service-level API calls.
Auth Handling	Mock/localStorage validation in slices	Auth state is validated through mock logic and persisted locally, while the login service uses Axios.

4. Features {#features}

   The features are:

5. Authentication

• Login and register pages are available at /login and /register.
• The Redux auth slice stores the user and token, then persists them to localStorage.
• Private routes are handled by src/components/layout/PrivateRoute.jsx, which redirects to /login when the user is not authenticated.

2. Board Management

• The board's list is shown at /boards.
• A CreateBoardModal is used to create new boards.
• The board detail route /boards/:id renders board.columns.
• Users can add columns and delete columns from a board.

3. Task Management

• Tasks are stored in src/features/task/taskSlice.js with CRUD reducers.
• Tasks are displayed inside their corresponding columns.
• Tasks can be edited and deleted.
• Priority is shown on task cards and in task modals.

4. Drag and Drop

• Tasks can be reordered within a column and moved between columns using @hello-pangea/dnd.
• On drop, reducers update task.columnId and recompute task.position.
• This keeps the task ordering consistent across columns.

5. UI and Theme

• A ThemeContext and Navbar theme toggle provide dark/light mode support.
• The theme can be switched from the navbar and stays consistent across the app.
• This gives the interface a cleaner and more flexible visual mode.

6. Offline Persistence

• Boards and tasks are hydrated from localStorage.
• Updates are written back to localStorage, so the app behaves like an offline-first system.
• This allows the current board and task state to survive refreshes and reloads.

5. Module Documentation {#module-documentation}

6. src/app/store.js

• Creates Redux store with slices: auth, boards, tasks.
• Rehydrates boards & tasks from localStorage at startup.
• Subscribes to store changes and persists boards/tasks back to localStorage.

2. src/features/auth/authSlice.js

• Redux slice for authentication.
• Async thunks:
  • loginUser: validates credentials against localStorage mock users; sets token/user.
  • registerUser: stores new user into localStorage, mock users; sets token/user.
• Reducers:
  • logout: clears Redux auth state and localStorage.
  • clearError: resets the error.

3. src/features/board/boardSlice.js

• Redux slice for boards.
• Uses createEntityAdapter for normalized board storage.
• Async thunks:
  • fetchBoards: returns mocked boards (and loads them only if localStorage is empty).
  • createBoard: creates a board object.
• Reducers:
  • setState: replace the board's state (used by store rehydration).
  • setActiveBoard: sets activeBoardId.
  • addColumn: pushes a column object into board.columns and persists.
  • removeColumn: filters board.columns by id and persists.

4. src/features/task/taskSlice.js

• Redux slice for tasks.
• Uses createEntityAdapter keyed by task.id.
• Reducers:
  • setState: replace tasks' state (used by store rehydration).
  • addTask: adds a task with a generated ID (nanoid) and timestamps.
  • updateTask: updates task fields and updatedAt.
  • deleteTask: removes the task and persists.
  • reorderTask: reorders tasks within a column and normalizes position indices.
  • moveTaskBetweenColumns: moves a task to a new column and recomputes destination positions.

5. src/utils/localStorage.js

• Central persistence helpers.
• Keys:
  • taskflow_token, taskflow_user, taskflow_boards, taskflow_tasks, taskflow_user_password.
• Functions:
  • get/set token & user
  • getBoards/saveBoards
  • getTasks/saveTasks

6. src/context/ThemeContext.jsx

• React Context wrapper around the theme hook.
• Exposes ThemeProvider and useThemeContext

7. src/components/layout/PrivateRoute.jsx

• Route guard.
• If state.auth.user is missing -> redirects to /login.

8. src/pages/board/BoardListPage.jsx

• Lists boards from Redux (selectAllBoards).
• Opens CreateBoardModal.

9. src/pages/board/BoardPage.jsx

• Board detail view.
• Uses DragDropContext + Droppable/Draggable (from @hello-pangea/dnd) for task drag/reorder.
• Handles add column + add/edit task modal flows.

6. Summary {#summary}

   Taskflow is a kanban-style React app that combines authentication, protected routes, board and task CRUD, drag-and-drop organization, and localStorage persistence. Its structure follows a clean flow from Redux state to UI, with theming handled through a shared context and navigation guarded by route protection.