Pomodoro Productivity Tracker (React + Vite + Tailwind)

Frontend Deployed Link: https://zensync-azure.vercel.app

A goal-oriented productivity web app featuring a Pomodoro timer, task management with local CRUD, protected routes, mock auth, AI suggestions (mock), toast notifications, and dark/light theme.

Tech Stack

• React 19 (Vite)
• TailwindCSS 3
• React Router 6

Monorepo Layout

KalLabs-FullStack/
  client/                # React + Vite frontend
  server/                # Express + Mongo (optional backend; mocks used in client)

Frontend Structure (client)

client/
└── src/
    ├── components/
    │   ├── ProgressCard.jsx
    │   ├── ProtectedRoute.jsx
    │   ├── Sidebar.jsx
    │   ├── TaskCard.jsx
    │   ├── Toast.jsx
    │   ├── Navbar.jsx
    │   ├── PomodoroTimer.jsx
    │   ├── AchievementsCard.jsx
    │   └── AIWidget.jsx
    │
    ├── context/
    │   ├── AuthContext.jsx
    │   ├── PomodoroContext.jsx
    │   ├── TaskContext.jsx
    │   ├── ThemeContext.jsx
    │   └── ToastContext.jsx
    │
    ├── hooks/
    │   ├── useAuth.js
    │   └── usePomodoro.js
    │
    ├── layouts/
    │   └── MainLayout.jsx
    │
    ├── pages/
    │   ├── Home.jsx
    │   ├── About.jsx
    │   ├── Dashboard.jsx
    │   ├── FocusRoom.jsx
    │   ├── Tasks.jsx
    │   ├── Settings.jsx
    │   ├── Profile.jsx
    │   ├── Login.jsx
    │   ├── Register.jsx
    │   ├── LoadingDemo.jsx
    │   └── NotFound.jsx
    │
    ├── services/
    │   ├── aiService.js
    │   └── api.js
    │
    ├── styles/
    │   └── index.css
    │
    ├── App.jsx
    └── main.jsx

Features

• Pomodoro timer with start/pause/reset, focus/break cycles (PomodoroContext, PomodoroTimer.jsx)
• Tasks with add/edit/delete/filter stored in local state (TaskContext, TaskCard.jsx, Tasks.jsx)
• Protected routes for private pages (ProtectedRoute.jsx)
• Mock auth (AuthContext.jsx, forms in Login.jsx and Register.jsx)
• AI suggestions via mocked service (AIWidget.jsx, aiService.js)
• Toast notifications (ToastContext.jsx, Toast.jsx)
• Theme toggle (dark/light) persisted to localStorage (ThemeContext.jsx, toggle in Navbar.jsx and Settings.jsx)

Getting Started

1. Install dependencies

cd client && npm install

2. Run the dev server

npm run dev

3. Open the app

http://localhost:5173

Available Scripts (client)

• npm run dev – start Vite dev server
• npm run build – production build
• npm run preview – preview production build
• npm run lint – run ESLint

Routing

• Public: /, /about, /login, /register, /loading
• Private (guarded): /dashboard, /focus, /tasks, /profile, /settings

Notes

• The client uses mock services in services/api.js and services/aiService.js. Swap these with real endpoints as needed.
• If you enable the backend (server/), ensure CORS and cookie settings match your deployment strategy.

TailwindCSS

Tailwind is configured via client/src/styles/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Figma Prototype Link: https://www.figma.com/proto/WpzvfwLnOstjo5p4ny7pTe/ZenSync?node-id=1-2&t=GwHDV3PkMwB9XiSI-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1