32dots HEIDELBERG AI
EXTENDED COURSE

v0

Real apps to build with v0, each with a starter prompt to paste in — landing pages, dashboards and data-driven tools. v0 generates React + Next.js (shadcn/ui + Tailwind), wires one-click databases and AI, gives you a production-accurate preview and a live URL on Vercel — and every project is standard Next.js code you own on GitHub.

1Lessons10hands-on, ~15–25 min each
2Cheat sheetcopy-ready expressions
3Examples44what people built

CRM & sales1

v0 AI-native SME Small biz
Course starter

Internal CRM admin panel

A back-office UI to manage customers: a data table with search, filters, status badges and a detail drawer.

A usable internal tool shell your ops team can live in.

Try it yourself

Design an internal CRM admin panel with a sidebar, a customers data table with search, column sorting, status badges and pagination, bulk actions, and a slide-over detail panel showing the selected customer.

Dashboards & analytics4

v0 Founder AI-native SME
In the gallery

Product analytics dashboard

An admin dashboard UI with KPI cards, line and bar charts, a recent-activity feed and a sidebar nav.

A real-looking internal dashboard shell you can wire to your own data later.

Try it yourself

Create a product analytics dashboard with a left sidebar, top KPI cards (active users, revenue, churn, conversion), a large revenue line chart, a signups-by-source bar chart, and a recent events table.

v0 Scientist AI-native SME
Course starter

Interactive data explorer

A chart-driven UI where filters and a dropdown re-render the visualisation against a dataset.

A hands-on way to let people poke at your data instead of reading a static chart.

Try it yourself

Create an interactive data explorer with a metric dropdown, a date-range filter, and a category selector that together drive a responsive line chart and a sortable data table beside it.

v0 Small biz AI-native SME
Course starter

Expense tracker dashboard

A finance UI with spend-by-category charts, a transactions table, budget bars and monthly totals.

A clear money overview for a solo business or small team.

Try it yourself

Design an expense tracker dashboard with monthly total and budget-remaining cards, a spend-by-category donut chart, a category budget progress list, and a searchable, filterable transactions table.

v0 Creator AI-native SME
Course starter

Marketing campaign dashboard

A campaign performance UI with channel KPIs, spend vs revenue charts and a per-campaign table.

A reporting surface that makes campaign results legible.

Try it yourself

Create a marketing campaign dashboard with KPI cards (impressions, clicks, conversions, ROAS), a spend-versus-revenue area chart, a channel breakdown bar chart, and a table of campaigns with status and CTR.

Booking & scheduling2

v0 Small biz
Course starter

Appointment booking page

A scheduling UI with a calendar, available time-slot picker and a booking confirmation form.

A clean booking front-end for a salon, clinic or consultancy.

Try it yourself

Design an appointment booking page with a month calendar, a column of available time slots for the selected day, a service picker, a customer details form, and a confirmation summary card.

v0 Scientist AI-native SME
Course starter

Lab equipment booking tool

An internal scheduler for shared instruments showing availability, a booking form and a calendar view.

Stops the spreadsheet chaos around shared lab gear.

Try it yourself

Create a lab equipment booking tool with a list of instruments, a weekly calendar showing existing bookings, a slot-reservation form with user and purpose fields, and a “my bookings” panel.

Internal tools & ops7

v0 Founder AI-native SME
In the gallery

Auth screens (sign up & log in)

A matched pair of authentication screens with email/password, social buttons and a split-image layout.

Professional auth UI you can drop into any Next.js app.

Try it yourself

Create sign-up and log-in screens with a split layout: form on the left, brand imagery on the right. Include email and password fields, “continue with Google” and “continue with GitHub” buttons, and a forgot-password link.

v0 Creator AI-native SME
Course starter

Design system starter

A component showcase page with buttons, inputs, cards, badges and typography in a consistent theme.

A living style guide you can hand to a team and build from.

Try it yourself

Build a design system showcase page presenting buttons in all states, form inputs, cards, badges, alerts, and a typography scale, all using a single cohesive colour palette with light and dark variants.

v0 AI-native SME Founder
Course starter

Kanban task board

A drag-friendly board with columns, task cards, labels, assignees and an add-task modal.

A working project board UI for a small internal tool.

Try it yourself

Build a Kanban board with columns To Do, In Progress, and Done, draggable task cards showing title, label colour, and assignee avatar, a card-count per column, and an “add task” modal.

v0 Founder AI-native SME
In the gallery

AI chat interface

A chatbot UI with a message thread, streaming-style assistant bubbles, an input bar and suggested prompts.

A clean chat front-end ready to connect to any model API.

Try it yourself

Build an AI chat interface with a scrollable message thread, alternating user and assistant bubbles, a typing indicator, suggested-prompt chips above the input, and a textarea with a send button.

v0 Founder AI-native SME
Course starter

Multi-step onboarding wizard

A guided setup flow with a progress stepper, per-step forms and a finish summary.

A smooth first-run experience that lifts activation.

Try it yourself

Design a multi-step onboarding wizard with a top progress stepper, steps for account details, team setup, and preferences, back/next navigation with validation, and a confirmation screen at the end.

v0 AI-native SME
Course starter

Feature flags admin UI

An internal control panel to toggle features per environment with descriptions and audit info.

A real admin surface for an internal platform tool.

Try it yourself

Build a feature flags admin UI with a searchable table of flags, a toggle switch per flag, environment tabs (dev, staging, prod), a description and last-changed column, and a “create flag” dialog.

v0 Small biz AI-native SME
Course starter

Inventory management panel

A stock-control UI with a products table, quantity badges, low-stock alerts and an edit dialog.

A no-spreadsheet way for a shop to watch stock.

Try it yourself

Design an inventory management panel with summary cards (total SKUs, low stock, out of stock), a products table with stock-level badges and low-stock highlighting, search and category filters, and an edit-stock dialog.

Content & marketing12

v0 Founder Creator
In the gallery

SaaS landing page with dark mode

A polished marketing homepage for a software product, with a hero, feature grid, pricing, testimonials and a dark mode toggle.

A launch-ready page you can publish to Vercel the same afternoon, no designer needed.

Try it yourself

Design a clean SaaS landing page with a bold hero, a three-column feature grid, a pricing table with monthly/yearly toggle, customer testimonials, an FAQ, and a dark mode switch. Modern, lots of whitespace.

v0 Founder
Course starter

Investor one-pager site

A single-scroll web page that tells your startup’s story: problem, solution, traction, team and a contact CTA.

A link you can drop into an investor email instead of yet another PDF deck.

Try it yourself

Build a single-page startup pitch site with sections for the problem, our solution, market size, traction metrics with animated counters, the founding team, and a “Book a call” call to action.

v0 Creator
Course starter

Personal portfolio site

A minimalist portfolio with a hero intro, project gallery, about section and contact links.

A sharp personal site online in minutes that actually looks designed.

Try it yourself

Design a minimalist personal portfolio with a short hero intro, a responsive grid of project cards with hover effects, an about section, and social links in the footer. Elegant typography.

v0 Scientist
Course starter

Research lab website

An academic group site with sections for research themes, publications, team members and news.

A credible lab presence without fighting an old university CMS.

Try it yourself

Create a university research lab website with a hero stating our research focus, a grid of research themes, a publications list with filter by year, a team page with photo cards, and a news feed. Clean and academic.

v0 Creator Small biz
Course starter

Newsletter signup flow

A polished email capture flow: a landing hero, signup form with validation, and a success state.

A high-converting capture page you can point ads or social traffic at.

Try it yourself

Build a newsletter signup landing page with a compelling headline, a single email input with inline validation, a privacy reassurance line, and an animated thank-you success state after submitting.

v0 Small biz
Course starter

Restaurant site with menu

A warm restaurant homepage with hero photography, a categorised menu, hours, location map area and reservations CTA.

A tasteful single page that replaces a tired template site.

Try it yourself

Create a restaurant website with a full-width hero photo, an about blurb, a menu organised by category with prices, opening hours, a location section, and a “Reserve a table” button. Warm, appetising design.

v0 Creator Founder
In the gallery

Event / conference landing page

A landing page for an event with a countdown, agenda, speaker grid, venue and a register CTA.

A registration-ready event page you can ship before tickets go live.

Try it yourself

Design a conference landing page with a hero showing date and location, a live countdown timer, a schedule timeline, a grid of speaker cards, a venue map section, and a prominent “Register now” button.

v0 Creator
Course starter

Blog / magazine layout

A content site with a featured article, a post grid, categories and a clean reading view.

An editorial-quality blog front-end without wrestling a theme.

Try it yourself

Create a magazine-style blog homepage with a large featured article, a grid of post cards with cover images and read time, a category nav bar, and a newsletter strip in the footer.

v0 Creator Small biz
Course starter

Creative agency website

A bold agency site with a striking hero, services, a case-study showcase and a contact section.

A site that signals craft to prospective clients.

Try it yourself

Create a creative agency website with an oversized typographic hero, a services list, a portfolio of case studies with large imagery, a client logo strip, and a contact form. Bold, confident, modern.

v0 Creator
Course starter

Link-in-bio page

A mobile-first profile page with avatar, bio, themed link buttons and social icons.

A custom link hub that looks better than the off-the-shelf ones.

Try it yourself

Design a mobile-first link-in-bio page with a centred avatar, name and bio, a vertical stack of large tappable link buttons, social icons, and a subtle animated gradient background.

v0 Founder
In the gallery

Product waitlist page

A pre-launch landing page with a benefit-driven hero, email capture and a referral/position teaser.

A buzzy waitlist page to validate demand before you build.

Try it yourself

Build a pre-launch waitlist page with an intriguing hero, a single email signup, a “you’re #N in line” success state, social share buttons to move up the queue, and a sleek minimal design.

v0 Creator Small biz
Course starter

Social content calendar

A planning tool with a month grid, scheduled post cards by platform, and a compose drawer.

A visual planner that replaces a messy posting spreadsheet.

Try it yourself

Build a social content calendar with a monthly grid, draggable post cards showing platform icon, caption preview and scheduled time, platform colour coding, and a side drawer to compose a new post.

Marketplaces & directories3

v0 Small biz
Course starter

Property listings page

A real-estate browse UI with filterable listing cards, photos, price and a map sidebar area.

A polished listings front-end for an agent or rental host.

Try it yourself

Design a property listings page with filters for price, bedrooms and location, a grid of listing cards showing photo, price, beds/baths and address, a favourite heart toggle, and a map sidebar placeholder.

v0 AI-native SME
Course starter

Company team directory

An internal people directory with searchable member cards, role, department and contact details.

A friendly internal “who’s who” for a growing team.

Try it yourself

Create a company team directory with a search bar, department filter chips, and a grid of member cards showing photo, name, role, department and email, plus a detail modal on click.

v0 AI-native SME Founder
In the gallery

Careers / job board page

A careers page with open-role cards, filters by team and location, and a role detail view.

A hiring page that reflects well on the company.

Try it yourself

Build a careers page with an employer-brand hero, filters for department, location and remote, a list of open-role cards showing title, team and location, and a role detail page with description and an apply button.

Research & data tools2

v0 Scientist
Course starter

Study recruitment landing page

A participant-facing page explaining a study, eligibility criteria and a screening signup form.

A trustworthy front door for recruiting study participants.

Try it yourself

Create a research study recruitment landing page with a clear plain-language summary, an eligibility checklist, what participation involves, compensation info, and a short screening signup form. Calm, trustworthy tone.

v0 Scientist
Course starter

Conference abstract microsite

A shareable page for a single paper or poster: abstract, figures, authors, and links to data and code.

A modern alternative to a static PDF when sharing your work.

Try it yourself

Create a microsite for a single research paper with the title and authors, a structured abstract, a figures gallery with captions, key findings as highlight cards, and buttons to the PDF, dataset and code repository.

Commerce & payments4

v0 Small biz Creator
In the gallery

E-commerce product page

A storefront product detail page with image gallery, variant picker, price, reviews and an add-to-cart bar.

A conversion-focused product page you can adapt for any shop.

Try it yourself

Build an e-commerce product page with a thumbnail image gallery, a size and colour selector, price with a sale badge, star ratings and reviews, an add-to-cart button, and a sticky buy bar on mobile.

v0 Founder AI-native SME
In the gallery

Pricing page with plan compare

A pricing section with tiered plan cards, a monthly/annual toggle and a feature comparison table.

A pricing page that makes the upgrade choice obvious.

Try it yourself

Design a pricing page with three plan cards (Starter, Pro, Enterprise), a monthly/annual billing toggle that updates prices, a “most popular” highlight, and a detailed feature comparison table below.

v0 Small biz
Course starter

Invoice generator UI

A form-driven invoice builder with line items, totals, tax and a live preview that looks print-ready.

A self-serve invoicing front-end for a solo operator.

Try it yourself

Build an invoice generator with a form for client details and editable line items (description, qty, price), automatic subtotal, tax and total calculation, and a clean print-ready invoice preview beside the form.

v0 Founder Creator
Course starter

Crowdfunding campaign page

A campaign page with a hero video area, funding progress bar, reward tiers and backer count.

A persuasive campaign front-end ready to drive pledges.

Try it yourself

Design a crowdfunding campaign page with a hero media area, a funding progress bar with amount raised and goal, days-left and backer counts, a list of reward tier cards with a “back this” button each, and an updates section.

Forms, surveys & feedback2

v0 Scientist AI-native SME
Course starter

Survey results dashboard

A data-viz dashboard summarising survey responses with charts, distributions and a respondents breakdown.

A clear visual readout of your study or feedback data.

Try it yourself

Build a survey results dashboard with summary stat cards, a Likert-scale stacked bar chart, a demographics donut chart, a response-over-time line chart, and a filterable table of individual responses.

v0 Founder AI-native SME
In the gallery

Feature request / feedback board

A public board where ideas are listed, upvoted and tagged by status (planned, in progress, shipped).

A transparent roadmap surface that turns users into contributors.

Try it yourself

Create a feature request board with a list of idea cards each showing title, vote count with an upvote button, a status badge, and a comment count, plus filter tabs by status and a “submit idea” button.

Knowledge & docs5

v0 Scientist
Course starter

Publications explorer

A searchable, filterable interface for a list of papers, with tags by topic, year and author.

A browsable paper list that beats a static reference dump.

Try it yourself

Build a publications explorer UI: a search bar, filters for year, topic and author, and a list of paper cards each showing title, authors, venue, year, and links to PDF and DOI. Sortable by date or citations.

v0 Founder AI-native SME
Course starter

Product changelog page

A timeline-style changelog with dated entries, version tags and feature/fix labels.

A “what’s new” page that keeps users in the loop and looks intentional.

Try it yourself

Build a product changelog page with a vertical timeline, entries grouped by date, version badges, coloured tags for New, Improved and Fixed, and a subscribe-to-updates input at the top.

v0 AI-native SME Founder
Course starter

Help center / docs UI

A support hub with search, category cards, a sidebar article nav and a clean article reading layout.

A self-serve support surface that deflects tickets.

Try it yourself

Create a help center with a big search bar in the hero, a grid of topic category cards, a sidebar with collapsible article navigation, and a clean article page with a table of contents and “was this helpful” feedback.

v0 Creator AI-native SME
In the gallery

Online course platform UI

A learning UI with a course catalog, a lesson player layout with a sidebar curriculum and progress.

A credible e-learning front-end for a course creator.

Try it yourself

Build an online course platform with a catalog grid of course cards, and a lesson view that has a video player area, a collapsible curriculum sidebar with completion checkmarks, lesson notes, and a progress bar.

v0 AI-native SME
Course starter

Internal knowledge base UI

A company wiki with global search, a folder/space sidebar, recent docs and a clean document page.

A tidy home for internal know-how as a team scales.

Try it yourself

Build an internal knowledge base with a prominent search, a sidebar of spaces and nested pages, a recently-updated section, and a document page with breadcrumbs, a table of contents, and author/last-edited metadata.

Trackers2

v0 Scientist
Course starter

Grant & funding tracker

An internal tool to track grant applications with status, deadlines, amounts and a summary overview.

A tidy way for a lab to see funding pipeline at a glance.

Try it yourself

Build a grant tracking tool with summary cards (total awarded, pending, deadlines this month), a table of applications showing funder, amount, status badge and deadline, and filters by status and year.

v0 Creator Small biz
Course starter

Habit & fitness dashboard

A personal tracking dashboard with streaks, progress rings, weekly charts and a goals list.

A motivating progress UI for a coaching product or personal app.

Try it yourself

Design a habit and fitness dashboard with circular progress rings for daily goals, a current-streak counter, a weekly activity bar chart, and a checklist of today’s habits with satisfying check animations.