CodePause Website

Modern, developer-focused landing page and admin dashboard for CodePause - built with Next.js 16, TypeScript, and Tailwind CSS.

Quick Start

# Install dependencies (if not already done)
npm install

# Create environment file
cp .env.example .env.local

# Edit .env.local and update the JWT_SECRET with a secure random string
# Then update other configuration values as needed

# Start development server
npm run dev

The app will be available at:

• Landing Page: http://localhost:3000
• Admin Dashboard: http://localhost:3000/admin

Project Structure

frontend/
├── app/
│   ├── admin/              # Admin dashboard routes
│   │   ├── errors/         # Error reports page
│   │   ├── layout.tsx      # Admin layout with nav
│   │   └── page.tsx        # Admin overview
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Landing page
│   └── globals.css         # Global styles
├── components/
│   ├── ui/                 # Base UI components
│   │   ├── button.tsx
│   │   └── card.tsx
│   ├── landing/            # Landing page sections
│   │   ├── Hero.tsx
│   │   ├── Stats.tsx
│   │   ├── Features.tsx
│   │   └── Pricing.tsx
│   └── admin/              # Admin components
│       └── AdminNav.tsx
├── lib/
│   ├── utils.ts            # Utility functions
│   ├── api.ts              # API client
│   └── metadata.ts         # SEO metadata
└── public/                 # Static assets

Features

Landing Page

• Hero section with animated background
• Live statistics from backend API
• Feature showcase with 6 key features
• Pricing section (100% free)
• Smooth animations with Framer Motion
• Dark mode support
• Mobile responsive

Admin Dashboard

• Overview with key metrics
• Platform distribution chart
• Error reports with filtering
• Recent activity feed
• Fixed sidebar navigation
• JWT-based authentication

Configuration

Create .env.local file from the example:

cp .env.example .env.local

Edit .env.local and configure:

# API Configuration - Point to your backend API
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1

# Admin Authentication - Generate a secure random string
JWT_SECRET=change-this-to-a-secure-random-string-in-production

# Site Configuration
NEXT_PUBLIC_SITE_URL=https://codepause.dev
NEXT_PUBLIC_SUPPORT_EMAIL=support@codepause.dev

# Site Verification (Optional)
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=
NEXT_PUBLIC_YANDEX_VERIFICATION=

Security Note: Generate a secure JWT secret using:

openssl rand -base64 32

Backend Integration

Make sure your backend API is running:

cd ../backend
npm run start:dev

The frontend connects to these endpoints:

• GET /api/v1/stats/public - Public statistics
• GET /api/v1/admin/dashboard - Admin overview
• GET /api/v1/admin/errors - Error reports
• POST /api/v1/auth/login - Admin authentication

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Configure environment variables in Vercel dashboard
4. Deploy

vercel

Docker

docker build -t codepause-frontend .
docker run -p 3001:3000 codepause-frontend

Environment Variables for Production

When deploying to production, ensure you set:

• NEXT_PUBLIC_API_URL - Your production backend API URL
• JWT_SECRET - A strong, randomly generated secret
• NEXT_PUBLIC_SITE_URL - Your production domain
• NEXT_PUBLIC_SUPPORT_EMAIL - Your support email address

Tech Stack

• Next.js 16 with App Router
• React 19 - Latest features
• TypeScript - Type safety
• Tailwind CSS v4 - Styling
• Framer Motion - Animations
• Axios - API client
• Lucide React - Icons

Design Principles

Built for developers:

1. No marketing fluff - data and facts
2. Fast loading and performance
3. Privacy-first messaging
4. Research-backed (1.7x bug stat)
5. Professional, modern design
6. Clear CTAs

Security Considerations

• Admin tokens are stored in localStorage (consider implementing HttpOnly cookies for production)
• JWT_SECRET must be changed from the default value
• API URLs should use HTTPS in production
• CSP headers are configured but allow unsafe-inline for development

License

MIT License - see LICENSE file for details