Into Claude Code from Replit and Loveable

---

This quick start lays out the steps and references to get going with Claude Code.

I came from prototyping and building apps in v0 and Replit. Your reasons for wanting to try Claude Code may be similar to mine:

• Your Apps are growing: your code base is getting bigger and debugging more frequent
• One place: to plan and track your project in full context of the code (Plan mode)
• LLM Knowledge: your stack is newer; you need more than a custom instruction (CLAUDE.md)
• Chat with GitHub: you’d love to be able to say “Claude Code, show me the last 5 commits”
• You want to know: you can change the way teams work, you want to feel it for yourself

You might think Claude Code is too hardcore for you—so did I. Surprisingly I find it easier than Cursor and the simplicity of working in a terminal wonderful. I did not expect either.

Generating code and slot machines are a lot of fun. With Claude Code, you will need a bit of patience to find your workflow and tweak your CLAUDE.md file as you go along. So patience to learn to stack the odds heavily into your favour. It works.

Claude Code is free with a claude.ai Pro account. Otherwise, leave ChatGPT and come over to the excellent Anthropic at $20/month. To increase your usage and access Opus you will need to upgrade. For me it is fine as it is.

If you don’t understand your tech stack

I could make Next.js apps in v0 without knowing much at all. If you want to move faster with Claude Code, slow down first. Learn how the code works and fits together, not so much the syntax. You will learn to instruct Claude Code more effectively.

To do this, I did two Next.js follow-along projects on YouTube in VSCode without AI. Yes, it was painful. Here is a collection of Next.js projects ¹ if your stack aligns to mine (see Appendix). If you haven’t used VSCode, you’ll learn as you follow along (ask Claude if you get stuck).

A boring investment that pays off greatly.

Get Going: Claude Code QuickStart

This is what I did, and assuming you are past the above, a simple plan that works:

Setup:

• IDE: The obvious choices are VSCode (free) or Cursor if you have it already
• Subscribe: To claude.ai Pro for $20/month to get Claude Code for free
• Prompt Improver: You get access with your subscription (more on that later)

Claude Code, it’s not difficult –
it’s wonderful:

1. Watch the workflow: Watch this 77-minute Claude Code Project ² (ignore the stack). Ask questions by uploading the XML transcript to a Claude chat. Ignore any download warnings or copy/paste to Notepad
2. Install Claude Code: Follow the Claude Code Setup ³ docs. Windows users need WSL. If stuck, reference the docs in a Claude chat, then install the Claude Code IDE Extension ⁴
3. Read this well: Claude Code: Best Practices for Agentic Coding ⁵ (twice)
4. Build an App: Go back to Step 1 and either build what the demo showed (but in your own stack) or create a simple ToDo list app. Use the transcript in chat to ask questions and generate the PRD retrospectively.
5. Mimick the masters: Watch this by Anthropic and try in your app Mastering Claude Code in 30 minutes ⁶
6. Try More: examples of issuing clear instructions for Common Workflows ⁷

Optional: If you are using VSCode, having an extension like Continue.dev (or Cline) comes in very handy. Free to use, but you need to create an Anthropic API key. This will also help with better auto-completion. You can also use your API key in Claude Code itself, I’ve heard it’s expensive. When I hit my usage limits, I just think or do something else.

My CLAUDE.md (lots of effort)
and other docs:

• Initialise CLAUDE.md: I use just one CLAUDE.md file. To bootstrap your first version → open project in your IDE → Ask Claude Code “tell me all about this project” → then run /init
• Start small, incrementally add (and delete): Every time I add a rule / example / best practice to CLAUDE.md, I make myself test it. If I can’t think how, I ask Claude Code “what could you do in order to test that my new rule xyz works, and what should we check?” This painful but worth it:

A common mistake is adding extensive content without iterating on its effectiveness. Take time to experiment and determine what produces the best instruction following from the model. [Anthropic Best Practices]

• Chat with your stack: I use DeepWiki ⁸ to find changes in my stack that postdate Claude 4 knowledge cutoff (Dec 2024). I add the needed info / examples into CLAUDE.md (eg Tailwind 4!)
• Prompt Improver: If I need stricter compliance, I put the CLAUDE.md file into Anthropic’s prompt improver. It is a powerful tool (I use it for everything). Click the “Generate” button and paste in.
• Product PRD: I still make a docs/prd.md. I refer to it when Claude Code has implemented a plan and I need to give direction for the next plan.
• Save the Plan: Like the workflow video, I get Claude in Plan mode (shift +tab) to write to my docs/plan.md.

I have bookmarked these articles to read later:
Basic Claude Code | Harper Reed and
How to Master Claude Code MD Files | Daniel Lynch

Claude Code and GitHub

Claude knows how to use the gh command line interface (CLI) to interact with GitHub for creating issues, opening pull requests, reading comments, and more. You can also use GitHub actions via /install-github-app. With this you can tag Claude from GitHub with “@claude” – see the docs here. For myself I only use `gh`, creating branches is fancy enough for me. Finally, Claude Code can also use GitHub API or MCP server. I think this when you want to do advanced analysis and/or other fancy things.

What’s Next — MCP

I have a constant feeling of being behind “everyone else.” I have not used Claude Code with any MCP’s yet. Here are the docs in case you are ahead of me. The first MCP servers I am going to try are:

1. Context 7: Up-to-date docs for LLMs
2. Puppeteer – for iterating on mocks as mentioned at this Anthropic presentation, 11:00 and 25:15.
3. Ask-Human – A bit unsure, but looks interesting (mentioned by O’Reilly Tech Radar, here)

I hope you have found confidence here — Claude Code is wonderful.

Appendix

My Next.js Tech Stack

This is the tech stack I focus on. Take a peek in your packages.json file of your last v0 or Replit app to get an idea of what you’ve been using. If the explanations don’t make sense below, see this great article⁹

THE FOUNDATION: CORE TECHNOLOGIES

Next.js 15.x	React framework for building full-stack web applications • With: App Router to provide simplified routing with better performance and server-side rendering
TypeScript	Adds type safety to JavaScript for catching errors during development • Provides better code completion and refactoring in your editor
Tailwind CSS 4.x	Style your UI with utility classes for typography, spacing, layout, etc. • E.g., text-lg font-bold (typography), p-4 (padding) • v4 simplifies theming and removes tailwind.config.ts
Shadcn/ui	Pre-built customisable UI components styled with Tailwind out of the box. • E.g., Button, Alert, Chart, Accordion, Date Picker, Sonner, etc. • Latest version styled with Tailwind 4.

PLUS MORE

Clerk Authentication	User auth with login, signup, and profile management – includes social auth (Google, etc.). • Now includes complete billing for B2C and B2B subscriptions.
Zustand State Management	Manage application state (user data, UI state, etc.) • Simpler alternative to Redux with better performance • I use as a “pre-step” to store data before using a DB • Think “smart local storage”
Drizzle or Prisma ORM	Maps database tables to TypeScript objects for type-safe data operations • Drizzle: feels like SQL • Prisma: more abstracted with extra features
Supabase or Neon SQL Database	Cloud databases for your app’s data • Supabase: Full backend (db, auth, file storage, edge functions, auto-generated APIs) • Neon: Focuses on being a database with instant scaling and branching (like Git for your data)
React Hook Form + Zod Forms	Build forms with validation that catches errors as you type • RHF: Handles form state, submission, and error tracking • Zod: Validates data (email format, required fields, etc.) with TypeScript • Work together via zodResolver, see shadcn guide

Main Resources Mentioned

1. Playlist of Next.js follow-along projects with Tailwind 4: here | YouTube ↩︎
2. Understand a simple Claude Code workflow: Build Flutter Apps FASTER with Claude Code | YouTube (77m) ↩︎
3. Set up Claude Code for your OS: Install, authenticate, and start using Claude Code | Anthropic Docs ↩︎
4. Add Claude Code to your IDE: Learn how to add Claude Code to your favourite IDE | Anthropic Docs ↩︎
5. Claude Code Best Practices for Agentic Coding | Anthropic Article ↩︎
6. Claude Code presentation by Anthropic Master Claude Code in 30 minutes | YouTube (30m) ↩︎
7. Claude Code Common Workflows with examples | Anthropic Docs ↩︎
8. AI Documentation and GitHub Repos you can talk to: DeepWiki ↩︎
9. Modern Next.js simple stack explanation: What Next.js Tech Stack to Try in 2025 ↩︎

---

• LinkedIn