Architecture Overview

CodePlanet is built on a modern, scalable architecture designed for performance, security, and developer experience. This document provides a comprehensive overview of how the platform is structured.

High-Level Architecture

┌────────────────────────────────────────────────────────────────────────┐
│                         Client Browser                                  │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │                 Next.js App (React 19)                           │   │
│  │  - Server Components for initial render                         │   │
│  │  - Client Components for interactivity                          │   │
│  │  - Edge Runtime for global distribution                         │   │
│  └─────────────────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                         Vercel Edge Network                             │
│  - Global CDN with 30+ edge locations                                  │
│  - Automatic HTTPS & DDoS protection                                   │
│  - Edge Functions for auth & routing                                   │
└────────────────────────────────────────────────────────────────────────┘
                                    │
                    ┌───────────────┴───────────────┐
                    ▼                               ▼
┌───────────────────────────────┐   ┌───────────────────────────────────┐
│     Next.js API Routes        │   │        Supabase Backend           │
│  /api/v1/*                    │   │                                   │
│  - RESTful endpoints          │   │  - PostgreSQL Database            │
│  - Rate limiting              │   │  - Row-Level Security             │
│  - Input validation           │   │  - Real-time subscriptions        │
│  - Webhook handlers           │   │  - Auth & Storage                 │
└───────────────────────────────┘   └───────────────────────────────────┘
                    │                               │
                    └───────────────┬───────────────┘
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                      External Services                                  │
│  - Razorpay (Payments)                                                 │
│  - Email (Transactional)                                               │
│  - Analytics                                                           │
└────────────────────────────────────────────────────────────────────────┘

Core Design Principles

1. Security First

Every database table has Row-Level Security (RLS) policies. Users can only access their own data, and all API endpoints validate inputs and authenticate requests.

2. Performance Optimized

Server Components reduce JavaScript bundle size
Edge caching for static content
Database connection pooling
Optimistic UI updates

3. Developer Experience

TypeScript throughout the codebase
Consistent API patterns
Comprehensive error handling
Detailed logging

4. Scalability

Stateless API design
Horizontal scaling via Vercel
Database indexing strategies
Rate limiting by tier

Technology Stack

Layer	Technology	Purpose
Frontend	Next.js 14+	React framework with App Router
UI	Tailwind CSS + shadcn/ui	Styling and components
Animations	Framer Motion	Smooth transitions
Database	PostgreSQL (Supabase)	Primary data store
Auth	Supabase Auth	User authentication
Payments	Razorpay	Payment processing
Hosting	Vercel	Edge deployment

Request Flow

Here's how a typical request flows through the system:

User Action — User clicks a button or navigates to a page
Next.js Routing — App Router handles the request
Server Component — Data is fetched server-side when possible
API Call — Client components call /api/v1/ endpoints
Validation — Input is validated, rate limits checked
Database — Query executed with RLS policies
Response — Data returned, UI updated

Key Directories

src/
├── app/                    # Next.js App Router pages
│   ├── api/v1/            # API endpoints
│   ├── dashboard/         # Protected dashboard routes
│   ├── docs/              # Documentation pages
│   └── (auth)/            # Auth routes (login, signup)
├── components/            # React components
│   ├── ui/               # Base UI primitives
│   ├── dashboard/        # Dashboard-specific
│   └── docs/             # Documentation-specific
├── lib/                   # Utilities and services
│   ├── supabase/         # Database client
│   └── weak-topic-detector.ts
├── hooks/                 # Custom React hooks
└── data/                  # Static data (docs content)

Next Steps

Frontend Stack — Deep dive into the React architecture
Backend Services — Learn about API design and database
Data Flow — Understand how data moves through the system

On this page