Quickstart Guide: Build Your First App in 5 Minutes
Learn how to create, test, and deploy a production-ready full-stack application using natural language prompts on CodewithChat.
1. Create a New Project
From your CodewithChat dashboard, click "New Project" or type your concept directly into the hero prompt bar. Choose whether you want to start from scratch or pick one of our optimized boilerplates (web apps, AI Wrapper, E-commerce, or Landing Page).
Choosing a template pre-configures authentication (Clerk), database (Supabase/Prisma), and modern UI components automatically.
2. Craft Your Initial Prompt
Describe the core utility, key screens, and data entities of your app. CodewithChat understands high-level business logic, user flows, and technical requirements simultaneously.
Build a modern micro-web app with:
1. Public wall where users can upvote feature requests and leave comments.
2. Admin dashboard with status toggles (Under Review, In Progress, Shipped).
3. Dark mode aesthetic with glassmorphism cards and smooth micro-animations.
4. Filter by category (Bugs, Features, Integrations) and sort by popularity.3. Preview & Test in Real-Time
Within seconds, CodewithChat scaffolds your multi-file project inside a WebContainer sandbox. Your application compiles and boots directly in your browser with full hot-reloading.
You can interact with buttons, forms, and navigation directly inside the live preview window without waiting for cloud rebuilds.
4. Iterate and Add Features
Use the conversational AI chat to refine styling, add new pages, integrate database models, or fix subtle edge cases. For instance: "Add a search bar at the top of the feedback wall with instant client-side filtering."
5. Deploy to Production
Once you are satisfied with your app, click "Deploy" to publish directly to Vercel or export the entire source code as a clean ZIP package. You own 100% of the generated code.
# After downloading ZIP, run locally:
npm install
npm run dev