V0 by Vercel: Build an app in 10 minutes

Turning an idea into a working app takes many days, but this can be done in minutes with v0. v0 by Vercel is an AI-powered tool that generates production-ready React components and full-stack apps from natural language.

In this article, we’ll solve the problem of teachers spending hours creating spelling lists, grading assignments, and tracking student errors. We’ll build a full-stack spelling trainer with AI prompts, Supabase backend, and live dashboards.

What is v0 by Vercel?

v0 by Vercel is an AI-powered generative UI tool that converts natural language prompts into production-ready React and Next.js components with Tailwind CSS styling. Instead of manually coding every button or layout, we describe what we want, and v0 instantly generates editable, production-grade code that can be exported and refined locally.

v0 stands out for how quickly it helps teams visualize and test ideas. Here’s what makes it powerful:

• Rapid prototyping: Create and iterate on app interfaces in real time, skipping wireframes and mockups.

• Modern stack defaults: Every project uses React, Next.js, Tailwind, and Vercel’s best practices out of the box.

• Prompt-to-code generation: Turn design ideas or feature descriptions into functional code blocks instantly.

• Easy export: Move your generated code to your local environment with the “Add to Codebase” feature.

• Collaboration-ready: Designers, developers, and PMs can co-create without context switching.

While v0 is powerful, it’s important to approach it with realistic expectations. Generated code should always be reviewed for logic, security, and performance before shipping to production.

Now that we know what v0 can do, let’s build something useful with it.

Building a spelling trainer app using v0

We’ll be building a comprehensive spelling trainer app that teachers can use to assign custom word lists, students can practice with audio feedback, and instructors can monitor mistakes in real time.

Step 1: Project setup and sign-in

To get started, head to v0 website and sign in using your GitHub, Google, or email account. Once logged in, select “New Chat”.

Step 2: Prompting v0 to build the base app structure

The more specific you are with your prompts about structure, flow, and user interaction, the better the generated code. This prompt creates the complete app layout with all main screens, navigation, and user flows:

Build a full-stack spelling trainer web app in Next.js: 

1. Login page with role selection (Teacher/Student) 
2. Teacher Dashboard with list management and "+ New List" button 
3. Student Dashboard with sidebar to choose weekly tests 
4. Practice interface with progress bar, word display, input, and performance stats 
5. Session Summary with accuracy, correct/incorrect words, and action buttons 
6. Bottom navigation (Teacher/Student Dashboard + Logout) 
7. Blue and white color scheme, role-based access control 

Copy to clipboard
Copy to clipboard

Here’s a sample output for this prompt:

Step 3: Detail each screen and components

Now let’s refine each screen with specific details about layout, interactions, and visual elements:

Refine each screen: 

- Teacher Dashboard: Grid card layout with edit/stats buttons, modal form for new lists, top stats summary 
- Student Dashboard: Sidebar with selectable weeks, practice session in main area 
- Practice Session: Progress bar, large word display with speaker icon, text input, performance stats with correct/incorrect word lists 
- Session Summary: Success message with confetti (if accuracy > 80%), large accuracy number, green/red word lists, three action buttons 

Copy to clipboard
Copy to clipboard

Now we have a complete app structure from our prompts. But what if the colors feel off, or the layout doesn’t match our vision? That’s where iteration comes in.

Step 4: Revising prompts and iteration

Instead of regenerating from scratch, you refine incrementally. Here are 2-3 real iterations you’d make on the practice session component:

1. We might notice the word display is too small or the instructions are unclear. Send this follow-up prompt:

Make the word display larger (use a bigger font size, like 3xl or 4xl). Move the speaker icon next to the word so it's inline, not on a separate line. Add a small gray instruction text below: "Click the speaker to hear it again." 

Copy to clipboard
Copy to clipboard

2. We can also enhance the visual feedback for keyboard navigation:

Add visible focus rings to all buttons and the text input (use a blue outline, 2px). Make the focus ring clear even on colored backgrounds. When a user tabs to the submit button, it should have a distinct outline and maybe a slight background color change. 

Copy to clipboard
Copy to clipboard

3. If you want your app to support both light and dark modes with different color palettes, send this prompt:

Add a theme toggle (sun/moon icon) in the header that switches between light and dark modes.  
- Light mode: white backgrounds with dark text and blue primary actions.  
- Dark mode: dark gray backgrounds with light text and cyan accents.  

Copy to clipboard
Copy to clipboard

Each iteration takes a few seconds, and we go from good to great without touching a single line of code.

Next, it’s time to connect a real database so your spelling lists and student progress actually persist.

Step 5: Integrating Supabase database

v0 generates great frontends, but our app needs a backend to store spelling lists, user data, and practice sessions. Supabase is a PostgreSQL database with built-in authentication and APIs. Follow these steps to setup Supabase:

1. Start by giving this prompt to v0 to integrate Supabase:

Integrate Supabase into the spelling trainer app: 

1. Generate SQL code to create these tables: 
  - teachers (id, name, email, created_at) 
  - students (id, name, email, created_at) 
  - spelling_lists (id, teacher_id, name, word_count, due_date, created_at) 
  - list_words (id, list_id, word, created_at) 
  - practice_sessions (id, student_id, list_id, started_at, completed_at, accuracy_percent) 
  - spelling_attempts (id, session_id, word_id, student_answer, is_correct, created_at) 

2. Generate seed/dummy data with: 
  - 1 teacher and 2 students 
  - 3 spelling lists (Week 1, Week 2, Week 3) 
  - 8-15 words per list 
  - 3 practice sessions with varying accuracy scores (75%-92%) 

3. Connect Teacher Dashboard to fetch and display real spelling lists and student accuracy stats 

4. Connect Student Dashboard to fetch assigned word lists and save practice attempts 

5. Replace all hardcoded data with live database queries 

6. Add error handling for all database operations 

Copy to clipboard
Copy to clipboard

Once this is executed, we’ll be prompted to install the Supabase integration. Select “Install” to perform this operation.

2. This is going to take you to Vercel to create a database project there.

3. Once that is done, visit the Supabase website and the database that we just created should be present here.

4. In Supabase, select “Connect”, then copy your “Project URL” and “Project Anon Key”

5. Add these keys under the “Vars” option in v0:

6. v0 will create some .sql files which we need to copy and paste inside the “SQL Editor” tab in Supabase.

7. We can check if the tables are created in the “Table Editor” tab which is just above the “SQL Editor”.

8. Lastly, for testing purposes we’ll disable the “Confirm email” option in Authentication, so that we can test with dummy email ids for now.

Step 6: Test the application

Now that your database is set up and v0 has generated the connection code, verify everything works within v0’s preview. Confirm the following:

• Go to Teacher Dashboard and create a new spelling list, then check Supabase Table Editor to confirm it was saved

• Navigate to Student Dashboard and click a weekly test to ensure words load from the database

• Start a practice session, answer a few words, and click “Submit Answer”

• Check Supabase’s practice_sessions and spelling_attempts tables to confirm your attempts were saved

• Refresh the preview page and verify your session data persists

But can you actually run this code locally and keep building on your own machine?

How to run the v0 code locally

v0 creates finished Next.js projects that you can export and execute locally. In v0, choose “Add to Codebase” to receive an npx command that builds a local project with all of your generated code, dependencies, and folder structure already configured.

Run this npx command on your IDE:

You might need to install dependencies with npm install. Once done, launch the development server on localhost:3000 with npm run dev. You now have complete control over how your app functions, just like it did in the v0 preview.

By operating locally, adding custom logic, integrating more libraries, debugging readily, and confidently deploying to production are all made possible. You can now change any part of the codebase and are not restricted to the environment of v0.

You now own the entire codebase and can evolve it as your app grows. Now, let us also look at some features of v0.

Features of Vercel v0

By combining AI-powered UI generation with modern web frameworks, v0 eliminates the friction between idea and implementation. Here’s what makes v0 powerful:

• Rapid UI Scaffolding via Natural Language: Describe what you want in plain English and v0 generates production-ready components in seconds.

• Modern Frontend Defaults: Every component v0 generates uses React, Next.js, Tailwind CSS, and shadcn/ui. These are industry-standard tools that follow best practices. - Add to Codebase for Local Development: Generate your entire app, then click “Add to Codebase” to export this locally with proper folder structure, environment setup, and git integration.

• Iterative Refinement: Chat-based workflow lets you request changes without regenerating from scratch. Tweak colors, adjust layouts, add features.

• Real-Time Preview: See your changes live as you iterate. No waiting for builds, no deployment cycles.

• Built-in Component Library: Access to shadcn/ui components means consistent, accessible, and customizable UI elements that just work together.

Let’s see how the users are actually putting v0 to practice to solve real problems.

Use cases of v0

From educators building learning platforms to businesses tracking analytics, v0 accelerates development and reduces time-to-market. Here’s how teams are using it:

• Educational Tools: Interactive learning platforms, spelling trainers, quiz applications, and assessment dashboards that educators can build and iterate on in hours instead of weeks.

• Business Dashboards: Sales dashboards, analytics platforms, and HR tracking systems that help teams visualize data and track metrics without lengthy development cycles.

• AI-Powered Applications: Chatbots, content generators, data insight apps, and recommendation engines that combine v0’s fast UI scaffolding with powerful AI APIs.

• Internal Tools: Admin panels, task trackers, team management UIs, and productivity dashboards that increase organizational efficiency without dedicated frontend developers.

• Marketing and Product Demos: Landing pages, product prototypes, pitch presentations, and MVPs that validate concepts and gather feedback within hours instead of weeks.

Conclusion

v0 by Vercel is an AI-powered tool that turns your ideas into working apps in minutes. You describe what you want in plain English, and v0 generates production-ready React code complete with modern frameworks, databases, and deployment-ready features. No more weeks of back-and-forth between designers and developers. No more hours spent writing boilerplate code. Just faster, smarter building that lets you focus on solving real problems instead of writing repetitive code.

The real power of v0 comes from knowing how to ask it the right questions. If you want to explore prompt engineering and learn how to communicate effectively with AI tools, check out Codecademy’s Learn Prompt Engineering course.

Frequently asked questions

1. What can Vercel v0 do?

v0 converts natural language prompts into production-ready React and Next.js components. It generates layouts, connects to databases, creates API routes, and exports full-stack projects with complete code control.

2. Is v0 by Vercel free?

v0 offers a free tier with limited messages per day. The free plan is perfect for prototyping and learning. Paid plans unlock more messages, priority support, and higher usage limits for teams and production use. Check the v0 pricing page for current plans and features.

3. Can I upload my project to v0?

Yes. v0 supports GitHub integration and accepts screenshots or Figma designs as references to generate code from visual inputs.

4. Can v0 access the internet?

v0 can search the web and integrate with external APIs and databases like Supabase. Generated code runs on your infrastructure or Vercel’s platform.

5. Does v0 use ChatGPT?

v0 uses Claude (Anthropic’s AI model) optimized for code generation, not ChatGPT. It’s designed specifically for understanding design intent and generating production-quality frontend code.