ClientDash

A modern project management dashboard for tracking client projects and tasks. Built with React and Express.

Tech Stack

Frontend: React 19, Vite, Tailwind CSS 4, Framer Motion, TanStack React Query, dnd-kit, Radix UI, Lucide Icons

Backend: Node.js, Express, Prisma ORM, SQLite, JWT Authentication, bcrypt

Features

• Authentication — Email/password registration and login, Google OAuth
• Project Management — Create, edit, and delete projects with status tracking (Planning, In Progress, On Hold, Completed)
• Task Management — Create tasks with titles, descriptions, tags, priority levels, and due dates
• Kanban Board — Drag-and-drop task management across To Do, In Progress, and Done columns
• List View — Sortable task list with priority, due date, and name sorting
• Dashboard Stats — Overview cards showing total projects, tasks, completed count, and overdue count
• Overdue Alerts — Bell icon badge in navbar showing overdue task count
• Dark Mode — Full dark/light mode toggle with system preference detection
• Aurora Background — Animated gradient background on auth pages
• Responsive Design — Works on desktop, tablet, and mobile
• Optimistic Updates — Instant UI feedback with rollback on error

Getting Started

Prerequisites

• Node.js 18+
• npm

1. Clone the repository

git clone <your-repo-url>
cd client-dashboard

2. Set up the backend

cd backend
npm install

Create a .env file in the backend/ directory:

DATABASE_URL="file:./dev.db"
JWT_SECRET="your-secret-key-here"
GOOGLE_CLIENT_ID="your-google-client-id"
PORT=3001

Run the database migrations:

npm run db:migrate

Optionally seed the database:

npm run db:seed

Start the backend:

npm run dev

The API will be running at http://localhost:3001.

3. Set up the frontend

cd frontend
npm install
npm run dev

The app will be running at http://localhost:5173.

Project Structure

client-dashboard/
├── backend/
│   ├── prisma/
│   │   ├── schema.prisma       # Database schema (User, Project, Task)
│   │   └── seed.js             # Database seed script
│   └── src/
│       ├── index.js            # Express server entry point
│       ├── lib/prisma.js       # Prisma client instance
│       ├── middleware/auth.js   # JWT authentication middleware
│       └── routes/
│           ├── auth.js         # Register, login, Google OAuth, /me
│           ├── projects.js     # CRUD projects + stats endpoint
│           └── tasks.js        # CRUD tasks with status sync
├── frontend/
│   └── src/
│       ├── api/
│       │   ├── client.js       # Axios instance with auth interceptor
│       │   └── hooks.js        # React Query hooks for all API calls
│       ├── components/
│       │   ├── Navbar.jsx      # Top nav with avatar, dark mode, overdue badge
│       │   ├── Toast.jsx       # Toast notification system
│       │   ├── StatusBadge.jsx # Color-coded status pills
│       │   ├── TaskModal.jsx   # Task detail editor modal
│       │   ├── ConfirmModal.jsx# Confirmation dialog
│       │   ├── GoogleLoginButton.jsx
│       │   ├── ProtectedRoute.jsx
│       │   ├── kanban/         # KanbanBoard, KanbanColumn, KanbanCard
│       │   └── ui/
│       │       ├── AuroraBackground.jsx  # Animated gradient background
│       │       └── DatePicker.jsx        # Calendar date picker
│       ├── hooks/
│       │   └── useDarkMode.js  # Dark mode hook with localStorage
│       ├── pages/
│       │   ├── LandingPage.jsx    # Public landing page
│       │   ├── LoginPage.jsx      # Login with aurora background
│       │   ├── RegisterPage.jsx   # Registration with aurora background
│       │   ├── DashboardPage.jsx  # Project list with stats bar
│       │   └── ProjectPage.jsx    # Project detail with tasks
│       └── stores/
│           └── auth.js         # Auth functions (login, register, logout)
└── README.md

API Endpoints

Method	Endpoint	Description
POST	/api/auth/register	Create account
POST	/api/auth/login	Sign in
POST	/api/auth/google	Google OAuth login
GET	/api/auth/me	Get current user
GET	/api/projects	List all projects
GET	/api/projects/stats	Dashboard statistics
POST	/api/projects	Create project
GET	/api/projects/:id	Get project with tasks
PATCH	/api/projects/:id	Update project
DELETE	/api/projects/:id	Delete project
GET	/api/projects/:id/tasks	List tasks
POST	/api/projects/:id/tasks	Create task
PATCH	/api/tasks/:id	Update task
DELETE	/api/tasks/:id	Delete task

License

MIT