A bookmark manager where you can save, tag, and search URLs. AI generates the database schema, backend API endpoints, and frontend — all from a single description. You'll also learn how to diagnose and fix the 20% of things AI gets wrong.
What Full-Stack Means (and Why It Matters)
A "full-stack" app has three layers:
- Frontend — what users see and interact with (HTML, CSS, JavaScript in the browser)
- Backend — the server that handles logic and data (Node.js, Python, etc.)
- Database — where data is stored persistently (SQLite, PostgreSQL, etc.)
Days 1–3 used only a frontend (single HTML files). Today we add a backend and database, which means your app's data survives server restarts, can be accessed from multiple devices, and can scale to real users.
Tool for today: We'll use Replit for this lesson because it handles server setup automatically. Go to replit.com and create a free account if you haven't already.
Building the Bookmark Manager
In Replit, click "Create Repl" → choose "Node.js" as the template → name it bookmark-manager. Then open the AI assistant (it's built into Replit) and paste this prompt:
Build a full-stack bookmark manager with Node.js + Express backend
and SQLite database. Single page frontend served from Express.
Features:
- Save a bookmark: URL, title (auto-fetched from URL if possible), and tags
- Display all bookmarks in a clean card grid, newest first
- Tag filtering: click a tag to see only bookmarks with that tag
- Search bar: filter bookmarks by title or URL in real time
- Delete button on each bookmark card
- Favicon display next to each bookmark's domain
Backend (Express + SQLite via better-sqlite3):
- GET /api/bookmarks — return all bookmarks
- POST /api/bookmarks — add a new bookmark
- DELETE /api/bookmarks/:id — delete a bookmark
- GET /api/bookmarks/search?q= — search bookmarks
Database schema:
- id (INTEGER PRIMARY KEY AUTOINCREMENT)
- url (TEXT NOT NULL)
- title (TEXT)
- tags (TEXT — comma-separated)
- created_at (DATETIME DEFAULT CURRENT_TIMESTAMP)
Frontend (served from Express as static file):
- Sticky header with app name and a search bar
- "Add Bookmark" button that opens a modal form
- Responsive card grid (3 col desktop, 1 col mobile)
- Tag cloud sidebar showing all unique tags with counts
Include a package.json. Initialize the database tables on startup if they don't exist.Replit's AI will generate multiple files: package.json, server.js (the backend), database.js (database setup), and public/index.html (the frontend). Click Run. Replit handles the Node.js installation automatically.
When Vibe Coding Goes Wrong
Full-stack apps have more moving parts, which means more things can break. This is where most beginners give up. Don't. Here's the debugging framework:
Step 1: Read the error message
AI-generated code fails in predictable ways. Look at the error in the console (Replit shows this in the Shell tab). The most common errors:
# Error: Cannot find module 'better-sqlite3'
# Fix prompt: "Run npm install better-sqlite3 and add it to package.json"
# Error: SQLITE_ERROR: no such table: bookmarks
# Fix prompt: "The database table isn't being created on startup.
# Make sure initializeDatabase() is called before the server starts listening."
# Error: POST /api/bookmarks returns 500
# Fix prompt: "The POST endpoint is returning a 500 error.
# Add console.log statements to log the request body and the SQL query
# so I can see what's failing."Step 2: Describe the problem precisely
Vague prompts produce vague fixes. Be specific:
Weak: "It's broken."
Strong: "When I click Add Bookmark, the modal closes but no new card appears in the grid. The network tab shows the POST request returned 201. The frontend fetch call isn't updating the UI after a successful response."
The more specific you are, the faster AI fixes it. Copy the exact error message and paste it into the prompt.
The 80/20 rule of vibe coding
AI reliably gets you to 80% complete. The remaining 20% — edge cases, subtle bugs, database constraints, security hardening — requires you to describe problems clearly and iterate. That 20% is where you actually learn what's happening under the hood. Don't skip it.
Adding Features with Prompts
Once the base app works, extend it with these prompts:
# Add import/export
Add a button to export all bookmarks as a JSON file,
and an import button to load bookmarks from a JSON file.
# Add collections
Add a "Collections" feature: users can create named collections
and add bookmarks to them. Add a Collections sidebar.
# Add duplicate detection
Before saving a new bookmark, check if the URL already exists
in the database. If it does, show a warning instead of saving a duplicate.Add authentication
- Add a simple login system with a username and password (store hashed password in the database)
- Make bookmarks private to each user
- Use sessions (express-session) to keep users logged in
Day 4 Complete
- Built a full-stack app with a database, API, and frontend from a single description
- Understand the three layers: frontend, backend, database
- Learned the debugging framework: read error → describe precisely → iterate
- Understand the 80/20 rule: AI gets you there fast, you refine the last 20%
Take it further in person
The bootcamp covers production databases, authentication, deployment pipelines, and real-world AI app architecture.
See Bootcamp Details — $1,490One day left.
Tomorrow you build something you'll actually use and ship it to production. This is the whole point.
Day 5: Shipping a Real Product