DevArcade is a full-stack coding interview preparation platform that combines structured learning paths, interactive coding exercises, and personalized progress tracking. The platform enables learners to move seamlessly from theory to hands-on coding practice through an integrated learning experience.
Most learning platforms focus only on video content, while coding platforms focus only on solving problems.
DevArcade bridges this gap by combining structured learning, interactive coding exercises, premium learning resources, and progress tracking into a single platform designed for interview preparation.
- Secure authentication using Clerk
- User onboarding and profile management
- Protected routes
- Subscription management
- Browse structured learning paths
- Enroll in courses
- Free preview chapters
- Premium course unlocking
- Chapter-wise learning progression
- Browser-based coding environment
- CodeMirror editor
- Sandpack-powered code execution
- Exercise descriptions
- Integrated hints
- Sample inputs and expected outputs
Track learning progress through:
- Enrolled courses
- Completed exercises
- XP progression
- Course-wise statistics
- Personalized dashboard
- Pro subscription
- Premium course access
- Clerk Billing integration
- Subscription management
| Category | Technologies |
|---|---|
| Frontend | Next.js, React, TypeScript, Tailwind CSS |
| Backend | Next.js Server Actions, API Routes |
| Database | PostgreSQL, Drizzle ORM |
| Authentication | Clerk |
| Billing | Clerk Billing |
| Code Editor | CodeMirror |
| Code Execution | Sandpack |
| Deployment | Vercel |
User
│
▼
Next.js Frontend
│
Server Actions / API Routes
│
┌───────────────┼───────────────┐
▼ ▼ ▼
Clerk PostgreSQL Sandpack
Authentication (Drizzle) Code Execution
Sign Up / Login
│
▼
Browse Courses
│
▼
Enroll
│
▼
Learn Chapter
│
▼
Practice Exercise
│
▼
Run Code
│
▼
Mark Completed
│
▼
XP Updated
│
▼
Dashboard Progress
app/
components/
actions/
lib/
hooks/
drizzle/
public/
git clone https://github.com/shubham79a/dev-arcade.git
cd dev-arcadenpm installCreate a .env file.
DATABASE_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=npm run dev- Built using the Next.js App Router architecture.
- Designed modular server actions for scalable backend logic.
- Integrated Clerk for authentication, subscription management, and protected routes.
- Implemented XP-based learning progression with personalized dashboards.
- Developed an interactive browser-based coding workspace using CodeMirror and Sandpack.
- Structured PostgreSQL database using Drizzle ORM.
- Judge0 integration for multi-language code execution
- Automatic solution evaluation using hidden test cases
- Submission history
- Enhanced learning analytics
Add screenshots or GIFs demonstrating:
- Landing Page
- Course Details
- Coding Workspace
- Dashboard
- Premium Subscription
While building DevArcade, I gained hands-on experience with:
- Designing a modular full-stack application using Next.js App Router
- Managing authentication and subscription workflows with Clerk
- Building interactive coding interfaces with CodeMirror and Sandpack
- Structuring relational data models using PostgreSQL and Drizzle ORM
- Designing scalable server actions and reusable UI components
Shubham Kumar
If you found this project interesting, consider ⭐ starring the repository.