Task Management Client A React client for a task management app, built with Vite, TypeScript, TanStack Query, Redux Toolkit, Tailwind CSS (via @tailwindcss/vite), and Shadcn. Prerequisites

Node.js (v20.x or later) npm (v10.x or later) Backend server running at http://localhost:8000/api/v1

Setup

Clone the repository: git clone cd client

Install dependencies: npm install

Set up environment variables:

Create a .env file in the root directory. Add:VITE_API_URL=http://localhost:8000/api/v1

Run the app:

Development:npm run dev

Production:npm run build npm run preview

Features

Responsive navigation with Home, Tasks, Task Details, and Error pages. List, create, update, and delete tasks on the Tasks page. Lazy-loaded task details page. Error handling for API requests. Modern, accessible UI with Tailwind CSS (via @tailwindcss/vite) and Shadcn components. Theme toggle (light, dark, system) with local storage persistence, using OKLCH-based CSS variables. State management with Redux Toolkit and TanStack Query.

Routes

/: Homepage with welcome message. /tasks: Task list with create/edit/delete functionality. /tasks/:id: Task details page. *: 404 error page.

Theme Toggle

Use the dropdown in the navbar (icon button) to switch between light, dark, and system themes. Theme is saved in localStorage for persistence. System mode respects the OS's prefers-color-scheme. Tailwind CSS dark mode is enabled via data-theme="dark" in tailwind.config.js. Pages, buttons, and links use theme variables (--background, --foreground, --primary, etc.) for visibility.

Folder Structure

src/ api/: API functions components/: Reusable components (Navbar, TaskCard, TaskForm) context/: ThemeProvider for theme management pages/: Page components (Home, Tasks, TaskDetails, Error) store/: Redux Toolkit setup types/: TypeScript interfaces utils/: Utilities (error handling, class merging)

vite.config.ts: Vite and Tailwind CSS configuration tailwind.config.js: Tailwind CSS configuration index.css: Global styles with OKLCH theme variables .env: Environment variables

Notes

Ensure the backend is running for task functionality. Tailwind CSS is configured in tailwind.config.js and integrated via @tailwindcss/vite. Theme variables ensure content visibility in light and dark modes.