Chroma Cal

A visual calendar app for tracking daily activities with color-coded event types.

Live Demo: chromacal.vibe2viable.com

Architecture

flowchart LR
    Browser[React App] --> Vercel[Next.js]
    Vercel --> DB[(Neon PostgreSQL)]
    Vercel <--> Auth[BetterAuth]
    Payments[Lemon Squeezy] -->|Webhooks| Vercel

Loading

See ARCHITECTURE.md for detailed diagrams and technical documentation.

Features

• Color-coded tracking - Create custom event types with colors to visually track habits and activities
• Group organization - Organize event types into collapsible groups
• Month & Year views - Switch between detailed month view and year-at-a-glance overview
• Google OAuth - Sign in with Google account
• Subscriptions - 30-day free trial, then monthly or annual plans via Lemon Squeezy

Tech Stack

Layer	Technologies
Frontend	Next.js 15, React 19, Tailwind CSS
Backend	Next.js Server Actions
Database	Neon PostgreSQL, Row Level Security
Auth	BetterAuth, Google OAuth
Payments	Lemon Squeezy
Hosting	Vercel

Project Structure

Chroma__Cal/
├── app/                 # Next.js App Router
├── components/          # React components
├── lib/auth/            # Auth configuration
├── services/            # Data layer
└── utils/db/            # Database utilities

Local Development

Prerequisites

• Node.js 18+
• Neon database configured
• Google OAuth credentials

Setup

npm install
cp .env.example .env.local  # Configure environment variables
npm run dev                  # Starts on http://localhost:3003

Commands

Command	Description
npm run dev	Start dev server
npm run build	Production build
npm run lint	Run ESLint
npm test	Run tests

Deployment

The application deploys automatically to Vercel via GitHub integration.

Post-Deployment Setup:

1. Configure Lemon Squeezy webhook URL: https://your-domain.com/api/webhook
2. Add Vercel domain to Google OAuth authorized origins
3. Update environment variables in Vercel dashboard

License

MIT License - see LICENSE for details.