A full-stack workout logging app built with Next.js, generated almost entirely by Claude Code as part of the Udemy course Claude Code Beginner to Pro: Agentic Coding for Developers.
Created by Tom Phillips (LinkedIn | Udemy), WebDevEducation
Use Claude Code AI to build Next.js web apps. Includes MCP, custom rules, commands, agents, workflow automations + more!
- How to use Claude Code for agentic coding, including building custom workflows, automations, and slash commands
- How to build a full-stack Next.js app (LiftingDiary) generated almost entirely by Claude Code
- How to integrate modern tooling: Clerk for authentication, Postgres on Neon, Drizzle ORM, and shadcn/ui for a production-ready stack
- How to seed databases with MCP, enforce coding standards with custom documentation, and guide Claude Code's output to match your style
- Best practices for treating Claude Code as a pair-programmer while keeping your codebase clean, maintainable, and consistent
- Advanced techniques to extend Claude Code with your own conventions and scale agentic coding into larger projects
- An active subscription with Claude Code
- Familiarity with web development concepts
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Clerk for authentication
- Drizzle ORM with Postgres on Neon
- shadcn/ui for UI components
First, install dependencies:
npm installThen run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
npm run dev— Start development servernpm run build— Production buildnpm run lint— Run ESLintnpm test— Run testsnpm run test:watch— Run tests in watch modenpm run test:coverage— Run tests with coverage report