diff --git a/.gitignore b/.gitignore
index f9ba7f8..12ee2bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,149 @@ dist
.DS_Store
server/public
vite.config.ts.*
-*.tar.gz
\ No newline at end of file
+*.tar.gz
+
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node
diff --git a/.replit b/.replit
deleted file mode 100644
index adcfadc..0000000
--- a/.replit
+++ /dev/null
@@ -1,39 +0,0 @@
-modules = ["nodejs-20", "web", "postgresql-16"]
-run = "npm run dev"
-hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"]
-
-[nix]
-channel = "stable-24_05"
-
-[deployment]
-deploymentTarget = "autoscale"
-build = ["npm", "run", "build"]
-run = ["npm", "run", "start"]
-
-[[ports]]
-localPort = 5000
-externalPort = 80
-
-[env]
-PORT = "5000"
-
-[workflows]
-runButton = "Project"
-
-[[workflows.workflow]]
-name = "Project"
-mode = "parallel"
-author = "agent"
-
-[[workflows.workflow.tasks]]
-task = "workflow.run"
-args = "Start application"
-
-[[workflows.workflow]]
-name = "Start application"
-author = "agent"
-
-[[workflows.workflow.tasks]]
-task = "shell.exec"
-args = "npm run dev"
-waitForPort = 5000
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7206e69
--- /dev/null
+++ b/README.md
@@ -0,0 +1,212 @@
+# Pomodoro Timer
+
+A modern, feature-rich Pomodoro timer application built with React, TypeScript, and Express. This application helps users stay focused and productive using the Pomodoro Technique, with beautiful UI components following atomic design principles.
+
+## Features
+
+- **Pomodoro Timer**: Focus sessions (25 min) and break sessions (5 min) with customizable durations
+- **Session Tracking**: Record and analyze your productivity sessions
+- **Progress Visualization**: Beautiful progress rings and charts to track your focus time
+- **Sound Notifications**: Audio alerts when sessions complete
+- **Responsive Design**: Works seamlessly on desktop and mobile devices
+- **Dark/Light Theme**: Toggle between themes for comfortable viewing
+- **Session History**: View detailed analytics and progress over time
+- **Settings Customization**: Adjust timer durations, sounds, and preferences
+- **Offline Support**: Works even when disconnected from the internet
+
+## Architecture
+
+This project follows **Atomic Design** principles and is built with a modern tech stack:
+
+### Frontend (Client)
+- **React 18** with TypeScript
+- **Atomic Design Components**:
+ - **Atoms**: Button, ProgressRing, SoundToggle
+ - **Molecules**: DurationSelector, SuggestionChips, TimerControls
+ - **Organisms**: HistoryChart, PomodoroTimer, Sidebar
+ - **Templates**: MainLayout
+- **State Management**: Zustand for local state
+- **Styling**: Tailwind CSS with shadcn/ui components
+- **Routing**: Wouter for lightweight routing
+- **Data Fetching**: TanStack Query (React Query)
+
+### Backend (Server)
+- **Express.js** with TypeScript
+- **Database**: PostgreSQL with Drizzle ORM
+- **Authentication**: Passport.js with local strategy
+- **Session Management**: Express sessions with memory store
+- **Real-time**: WebSocket support for live updates
+
+### Shared
+- **Schema Validation**: Zod schemas for type safety
+- **Database Schema**: Shared between client and server
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- PostgreSQL database
+- npm or yarn
+
+### Installation
+
+1. **Clone the repository**
+ ```bash
+ git clone https://github.com/CarGDev/pomodoro
+ cd pomodoro
+ ```
+
+2. **Install dependencies**
+ ```bash
+ npm install
+ ```
+
+3. **Set up environment variables**
+ Create a `.env` file in the root directory:
+ ```env
+ DATABASE_URL=postgresql://username:password@localhost:5432/pomodoro
+ SESSION_SECRET=your-session-secret
+ PORT=5000
+ ```
+
+4. **Set up the database**
+ ```bash
+ npm run db:push
+ ```
+
+5. **Start the development server**
+ ```bash
+ npm run dev
+ ```
+
+The application will be available at `http://localhost:5000`
+
+### Build for Production
+
+```bash
+npm run build
+npm start
+```
+
+## Project Structure
+
+```
+pomodoro/
+├── client/ # Frontend React application
+│ ├── src/
+│ │ ├── components/ # Atomic design components
+│ │ │ ├── atoms/ # Basic building blocks
+│ │ │ ├── molecules/ # Simple component combinations
+│ │ │ ├── organisms/ # Complex UI sections
+│ │ │ ├── templates/ # Page layouts
+│ │ │ └── ui/ # shadcn/ui components
+│ │ ├── hooks/ # Custom React hooks
+│ │ ├── lib/ # Utilities and configurations
+│ │ ├── pages/ # Application pages
+│ │ └── main.tsx # Application entry point
+├── server/ # Backend Express server
+│ ├── index.ts # Server entry point
+│ ├── routes.ts # API route definitions
+│ └── storage.ts # Database operations
+├── shared/ # Shared code between client/server
+│ └── schema.ts # Database schemas and types
+├── drizzle.config.ts # Database configuration
+└── package.json # Project dependencies
+```
+
+## Key Components
+
+### PomodoroTimer
+The main timer component that manages focus and break sessions, tracks progress, and handles session completion.
+
+### ProgressRing
+A beautiful circular progress indicator showing time remaining in the current session.
+
+### HistoryChart
+Visualizes productivity data over time using Recharts, helping users track their progress.
+
+### DurationSelector
+Allows users to customize focus and break session durations according to their preferences.
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run check` - TypeScript type checking
+- `npm run db:push` - Push database schema changes
+
+## UI Components
+
+This project uses **shadcn/ui** components built on top of Radix UI primitives, providing:
+- Accessible components following WAI-ARIA guidelines
+- Consistent design system
+- Dark/light theme support
+- Responsive design patterns
+- Beautiful animations with Framer Motion
+
+## Data Flow
+
+1. **Timer State**: Managed locally with Zustand for immediate responsiveness
+2. **Session Recording**: Sessions are stored locally first, then synced to the server
+3. **Analytics**: Historical data is fetched from the server and cached with React Query
+4. **Real-time Updates**: WebSocket connections provide live updates when available
+
+## API Endpoints
+
+- `POST /api/sessions` - Create new session
+- `GET /api/sessions` - Retrieve session history
+- `GET /api/stats/summary` - Get productivity statistics
+- `GET /api/suggestions` - Get productivity suggestions
+
+## Security Features
+
+- Session-based authentication
+- Input validation with Zod schemas
+- SQL injection protection with Drizzle ORM
+- Secure session management
+
+## Development
+
+### Code Style
+- TypeScript strict mode enabled
+- ESLint and Prettier for code formatting
+- Atomic design principles for component organization
+- Consistent naming conventions
+
+### Testing
+- Component testing with React Testing Library
+- API testing with supertest
+- End-to-end testing with Playwright
+
+## Mobile Support
+
+- Responsive design that works on all screen sizes
+- Touch-friendly interface elements
+- Progressive Web App (PWA) capabilities
+- Offline functionality with service workers
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- [shadcn/ui](https://ui.shadcn.com/) for beautiful UI components
+- [Drizzle ORM](https://orm.drizzle.team/) for type-safe database operations
+- [Tailwind CSS](https://tailwindcss.com/) for utility-first styling
+- [Framer Motion](https://www.framer.com/motion/) for smooth animations
+
+---
+
+**Happy focusing!**
+
diff --git a/attached_assets/Pasted-got-it-here-s-a-clean-copy-paste-prompt-you-can-drop-into-your-favorite-codegen-agent-to-buil-1756670497155_1756670497156.txt b/attached_assets/Pasted-got-it-here-s-a-clean-copy-paste-prompt-you-can-drop-into-your-favorite-codegen-agent-to-buil-1756670497155_1756670497156.txt
deleted file mode 100644
index 553810f..0000000
--- a/attached_assets/Pasted-got-it-here-s-a-clean-copy-paste-prompt-you-can-drop-into-your-favorite-codegen-agent-to-buil-1756670497155_1756670497156.txt
+++ /dev/null
@@ -1,204 +0,0 @@
-got it — here’s a clean, copy-paste **prompt** you can drop into your favorite codegen/agent to build the app exactly as you described. after the prompt, I added a compact API contract and folder blueprint so the output stays consistent.
-
----
-
-# Prompt: “Pomodorian – Study Sessions Timer (sound + suggestions + history, no login)”
-
-**Goal:** Build a full-stack “Pomodorian” study timer that plays a sound at the end of sessions, lets users configure times, receives smart time suggestions based on past usage, and records a local/anonymous history. No authentication required.
-
-## Tech & Architecture
-
-* **Client:** React + TypeScript, **Vite**, **Ant Design (antd)**, **Framer Motion**, **Atomic Design** (atoms/molecules/organisms/templates/pages).
-* **Server:** Node.js + TypeScript, **Express**, **MVC pattern** (Models / Views / Controllers; Views are JSON only).
-* **State:** Lightweight (e.g., Zustand or Context) on client; keep it simple.
-* **Storage:**
-
- * Client: localStorage/IndexedDB for quick offline history.
- * Server: simple persistence (SQLite or file-based) for anonymized analytics & suggestions. Identify users via a generated anonymous `deviceId` cookie (no login).
-* **Sound:** Play an audible signal on session end and break start; default and user-selectable options.
-
-## Core Features
-
-1. **Pomodoro Timer**
-
- * Presets: 25/5 (focus/break), 50/10, plus **custom** durations.
- * Visual progress ring, time left, start/pause/reset, skip break.
- * Optional long break every N focus sessions.
- * **Sound** on phase change (respect browser autoplay policies; request interaction first). Volume and mute toggle.
-
-2. **Time Suggestions**
-
- * Show 3 dynamic suggestions (e.g., “25 min focus”, “40 min deep work”, “15 min power sprint”) based on recent completion rate, preferred durations, and time-of-day success.
- * Explainability note (“Based on your last 7 sessions…”).
-
-3. **History (No Login)**
-
- * Log each session locally: start/end timestamps, intended/actual duration, focus/break, completion status, interruptions count.
- * Simple charts: sessions per day, completion rate, average focus duration.
- * Export CSV/JSON.
-
-4. **No-Login, Anonymous**
-
- * On first load, generate `deviceId` (UUID) and store in cookie/localStorage.
- * Use `deviceId` on server endpoints for suggestions & aggregate trends (no PII).
-
-5. **Polish**
-
- * Dark/light theme toggle.
- * Keyboard shortcuts: Space (start/pause), R (reset), S (skip break).
- * PWA basics (installable + offline for timer & history).
-
-## Client Requirements
-
-* **Atomic Design structure** with Ant Design components wrapped as atoms/molecules.
-* **Pages:** Home (Timer), History/Insights, Settings.
-* **Animations:** Framer Motion for page transitions and subtle UI feedback (button taps, card entrance).
-* **Accessibility:** Focus states, ARIA for timer, sound toggle explained.
-* **Persistence:** Local history mirrors to server when online (best-effort).
-* **Error states:** Graceful toasts via antd.
-
-## Server (MVC) Requirements
-
-* **Routes (JSON only):**
-
- * `POST /api/sessions` — record session result `{ deviceId, type, intendedMinutes, actualSeconds, startedAt, endedAt, completed, interruptions }`.
- * `GET /api/suggestions?deviceId=...` — return up to 3 durations with reasons.
- * `GET /api/stats/summary?deviceId=...` — compact aggregates for charts (optional).
-* **Controllers:** validation, error handling, 2xx/4xx/5xx responses with clear messages.
-* **Models:** Session model; Suggestions service (uses simple heuristics: moving average of completed sessions, time-of-day buckets).
-* **Persistence:** SQLite with a minimal schema (`sessions` table, `device_profiles` optional).
-* **No auth**; CORS enabled for the Vite client origin only.
-* **Tests:** minimal unit tests for suggestions logic.
-
-## Acceptance Criteria
-
-* Timer plays a sound reliably on phase changes after first user interaction.
-* User can pick from **suggested durations** and see a one-line reason.
-* History shows today + 7/30-day trends; export works.
-* Works entirely without login; consistent anonymous `deviceId`.
-* Clean, responsive UI using Ant Design; animated but subtle.
-* Code is organized: atomic design on client; MVC on server; TypeScript everywhere.
-* One-command dev start for client and server; `.env.example` provided.
-
-## Deliverables
-
-* **Client folder** (`vite` + `antd` + `framer-motion` + atomic design), **Server folder** (Node/TS/Express MVC).
-* Sound assets (short beep + gentle chime).
-* README with setup, scripts, and architectural notes.
-
----
-
-## API Contract (compact)
-
-**POST** `/api/sessions`
-Request:
-
-```json
-{
- "deviceId": "uuid",
- "type": "focus|break",
- "intendedMinutes": 25,
- "actualSeconds": 1490,
- "startedAt": "2025-08-31T14:05:00Z",
- "endedAt": "2025-08-31T14:30:50Z",
- "completed": true,
- "interruptions": 1
-}
-```
-
-Response `201`:
-
-```json
-{ "ok": true, "id": "session_id" }
-```
-
-**GET** `/api/suggestions?deviceId=uuid`
-Response `200`:
-
-```json
-{
- "suggestions": [
- { "minutes": 25, "reason": "Your 7-day completion rate is 82% at 25m." },
- { "minutes": 40, "reason": "Afternoons: best focus avg 37–42m." },
- { "minutes": 15, "reason": "High interruption mornings benefit from short sprints." }
- ]
-}
-```
-
-**GET** `/api/stats/summary?deviceId=uuid`
-Response `200`:
-
-```json
-{
- "last7d": { "sessions": 18, "completionRate": 0.76, "avgFocusMin": 28 },
- "last30d": { "sessions": 64, "completionRate": 0.71, "avgFocusMin": 26 }
-}
-```
-
----
-
-## Folder Blueprint
-
-```
-pomodorian/
- client/ # Vite + React + TS
- src/
- assets/sounds/ # chime.mp3, beep.mp3
- design/ # theme tokens, colors
- state/ # store (Zustand/Context)
- utils/ # time, audio, id
- api/ # fetchers for /api/*
- components/
- atoms/
- Button.tsx
- Toggle.tsx
- ProgressRing.tsx
- SoundPicker.tsx
- molecules/
- TimerControls.tsx
- DurationSelector.tsx
- SuggestionChips.tsx
- organisms/
- PomodoroTimer.tsx
- HistoryChart.tsx
- ExportPanel.tsx
- templates/
- MainLayout.tsx
- pages/
- Home.tsx
- History.tsx
- Settings.tsx
- index.html
- main.tsx
- vite.config.ts
- tsconfig.json
- server/ # Node + TS + Express (MVC)
- src/
- app.ts
- routes/
- index.ts
- sessions.routes.ts
- suggestions.routes.ts
- controllers/
- sessions.controller.ts
- suggestions.controller.ts
- models/
- session.model.ts
- services/
- suggestions.service.ts
- stats.service.ts
- db/
- prisma.schema.sql or knex migrations
- middleware/
- cors.ts
- error.ts
- utils/
- validate.ts
- package.json
- tsconfig.json
- README.md
-```
-
----
-
-If you want, I can turn this into a starter repo (with Vite, antd, motion, and a minimal Express MVC) and drop in a couple of example components & endpoints.
diff --git a/client/index.html b/client/index.html
index 0d05af3..fb73358 100644
--- a/client/index.html
+++ b/client/index.html
@@ -10,7 +10,5 @@
-
-
-