Skip to content

BlueQ-lK/Kepsto

BranchesTags

Repository files navigation

Kepsto - Interactive Coding Platform

Kepsto Logo

Escape tutorial hell with hands-on challenges, real-time coding, and a modern web curriculum.

Next.js React TypeScript License

Live Demo

About Kepsto

Kepsto is an interactive, gamified coding platform designed to help aspiring developers escape tutorial hell and build real-world skills through hands-on practice. With an integrated code editor, interactive challenges, and a comprehensive curriculum covering modern web development, Kepsto provides a structured learning path from beginner to advanced.

Live Demo

kepsto.com

Key Highlights

  • Interactive Learning - Learn by doing with real-time code execution using Sandpack
  • Gamified Challenges - Progress through levels with engaging coding challenges
  • Comprehensive Courses - Structured curriculum covering HTML, CSS, JavaScript, React, and more
  • Built-in Code Editor - Write and test code directly in the browser
  • Progress Tracking - Monitor your learning journey with personalized dashboards
  • Bookmark System - Save your favorite courses and challenges for later
  • Cheat Sheets - Quick reference guides for common programming concepts
  • Dark Mode - Beautiful dark theme optimized for long coding sessions

Features

For Learners

  • Interactive Courses: Hands-on courses covering web development fundamentals to advanced topics
  • Coding Challenges: Test your skills with real-world coding problems
  • Progress Dashboard: Track your learning progress, completed courses, and achievements
  • Bookmarking: Save courses and challenges to revisit later
  • Cheat Sheets: Quick-access reference materials for syntax and concepts

For Developers

  • Modern Tech Stack: Built with Next.js 16, React 19, and TypeScript
  • Authentication: Secure auth with Better Auth (email/password + Google OAuth)
  • Payment Integration: Subscription management with DodoPayments
  • Database: PostgreSQL with Drizzle ORM for type-safe queries
  • Code Execution: Sandpack for safe, sandboxed code execution
  • Security: Comprehensive CSP headers and security best practices
  • Analytics: Umami analytics integration for privacy-focused tracking

Tech Stack

Frontend

Backend

DevOps & Tooling

Installation

Prerequisites

  • Node.js: >= 22.12.0
  • npm: >= 9.0.0
  • PostgreSQL: Neon database instance (or local PostgreSQL)
  • DodoPayments Account: For subscription management
  • Google OAuth Credentials: For social authentication
  • Resend API Key: For email functionality

1. Clone the Repository

git clone https://github.com/yourusername/kepsto.git
cd kepsto

2. Install Dependencies

npm install

3. Environment Setup

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL=postgresql://user:password@host:port/dbname

# App
NEXT_PUBLIC_BASE_URL=http://localhost:3000
ALLOWED_ORIGINS=http://localhost:3000

# Better Auth
BETTER_AUTH_SECRET=your-auth-secret-key
BETTER_AUTH_URL=http://localhost:3000

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# DodoPayments
DODO_PAYMENTS_API_KEY=your-dodo-api-key
DODO_PAYMENTS_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_RETURN_URL=http://localhost:3000/dashboard
DODO_PAYMENTS_ENVIRONMENT="live_mode" | "test_mode"

# Email (Resend)
RESEND_API_KEY=your-resend-api-key
EMAIL_SENDER_NAME=name
EMAIL_FROM=email

# Project Mode
NODE_ENV="development" | "production"

4. Database Setup

Run database migrations:

npm run db:push

Or generate and run migrations:

npm run db:generate
npm run db:migrate

5. Run Development Server

npm run dev

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

Project Structure

kepsto/
├── app/                      # Next.js App Router
│   ├── (auth)/              # Authentication routes (sign-in, sign-up, forgot-password)
│   ├── (landing)/           # Public landing pages (about, pricing, legal)
│   ├── (routes)/            # Protected app routes
│   │   ├── bookmarks/       # User bookmarks
│   │   ├── challenges/      # Coding challenges
│   │   ├── cheatsheet/      # Reference materials
│   │   ├── courses/         # Course catalog
│   │   └── dashboard/       # User dashboard
│   ├── actions/             # Server actions
│   ├── api/                 # API routes
│   │   ├── auth/           # Authentication endpoints
│   │   ├── course/         # Course management
│   │   ├── dodo/           # Payment webhooks
│   │   ├── enroll/         # Course enrollment
│   │   ├── exercise/       # Challenge submissions
│   │   ├── feedback/       # User feedback
│   │   ├── inbox/          # User notifications
│   │   └── user/           # User management
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Landing page
├── components/             # React components
│   ├── challenges/         # Challenge-related components
│   ├── courses/            # Course display components
│   ├── dashboard/          # Dashboard widgets
│   ├── feedback/           # Feedback forms
│   ├── landing/            # Landing page sections
│   ├── provider/           # Context providers
│   ├── sidebar/            # Navigation sidebar
│   └── ui/                 # Reusable UI components (shadcn/ui)
├── config/                 # Configuration files
│   ├── db.tsx             # Database connection
│   └── schema.tsx         # Database schema
├── context/               # React contexts
├── drizzle/              # Database migrations
│   ├── auth-schema.ts    # Authentication tables
│   └── *.sql             # Migration files
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and libraries
│   ├── auth.ts          # Better Auth configuration
│   ├── courses.ts       # Course utilities
│   ├── subscription.ts  # Subscription management
│   ├── validations/     # Zod schemas
│   └── legal/           # Legal document content
├── public/              # Static assets
├── utils/               # Helper utilities
├── .env                 # Environment variables (not in repo)
├── drizzle.config.ts    # Drizzle ORM configuration
├── next.config.ts       # Next.js configuration
├── package.json         # Dependencies and scripts
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Database
npm run db:push      # Push schema changes to database
npm run db:generate  # Generate migrations
npm run db:migrate   # Run migrations
npm run db:studio    # Open Drizzle Studio (database GUI)

# Code Quality
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript type checking

Authentication

Kepsto uses Better Auth with DodoPayments integration for authentication and subscription management.

Supported Authentication Methods

  1. Email & Password: Traditional email/password authentication with email verification
  2. Google OAuth: One-click sign-in with Google accounts

Features

  • Email verification
  • Password reset functionality
  • Session management with secure tokens
  • User account deletion
  • OAuth provider linking
  • Automatic subscription sync with DodoPayments

Payment Integration

Kepsto uses DodoPayments for subscription management and payment processing.

Subscription Features

  • Multiple subscription tiers
  • Automatic webhook handling for subscription events
  • Subscription status tracking (active, cancelled, expired, on-hold)
  • Customer portal integration
  • Automatic database sync for subscription updates

Webhook Events Handled

  • subscription.active - Subscription activated
  • subscription.cancelled - Subscription cancelled
  • subscription.expired - Subscription expired
  • subscription.renewed - Subscription renewed
  • subscription.on_hold - Subscription on hold

Styling and Theming

Kepsto uses Tailwind CSS 4 with a custom design system and shadcn/ui components.

Features

  • Dark mode (default)
  • Custom color scheme with purple accent
  • Custom fonts: Inter (sans) and Roboto Mono (mono)
  • Fully responsive design
  • Accessible components (Radix UI)

Security

Kepsto implements comprehensive security measures:

  • Content Security Policy (CSP): Strict CSP headers to prevent XSS attacks
  • HTTPS Enforcement: HSTS headers for secure connections
  • Secure Headers: X-Frame-Options, X-Content-Type-Options, etc.
  • CORS Configuration: Properly configured cross-origin policies
  • Environment Variables: Sensitive data stored in environment variables
  • SQL Injection Prevention: Parameterized queries with Drizzle ORM
  • Authentication Security: Secure session management with Better Auth

Analytics

Kepsto uses Umami for privacy-focused web analytics.

Features

  • Privacy-friendly (GDPR compliant)
  • No cookie banners required
  • Real-time visitor tracking
  • Page view analytics
  • Event tracking

The analytics script is proxied through /kepsto_script.js to avoid ad blockers.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by BlueQ-lK

⭐ Star us on GitHub if you find this project useful!

About

Interactive coding education platform featuring real-time code execution, gamified challenges, comprehensive web dev curriculum, and progress tracking. Learn by doing, not just watching. Built with Next.js & React

kepsto.com

Topics

nextjs elearning

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages