Daiily

A growth diary feed application where professionals share their daily experiences, learnings, and achievements at work.

Tech Stack

Core

• Framework: Next.js 15 with App Router + Turbopack
• Database: PostgreSQL + Prisma ORM
• Styling: Tailwind CSS v4 with CSS variables for theming
• Icons: Lucide React
• Theme: Dark-first design with Cursor Dark Midnight palette
• Language: TypeScript
• Architecture: Headless, Feature-Sliced Design (FSD)

Authentication & Security

• Authentication: NextAuth.js with Prisma adapter
• OAuth Providers: Google, GitHub
• Password Hashing: bcryptjs
• JWT: jsonwebtoken
• CSRF Protection: Custom HMAC-SHA256 tokens for auth actions

Features & Utilities

• AI Integration: OpenAI for story generation
• Forms: React Hook Form + @hookform/resolvers
• Validation: Zod schemas
• Email: Resend for transactional emails
• Logging: Pino with sensitive data redaction (pino-pretty for dev)
• Theming: next-themes (dark/light mode support)

Getting Started

Database Setup

1. Install PostgreSQL (if not already installed):

   brew install postgresql

2. Start PostgreSQL service:

   brew services start postgresql@14

3. Create the database:

   createdb daiily

4. Configure environment variables: Update .env with your local database connection:

   DATABASE_URL="postgresql://[your_username]:@localhost:5432/daiily"

   Replace [your_username] with your system username.

5. Generate Prisma client and sync database:

   npx prisma generate
   npx prisma db push

Start Development Server

npm run dev

Open http://localhost:3000 with your browser.

Available Scripts

Development

• npm run dev - Start development server with Turbopack
• npm run build - Build production bundle with Turbopack
• npm start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

Database

• npm run db:generate - Generate Prisma client
• npm run db:push - Push schema to database (no migrations)
• npm run db:migrate - Create and run migrations
• npm run db:studio - Open Prisma Studio GUI
• npm run db:seed - Seed database with test data

Deployment

The application is deployed at https://daiily.site using Docker and nginx with GitHub Actions CI/CD.

For detailed deployment instructions, environment setup, and infrastructure configuration, see .claude/deploy/CLAUDE.md.

Project Structure

/app/                    # Next.js App Router (pages, layouts, API routes)
  ├── feed/              # Main feed page
  ├── write/             # Create new post
  ├── story/[id]/        # Individual story view
  ├── profile/[id]/      # User profile pages
  ├── drafts/            # Draft posts
  ├── login/             # Login page
  ├── signup/            # Registration page
  ├── forgot-password/   # Password reset request
  ├── reset-password/    # Password reset form
  └── api/               # API routes

/features/               # Feature-Sliced Design modules
  ├── auth/              # Authentication (login, signup, password reset, email verification)
  ├── feed/              # Feed display and post creation
  ├── story/             # Story viewing and management
  ├── profile/           # User profile display
  ├── ai/                # AI story generation
  └── goals/             # Goal tracking (daily, weekly, monthly, quarterly, yearly)

/components/             # Global shared UI components
  ├── atoms/             # Basic UI elements (buttons, inputs, etc.)
  ├── molecules/         # Composite components
  ├── providers/         # React context providers
  └── templates/         # Page templates

/lib/                    # Utilities and shared functions
  ├── auth.ts            # Auth utilities (JWT, CSRF, password hashing)
  ├── auth-config.ts     # NextAuth configuration
  ├── db.ts              # Prisma client instance
  ├── email.ts           # Email sending utilities
  ├── env.ts             # Environment variable configuration
  └── logger.ts          # Structured logging with Pino

/prisma/                 # Database
  ├── schema.prisma      # Database schema
  ├── migrations/        # Database migrations
  └── seed.ts            # Database seeding script

/.claude/                # Claude Code configuration & documentation
  ├── deploy/CLAUDE.md           # Deployment guide & infrastructure setup
  ├── design/CLAUDE.md           # Design standards & component documentation
  ├── database/CLAUDE.md         # Database schema & migration guide
  └── agents/                    # AI agent configurations
/scripts/                # Utility scripts

Feature Structure

Each feature follows this pattern:

/features/[feature]/
  ├── components/        # Feature-specific components (atomic design)
  ├── lib/               # Feature utilities and actions
  └── schemas/           # Feature-specific Zod schemas

Features

Authentication

• Email/password authentication with secure password hashing
• OAuth integration (Google, GitHub)
• Password reset via email
• CSRF protection for auth actions
• Session management with NextAuth.js

Content Management

• Create and edit daily growth stories
• Draft system for work-in-progress posts
• Rich text editing with AI assistance
• Tag/chip-based categorization
• Infinite scroll pagination

Social Features

• Public feed of user stories
• User profiles with post history
• View other users' growth journeys

AI Integration

• AI-powered story generation with 4 harshness levels (low, medium, harsh, brutal)
• AI stories automatically shared to feed with [AI] badge
• Content generation assistance and proofreading
• OpenAI GPT-4o-mini integration
• Rate limiting: 10 generations per day per user
• AI stories are read-only (cannot be edited, can be deleted)

UI/UX

• Dark-first theme with Cursor Dark Midnight palette
• Light mode support with CSS variables
• Consistent design system (standardized buttons, typography, spacing)
• Lucide React icons throughout
• Responsive design (mobile-first)
• Smooth transitions and loading states
• Accessible components
• Comprehensive design documentation (DESIGN_SPEC.md)

Developer Experience

• Structured logging with sensitive data redaction
• Type-safe database queries with Prisma
• Zod schema validation
• Comprehensive error handling
• Hot reload with Turbopack

Development Notes

• Server Components by default: Client Components only when necessary
• Server Actions: All data mutations use Server Actions
• Arrow functions: Use arrow functions and exports at bottom
• Feature-Sliced Design: Nested features support with strict upward imports
• Type Safety: Strict TypeScript with Zod runtime validation
• Design System: Use CSS variables, Lucide icons, and standardized components
• No hardcoded colors: Always use CSS variables for theming
• Typography: Follow semantic HTML hierarchy (h1-h6) with consistent sizing
• AI Story Metadata: Stories tracked via storyGenerationId and storyPeriod fields (not HTML comments)
• Story Navigation: Direct links to /story/${userId} for instant client-side navigation

See CLAUDE.md for detailed architecture guidelines, .claude/design/CLAUDE.md for UI/component standards, and .claude/database/CLAUDE.md for database documentation.