Fektori Newsletter Platform

An ephemeral newsletter platform where creators can share daily content through personalized bio links.

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm
• PostgreSQL database (local or Supabase)

Installation

1. Install dependencies:

   pnpm install

2. Set up environment variables:

   cp .env.example .env.local

   Update .env.local with your actual values:

   • DATABASE_URL: Your PostgreSQL connection string
   • NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key
   • SUPABASE_SERVICE_ROLE_KEY: Your Supabase service role key

3. Set up the database:

   pnpm db:push
   pnpm db:seed

4. Start the development server:

   pnpm dev

🏗️ Project Structure

src/
├── app/                    # Next.js app router pages
│   ├── [username]/        # Dynamic creator bio link pages
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Creator dashboard
│   └── creator/           # Creator profile pages
├── components/            # React components
│   ├── auth/             # Authentication components
│   ├── dashboard/        # Dashboard components
│   ├── reader/           # Reader experience components
│   └── ui/               # Reusable UI components
├── hooks/                # Custom React hooks
└── lib/                  # Utility functions and configurations
    ├── prisma.ts         # Prisma client
    ├── supabase.ts       # Supabase client
    └── utils.ts          # General utilities

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Database: PostgreSQL with Prisma ORM
• Authentication: Supabase Auth
• Styling: Tailwind CSS with custom theme
• UI Components: Radix UI + shadcn/ui
• Type Safety: TypeScript

📊 Database Schema

CreatorProfile

• User profile information and branding
• Links to Supabase auth user ID
• Stores custom brand colors and bio

NewsletterCard

• Daily newsletter content
• Markdown content with cover images
• Reading time estimation

AnalyticsEvent

• Tracks user interactions
• Event types: impressions, reads, subscribe clicks
• Stores user agent and referrer data

🎨 Theme & Styling

The platform uses a custom theme based on:

• Primary Color: #d87943 (warm orange)
• Secondary Color: #527575 (teal)
• Fonts: Geist Mono for sans-serif, JetBrains Mono for monospace

📝 Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm db:generate - Generate Prisma client
• pnpm db:push - Push schema to database
• pnpm db:migrate - Run database migrations
• pnpm db:seed - Seed database with sample data

🔧 Development

Adding New Components

Use shadcn/ui for consistent component patterns:

npx shadcn@latest add <component-name>

Database Changes

1. Update prisma/schema.prisma
2. Run pnpm db:push for development
3. Run pnpm db:generate to update types

🚦 Current Status

✅ Task 2 Complete: Backend infrastructure setup

• Supabase project configuration
• Prisma ORM setup with database schema
• UI components copied and configured
• Custom theme colors applied
• Development environment ready

Next Steps: Task 3 - Implement authentication system

Trigger deployment