- Overview
- Features
- Tech Stack
- Project Structure
- Getting Started
- Environment Variables
- Available Scripts
- Related
This is the frontend of TaskFlow — a modern, full-stack productivity app. The UI is built with React 19 and Vite 7, styled with Tailwind CSS, and powered by Redux Toolkit for global state. It communicates with the TaskFlow Backend over a REST API.
The design prioritizes speed, accessibility, and a distraction-free user experience — using Radix UI primitives, smooth toasts via Sonner, and elegant typography with Cormorant Garamond.
 Home Page |
 Task Management |
 Completed Tasks |
- Create, edit & delete tasks with an intuitive interface
- Set due dates with a polished interactive calendar
- Assign priority levels (e.g. Low / Medium / High)
- Filter tasks by status, priority, or due date
- Tasks persist across sessions via backend API
- Deleted tasks land in a recycle bin instead of vanishing immediately
- Auto-deleted after 24 hours by a backend cron job
- Restore any task from the bin before the window closes
| Method | Description |
|---|---|
| 📧 Email & Password | Classic register/login flow |
| 🔵 Google OAuth | One-click sign-in via Google |
| 🔗 Magic Link | Passwordless — get a login link in your email |
| 🔢 Forgot Password OTP | OTP-based secure password reset |
| 🔄 Token Refresh | Silent access token renewal using HTTP-only refresh token cookies |
- Fully responsive layout for mobile and desktop
- Accessible components via Radix UI (no ARIA hacks)
- Real-time feedback with Sonner toast notifications
- Smooth, consistent styling with Tailwind utility classes
| Package | Version | Purpose |
|---|---|---|
react |
19 | Core UI library |
vite |
7 | Lightning-fast build tool & dev server |
react-router-dom |
7 | Client-side routing |
@reduxjs/toolkit |
2 | State management |
react-redux |
9 | React bindings for Redux |
tailwindcss |
3 | Utility-first CSS framework |
@radix-ui/react-checkbox |
1.3 | Accessible checkbox primitive |
@radix-ui/react-popover |
1.1 | Accessible popover / dropdown |
@radix-ui/react-slot |
1.2 | Slot composition primitive |
lucide-react |
0.575 | Clean icon set |
react-icons |
5 | Extended icon library |
react-day-picker |
9 | Calendar date picker |
date-fns |
4 | Date formatting & utilities |
sonner |
2 | Elegant toast notifications |
clsx + tailwind-merge |
— | Conditional class merging |
class-variance-authority |
0.7 | Variant-based component styling |
@fontsource-variable/cormorant-garamond |
5 | Premium serif typography |
TaskFlow/
├── public/ # Static assets
├── src/
│ ├── app/ # Redux store configuration
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base design system (Button, Input, etc.)
│ │ └── ... # Feature-specific components
│ ├── features/ # Redux slices
│ │ ├── auth/ # Auth state & async thunks
│ │ └── tasks/ # Task state & async thunks
│ ├── pages/ # Route-level page components
│ │ ├── LoginPage.jsx
│ │ ├── RegisterPage.jsx
│ │ ├── DashboardPage.jsx
│ │ └── BinPage.jsx
│ ├── lib/ # Utilities & helpers
│ ├── App.jsx # Root component & routes
│ └── main.jsx # Entry point
├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── package.json
- Node.js
v18+ - The TaskFlow Backend running locally or deployed
# 1. Clone the repo
git clone https://github.com/Iman-Datta/TaskFlow.git
cd TaskFlow
# 2. Install dependencies
npm install
# 3. Set up environment variables (see below)
cp .env.example .env
# 4. Start the dev server
npm run devThe app will be available at http://localhost:5173
Create a .env file in the root of the project:
# URL of the TaskFlow backend API
VITE_API_URL=http://localhost:5000/api
# Google OAuth Client ID (from Google Cloud Console)
VITE_GOOGLE_CLIENT_ID=your_google_client_id_hereNote: All frontend environment variables must be prefixed with
VITE_to be accessible in the app.
| Command | Description |
|---|---|
npm run dev |
Start the development server (HMR enabled) |
npm run build |
Build for production (outputs to dist/) |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint |
| Repo / Link | Description |
|---|---|
| TaskFlow Backend | Express + MongoDB REST API |
| Live App | Deployed production app |
Made with ❤️ by Iman Datta