Focus Factory 🚀

A productivity application that helps users track their focus sessions, pomodoro timers, and daily reflections.

Features

• Focus Sessions: Track deep work sessions with subjects and sub-topics
• Pomodoro Timer: Built-in timer with session history
• Daily Reflections: Record daily ratings and notes
• Analytics: View weekly focus time and productivity trends

Tech Stack 🛠️

• Frontend: Next.js 14 (App Router)
• Authentication: Clerk (with JWT integration)
• Database: Supabase (PostgreSQL 15)
• Styling: Tailwind CSS + Headless UI
• State Management: React Query
• Form Handling: React Hook Form + Zod
• Deployment: Vercel (with Edge Functions)
• Testing: Jest + React Testing Library

🚀 Getting Started

Prerequisites

• Node.js 18+ & npm
• Supabase account
• Clerk account
• Vercel account (for deployment)

Local Development

1. Clone the repository

   git clone https://github.com/sai21-learn/focusfactory.git
   cd focusfactory

2. Install dependencies

   # Using npm
   npm install
   
   # Or using yarn
   yarn install

3. Environment Setup Create a .env.local file with the following variables:

   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_*
   CLERK_SECRET_KEY=sk_test_*
   
   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
   
   # Optional: Analytics (e.g., Vercel Analytics, PostHog)
   NEXT_PUBLIC_ENABLE_ANALYTICS=false

4. Database Setup

   • Create a new Supabase project
   • Run the database migrations from supabase/migrations/
   • Enable Row Level Security (RLS) on all tables
   • Set up the necessary storage buckets if needed

5. Run the development server

   npm run dev
   # or
   yarn dev

   The app will be available at http://localhost:3000

Database Schema

Tables

• users: User profiles and authentication
• focus_sessions: Track focus sessions with duration and topics
• pomodoro_history: Record pomodoro timer sessions
• reflections: Daily reflections and ratings

📚 API Documentation

Authentication

All API endpoints require authentication via Clerk JWT token in the Authorization header.

Endpoints

Focus Sessions

• GET /api/focus-sessions - List all focus sessions

  curl -H "Authorization: Bearer YOUR_JWT_TOKEN" \
       https://your-app.vercel.app/api/focus-sessions

• POST /api/focus-sessions - Create a new focus session

  {
    "started_at": "2025-10-24T09:00:00Z",
    "duration_minutes": 50,
    "subject": "Coding",
    "sub_topic": "Feature Implementation",
    "output_text": "Completed the new API endpoints"
  }

Pomodoro

• GET /api/pomodoro - Get pomodoro history
• POST /api/pomodoro - Log a new pomodoro session

  {
    "start_time": "2025-10-24T10:00:00Z",
    "duration_minutes": 25,
    "completed": true
  }

Reflections

• GET /api/reflections?date=2025-10-24 - Get reflection for a specific date
• POST /api/reflections - Create or update a daily reflection

  {
    "reflection_date": "2025-10-24",
    "rating": 4,
    "notes": "Had a productive day with good focus sessions."
  }

Analytics

• GET /api/analytics/weekly?weeks=4 - Get weekly focus time
• GET /api/analytics/productivity - Get productivity metrics

🛠 Development

Project Structure

/
├── app/                    # Next.js 14 app directory
│   ├── api/                # API routes
│   ├── (auth)/             # Authentication pages
│   ├── dashboard/          # Protected routes
│   └── layout.tsx          # Root layout
│
├── components/             # Reusable components
│   ├── ui/                # Shadcn/ui components
│   ├── dashboard/         # Dashboard specific components
│   └── shared/            # Shared components
│
├── lib/
│   ├── supabase/          # Supabase client and utilities
│   ├── utils/             # Utility functions
│   └── types/             # TypeScript types
│
├── public/                # Static files
├── styles/                # Global styles
└── tests/                 # Test files

Available Scripts

# Start development server
npm run dev

# Create production build
npm run build

# Start production server
npm start

# Lint code
npm run lint

# Run tests
npm test

# Run tests in watch mode
npm test:watch

# Generate API client types from Supabase
npm run generate:types

Environment Variables

Variable	Required	Description
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Yes	Clerk publishable key
CLERK_SECRET_KEY	Yes	Clerk secret key
NEXT_PUBLIC_SUPABASE_URL	Yes	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Yes	Supabase anon/public key
SUPABASE_SERVICE_ROLE_KEY	No	Supabase service role key (server-side only)
NEXT_PUBLIC_ENABLE_ANALYTICS	No	Enable/disable analytics

📱 Screenshots

Dashboard

Focus Session

Analytics

Mobile View

Deployment

1. Push your changes to the main branch
2. Vercel will automatically deploy the changes

License

MIT