Learn tech stacks by building real applications, one story-driven task at a time.
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Prisma ORM
- PostgreSQL
- Clerk Authentication
- GROQ API
- Node.js 18+ and pnpm
- PostgreSQL database
- Clerk account
- GROQ API key
- Clone the repository and install dependencies:
pnpm install- Copy the environment variables:
cp .env.example .env.local- Fill in your environment variables in
.env.local:
DATABASE_URL: Your PostgreSQL connection stringNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: From Clerk dashboardCLERK_SECRET_KEY: From Clerk dashboardCLERK_WEBHOOK_SECRET: From Clerk webhook settingsGROQ_API_KEY: Your GROQ API key
- Set up the database:
pnpm prisma migrate dev --name init- Configure Clerk webhook:
- Go to your Clerk dashboard
- Navigate to Webhooks
- Add endpoint:
https://your-domain.com/api/webhooks/clerk - Subscribe to events:
user.created,user.updated - Copy the signing secret to
CLERK_WEBHOOK_SECRET
- Seed the database with initial stacks:
pnpm db:seed- Run the development server:
pnpm devOpen http://localhost:3000 to see the application.
codesaga/
├── app/
│ ├── api/
│ │ └── webhooks/
│ │ └── clerk/ # Clerk webhook handler
│ ├── dashboard/ # Protected dashboard
│ ├── sign-in/ # Sign-in page
│ ├── sign-up/ # Sign-up page
│ └── page.tsx # Public home page
├── lib/
│ └── prisma.ts # Prisma client singleton
├── prisma/
│ └── schema.prisma # Database schema
└── middleware.ts # Route protection
- User: Synced from Clerk authentication
- Stack: Learning tracks (e.g., Express.js, Next.js)
- Enrollment: User enrollment in a stack
- Session: Learning sessions within an enrollment
- Task: Individual tasks within a stack
- TaskAttempt: User attempts at tasks
- ConceptProgress: Tracks user understanding of concepts
MIT