Codepad 🚀
A blazing fast, browser-based JavaScript/TypeScript playground built with modern web technologies.
📸 Showcase
Note: Add a high-resolution screenshot or GIF of your application UI here. Place the image in the public folder and link it below.
✨ Features
- ⚡ Client-Side Execution: Zero server execution cost. All code is bundled and run directly in the browser using Sandpack.
- 🛡️ Strong Isolation: User code is executed inside a heavily sandboxed
<iframe> (allow-scripts), ensuring complete security from the parent application.
- 🎨 Professional Editor: Integrated Monaco Editor (the engine behind VS Code) for a familiar, powerful coding experience.
- 🔐 Authentication: Secure login via GitHub OAuth utilizing Auth.js (NextAuth v5).
- 💾 Persistence: Save, load, and manage snippets seamlessly with a Prisma + PostgreSQL backend.
- 🚀 Modern UI/UX: Responsive, sleek, and dark-mode optimized design crafted with Tailwind CSS.
🛠️ Tech Stack Architecture
Codepad is architected to be highly performant and secure, relying on a monolithic Next.js pattern where the heavy lifting of code compilation is offloaded to the client.
| Category | Technology | Purpose |
|---|
| Framework | Next.js 15 (App Router) | Full-stack routing, API endpoints, and SSR. |
| Frontend | React 19 & Tailwind CSS | Component architecture and responsive styling. |
| Execution | Sandpack (@codesandbox) | In-browser bundling and secure iframe execution. |
| Editor | Monaco Editor | Syntax highlighting, code formatting, and editor feel. |
| Database | Prisma ORM + PostgreSQL | Relational data management for users and snippets. |
| Auth | Auth.js v5 | Session management and GitHub OAuth integration. |
🚀 Getting Started
📘 New contributor? Read GUIDE.md — full local setup (Docker Postgres +
Piston), workflow, environment isolation, and code-safety practices. The quick steps below
are the short version.
Follow these steps to run Codepad locally on your machine.
1. Clone the repository
git clone https://github.com/rvndnishad-work/Codepad.git
cd Codepad
2. Install dependencies
npm install
3. Set up environment variables
Copy the example environment file and fill in your details:
cp .env.example .env
(Optional) To enable saving snippets, you will need to set up a GitHub OAuth app and provide AUTH_GITHUB_ID and AUTH_GITHUB_SECRET. Generate an AUTH_SECRET using openssl rand -base64 32.
4. Initialize the Database
The app uses PostgreSQL (via Prisma). Point DATABASE_URL and DIRECT_URL in .env
at a Postgres instance (a local Docker container or a hosted dev branch), then apply the
migration history:
npx prisma migrate deploy # apply committed migrations (production-safe)
# during local schema work use: npx prisma migrate dev --name <change>
Schema changes go through prisma/migrations/ now — do not use prisma db push
against any shared/production database.
5. Code execution backend (Piston)
Untrusted playground/challenge code runs only in Piston, never on the app server.
For local dev, bring it up with Docker and point the app at it:
docker compose -f docker-compose.piston.yml up -d
./scripts/piston-install-langs.sh
# PISTON_URL defaults to http://localhost:2000
6. Start the development server
npm run dev
Open http://localhost:3000 in your browser to start coding!
Deploying to production? See DEPLOY.md for the full Vercel + Fly.io
(Postgres + Piston) runbook.
🔮 Future Roadmap
