20 Vibe Coding Project Ideas for Beginners (With Prompts)

Build a link-in-bio page for a freelance designer. Include: a circular profile photo placeholder, name and tagline, 6 link buttons with icons (Portfolio, Instagram, Twitter, Email, Substack, Booking), a dark gradient background (#0A0A0F to #1a1a2e), and smooth hover animations on the buttons. Use Tailwind CSS.

Build a habit tracker app with Next.js and Tailwind. Features: add/delete habits, check off habits daily, streak counter for each habit, a 30-day calendar heatmap showing completion, data stored in localStorage. Dark theme with green accents.

Build a tip calculator with: bill amount input, tip percentage buttons (10%, 15%, 18%, 20%, 25%, custom), number of people to split between, and live display of tip per person and total per person. Clean minimal design with Tailwind.

Build a Pomodoro timer app. Features: 25-minute work timer, 5-minute short break, 15-minute long break (after 4 pomodoros), visual circular progress ring, audio notification when timer ends, session counter, and settings to customise timer lengths. Dark minimal UI.

Build a minimal distraction-free writing tool. Include: a large textarea taking up most of the screen, live word count, character count, reading time estimate (based on 200 wpm), paragraph count, and a dark/light mode toggle. Font: Georgia or similar serif. Minimal chrome.

Build a personal budget tracker with Next.js. Features: add income and expense entries with amount, category (Rent, Food, Transport, Entertainment, Health, Other), and date. Show total income, total expenses, and balance. Display a category breakdown with percentage bars. Store in localStorage. Dark theme.

Build a recipe finder app. User inputs a list of ingredients they have. The app searches the MealDB API (https://www.themealdb.com/api.php) to find matching recipes. Display recipe cards with image, name, and ingredients. Clicking a card shows full instructions. Clean card-based layout with Tailwind.

Build a password generator. Options: length slider (8-64), toggles for uppercase, lowercase, numbers, symbols. Show generated password in large text, a "Copy" button with copy confirmation, a password strength indicator (Weak/Medium/Strong/Very Strong) with a colour bar, and a "Generate" button. Dark UI.

Build a SaaS landing page for "FlowDesk" — a project management tool for freelancers. Include: sticky nav with logo and CTA button, hero section with headline "Manage Projects. Not Spreadsheets.", 3 feature cards with icons, pricing section with 2 tiers (Free / Pro $19), FAQ accordion with 4 questions, and footer. Dark modern design.

Build a Markdown note-taking app. Left sidebar lists notes with title and date. Right side is a split view: top is a Markdown editor (textarea), bottom is live rendered HTML preview. Features: create, rename, delete notes, auto-save, full localStorage persistence. Use the "marked" library for Markdown parsing.

Build a URL shortener with Next.js and a simple JSON file as a database. Features: input long URL, generate a short code (6 random chars), copy short link, visit short link and get redirected to original, show a list of all shortened links with click counts. Use Next.js API routes.

Build a weather app using the Open-Meteo API (free, no key needed). User types a city name, geocode it using Open-Meteo geocoding API, then fetch and display: temperature, weather condition, humidity, wind speed, and a 5-day forecast. Use weather condition codes to show an emoji (☀️🌧️❄️ etc). Clean card UI.

Build a Kanban board with Next.js and @dnd-kit/core for drag and drop. Three columns: To Do, In Progress, Done. Features: add cards with a title, drag cards between columns, delete cards, card count per column. Store in localStorage. Dark theme.

Build a customisable countdown timer to an event. User sets the event name and target date/time. Display a large countdown showing Days, Hours, Minutes, Seconds with smooth live updates. When the countdown reaches zero, show a celebration message with confetti animation. Dark glassmorphism style UI.

Build a BMI calculator. Support both metric (kg/cm) and imperial (lbs/ft+in) with a toggle. Show calculated BMI value, BMI category (Underweight/Normal/Overweight/Obese) with colour coding, and a visual scale bar showing where the user falls. Minimal clean design.

Build a group expense splitter. Features: add people to a group, add expenses (name, amount, who paid, who shares it), and the app calculates the simplest set of payments to settle all debts. Show a summary like "Alex owes Jamie $23.50". Store in localStorage. Clean tabbed UI.

Build a typing speed test app. Show a random paragraph of text. User types in a box below it — highlight correct letters green, incorrect ones red in real-time. When finished, show: WPM, accuracy percentage, and time taken. Multiple difficulty levels (Easy/Medium/Hard). Dark terminal aesthetic.

Build a minimal CRM for freelancers with Next.js. Features: add contacts (name, company, email, phone, status: Lead/Active/Past), view all contacts in a sortable table, filter by status, click a contact to see full details and add notes, mark contacts as archived. localStorage persistence.

Build a quiz app using the Open Trivia DB API (https://opentdb.com/api.php). User selects category, difficulty, and number of questions. Show one question at a time with 4 answer options. Highlight correct/wrong answer on selection. Show final score with percentage and option to retry. Animated transitions between questions.