Full Stack Campus - Project Overview

Short Description

Full Stack Campus is a comprehensive online learning platform designed to help aspiring developers become full stack engineers. Built with TanStack Start (a full-stack React framework), the platform combines educational content delivery with community features, including modules, assignments, quizzes, messaging, and social interactions. The tech stack leverages PostgreSQL with Drizzle ORM for type-safe database operations, Better Auth for authentication, Stripe for subscription payments, AWS S3/R2 for media storage, and Tailwind CSS with Radix UI for a modern, accessible user interface.

Detailed Project Overview

Full Stack Campus is a full-featured online learning management system (LMS) and community platform specifically designed for full stack engineering education. The platform provides a complete ecosystem where students can access structured learning modules, complete assignments and quizzes, track their progress, earn certificates, and engage with a vibrant community of learners and instructors.

Core Features

The platform includes comprehensive functionality across multiple domains:

• Educational Content: Structured modules with various content types (videos, articles, code examples)
• Student Management: Progress tracking, completion rates, time spent analytics, and engagement metrics
• Assignments & Quizzes: Create, submit, and grade assignments with automatic quiz grading
• Community Features: Posts, comments, reactions, and discussions tied to specific content
• Messaging System: Private messaging between community members
• Calendar & Events: Event management and scheduling for live sessions and workshops
• User Profiles: Extended profiles with skills, portfolios, and achievements
• Certificates & Badges: Automated certificate generation and achievement system
• Analytics Dashboard: Comprehensive analytics for student engagement and revenue metrics
• Search Functionality: Advanced search across content, modules, posts, and members
• Email Notifications: Automated email system for welcome messages, reminders, and digests
• Subscription Management: Tiered subscription plans (free/basic/pro) with Stripe integration

Architecture

The application follows a modern full-stack architecture with clear separation of concerns:

• File-based Routing: TanStack Router provides type-safe routing with SSR support
• Data Layer: Drizzle ORM ensures type-safe database queries with PostgreSQL
• State Management: TanStack Query handles server state with optimistic updates
• Authentication: Better Auth manages sessions, accounts, and email verification
• File Storage: AWS S3-compatible storage (R2) with presigned URL uploads
• Payments: Stripe integration for subscription management and webhooks
• UI Components: Radix UI primitives styled with Tailwind CSS for accessibility
• Form Handling: React Hook Form with Zod validation for type-safe forms

Tech Stack

Core Framework & Runtime

• TanStack Start - Full-stack React framework providing SSR, file-based routing, and API routes
• React 19 - Modern React with latest features for component-based UI development
• TypeScript - Full type safety across the entire codebase
• Vite - Fast build tool and development server with HMR
• Nitro - Server-side rendering and API framework integration

Routing & Navigation

• TanStack Router - Type-safe file-based routing with SSR support and route preloading
• TanStack Router DevTools - Development tools for debugging routing behavior

State Management & Data Fetching

• TanStack Query - Powerful data synchronization library for server state management
• TanStack Query DevTools - Development tools for inspecting queries and cache state
• TanStack Router SSR Query - Integration between router and query for SSR data fetching

Database & ORM

• PostgreSQL - Robust relational database for persistent data storage
• Drizzle ORM - Type-safe SQL query builder with schema inference and migrations
• Drizzle Kit - Database migration tooling and schema management
• pg - PostgreSQL client library for Node.js

Authentication & Authorization

• Better Auth - Modern authentication library with session management, email verification, and OAuth support

Styling & UI Components

• Tailwind CSS 4 - Utility-first CSS framework for rapid UI development
• Radix UI - Unstyled, accessible component primitives (Dialog, Dropdown, Select, Accordion, etc.)
• Tailwind CSS Animate - Animation utilities for Tailwind CSS
• Lucide React - Beautiful icon library with React components
• class-variance-authority - Utility for creating variant-based component APIs
• clsx - Utility for constructing className strings conditionally
• tailwind-merge - Merge Tailwind CSS classes without conflicts

Form Management & Validation

• React Hook Form - Performant form library with minimal re-renders
• Zod - TypeScript-first schema validation library
• @hookform/resolvers - Resolver adapters for React Hook Form (Zod integration)

File Upload & Storage

• AWS SDK S3 Client - Official AWS SDK for S3-compatible storage operations
• AWS SDK S3 Request Presigner - Generate presigned URLs for direct client uploads
• react-dropzone - Drag-and-drop file upload component for React

Payments & Subscriptions

• Stripe - Payment processing and subscription management platform

Drag & Drop

• @dnd-kit/core - Modern drag-and-drop toolkit for React
• @dnd-kit/sortable - Sortable list components built on dnd-kit
• @dnd-kit/utilities - Utility functions for dnd-kit

Date & Time

• date-fns - Modern JavaScript date utility library

Notifications & Toast

• Sonner - Beautiful toast notification library for React

HTTP Client

• redaxios - Axios-like API built on fetch with smaller bundle size

Progress Indicators

• nprogress - Slim progress bar for page navigation

Development Tools

• Docker Compose - Container orchestration for local PostgreSQL database
• vite-tsconfig-paths - Vite plugin for TypeScript path mapping support

Build & Deployment

• Node.js - JavaScript runtime environment
• ES Modules - Modern JavaScript module system

Project Structure

src/
├── routes/           # File-based routes (pages and API endpoints)
├── components/       # React components (UI components in ui/ subfolder)
├── db/              # Database schema and configuration
├── data-access/     # Data access layer functions
├── fn/              # Business logic and middleware functions
├── hooks/           # Custom React hooks for data fetching
├── queries/         # TanStack Query definitions
├── lib/             # Shared libraries (auth, stripe, utils)
├── config/          # Configuration files
└── utils/           # Utility functions and helpers

Development Workflow

The project uses modern development practices:

• Type Safety: Full TypeScript coverage ensures compile-time error detection
• Database Migrations: Drizzle Kit manages schema changes and migrations
• Hot Module Replacement: Fast development feedback with Vite HMR
• SSR & Hydration: Server-side rendering for better SEO and initial load performance
• Code Organization: Clear separation between data access, business logic, and presentation layers

Key Architectural Patterns

• Data Fetching: Custom hooks pattern wrapping TanStack Query for reusable data fetching logic
• File Uploads: Presigned URL pattern for direct client-to-storage uploads (bypassing server)
• Authentication: Session-based auth with Better Auth handling token management
• Subscriptions: Stripe webhook pattern for handling payment events asynchronously
• Type Safety: End-to-end type safety from database schema to React components via Drizzle ORM inference