Imagine vibe-coding a website you can show friends, drop in Discord, maybe even put on your resume. Not a billion-user platform (yet). Not a perfect website. Just the holy grail loop: someone posts, someone else sees it, someone else reacts, and boom — you’ve built something you can now optimize & monetize.
That’s vibe coding. It’s about creating a small, useful product, testing it with real people, and learning faster than endless tutorial-watching ever allows.
And yes — AI is your coding buddy here. You can use it to write code, explain errors, or even build features. But we’re not paying for fancy customer-facing AI services inside our app yet.
Yes, this is an app — an app with a web platform.
We’re using free tools until we know this thing actually works.
Before you start…
Grab a piece of paper (or open Notes) and write down three things:
Promise – one sentence describing what your app does. We’re gonna go with “A place where people in my friend group can post random thoughts and vote on the funniest ones” in this article as an example.
Constraints – what you absolutely will NOT do this week. Example: No photos, no links, no notifications, no user profiles, only one level of comments.
Scope – exactly what you will build:
- People can sign up with email/password
- People can post text (like a tweet, but longer)
- People can see all posts on one page
- People can upvote posts
- People can comment on posts (just one reply level)
- People can delete their own posts
It may seem like a mysterious process, but think of it as a website that takes data and displays it. Think in terms of CRUD.
What is CRUD? CRUD stands for Create, Read, Update, Delete. Most websites are actually don’t veer from this simple methodology. It’s how most of the websites you use work.
This document is your north star. When you get excited about adding features (and you will), check this list. Not on here? Save it for week two.
Day 1: Plan Like a Pro — Endpoints, Database, Screens
Don’t code yet. Seriously. Planning saves you from rewriting everything on day 5.
What Are Endpoints?
Think of endpoints like doors into your website. When someone clicks “Submit Post,” your app sends a message through a specific door that handles post creation. Here are your doors:
GET yourwebsite.com/posts — “Hey app, show me all the posts”
POST /posts — “Hey app, save this new post I wrote”
POST /votes — “Hey app, I’m upvoting this post”
POST /comments — “Hey app, save this comment on this post”
DELETE /posts/:id — “Hey app, delete my post”
(GET, POST, and DELETE are HTTP verbs — learn more at w3schools.)
That :id thing? It’s like a locker number. So /posts/47 means “do something with post number 47.” When someone wants to delete their post, the app needs to know WHICH post to delete.
What if user A tries to delete user B?
Matter of fact, how can you assume good intentions from users while vibe coding?
The sad answer is you can’t. That is why you must “sanitize” data, protect against XSS (cross-site scripting), and implement CSRF.
These concepts are too much to go into in this article, but be sure to ask your AI for a security audit per file or flow. Make sure you’re covered.
For each endpoint, write down:
- Input: What information comes in? (post text, user who wrote it, timestamp)
- Output: What comes back? (success message, the new post data, or an error)
- Rules: Title must be under 280 characters, user must be logged in, etc.
Database Planning (Your App’s Memory)
A database is like a filing cabinet for your app. You need different drawers (called “tables”) for different types of information.
I will tell you the exact database structure you need to get started, but in the spirit of teaching a man to fish, here are some database design rules of thumb — this is how you make sure the state of your data supports your growth rather than holds you back.
Users table (who can use your app):
- id: unique number for each user (1, 2, 3…)
- email: their email address
- password: scrambled version of their password (never store plain passwords!)
- created_at: when they joined
Posts table (all the posts people write):
- id: unique number for each post
- user_id: which user wrote this (connects to Users table)
- text: the actual post content
- created_at: when they posted it
- upvotes: how many people liked it
Comments table (replies to posts):
- id: unique number for each comment
- user_id: who wrote this comment
- post_id: which post this is commenting on
- text: the comment content
- created_at: when they commented
Screen Planning (What Users Actually See)
Sketch these screens. Use rectangles, stick figures, whatever works:
Home page: List of all posts, newest first, with upvote buttons
Submit page: Text box + submit button
Post detail page: One post + all its comments + comment form
Login page: Email + password + login button
Signup page: Email + password + confirm password + signup button
Day 2: Set Up Your Coding Environment and Project Structure
Time to get your hands dirty, but we’re starting organized.
Install Your Tools
You’ll need:
- Node.js (the engine that runs JavaScript on your computer) – download from nodejs.org
- VS Code (where you’ll write code) – download from code.visualstudio.com
- Git (saves versions of your code) – download from git-scm.com
Create Your Project Folder
Open terminal/command prompt and start by vibe coding these commands one by one:
mkdir vibe-code-website
cd vibe-code-website
npm init -y
npm install express sqlite3 bcrypt jsonwebtokenTranslation:
- Make a folder called vibe-code-website.
- Go into it
- Create a package.json file (keeps record of your project dependencies)
- …And install the code libraries you’ll need:
- Express — this will manage your endpoints
- Sqlite3 is your minimal database
- Bcrypt will handle password encryption
- JSONwebtoken makes sure the user is who they say they are
Organize Your Files
Create this folder structure:
vibe-code-website/
├── src/
│ ├── database/
│ │ └── db.js
│ ├── routes/
│ │ ├── auth.js
│ │ ├── posts.js
│ │ └── comments.js
│ ├── public/
│ │ ├── index.html
│ │ ├── style.css
│ │ └── script.js
│ └── server.js
└── package.jsonWhy organize like this?
database/: All your database setup coderoutes/: Each file handles different endpoint doors (auth = login/signup, posts = creating/reading posts, etc.)public/: The HTML, CSS, and JavaScript that users see in their browserserver.js: The main file that starts your app
Day 3: Build Your Database Foundation
Set Up SQLite (Your App’s Filing Cabinet)
Create src/database/db.js and ask AI to help you. Here’s how to use AI effectively:
Prompt to AI: “Write me SQLite database setup code for a CRUD website, a social network. I need users, posts, and comments tables. Users need id, email, password_hash, and created_at. Posts need id, user_id, text, upvotes, and created_at. Comments need id, user_id, post_id, text, and created_at. Include code to create the tables if they don’t exist.”
The AI will give you code that looks something like this:
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
// Create or connect to database file
const db = new sqlite3.Database(path.join(__dirname, 'website.db'));
// Create tables if they don't exist
db.serialize(() => {
// Users table
db.run(`CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
email TEXT UNIQUE NOT NULL,
password_hash TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)`);
// Posts table
db.run(`CREATE TABLE IF NOT EXISTS posts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER NOT NULL,
text TEXT NOT NULL,
upvotes INTEGER DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users (id)
)`);
// Comments table
db.run(`CREATE TABLE IF NOT EXISTS comments (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER NOT NULL,
post_id INTEGER NOT NULL,
text TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users (id),
FOREIGN KEY (post_id) REFERENCES posts (id)
)`);
});
module.exports = db;
What this code does: It creates a database file called website.db and sets up three tables with the exact columns you need. The FOREIGN KEY parts mean “this number must match an id in another table” — like making sure every post has a real user who wrote it.
Day 4: Build User Authentication (Login/Signup)
Create Your Authentication System
Now you need to let people create accounts and log in. Create src/routes/auth.js.
Prompt to AI: “Write Express.js routes for user registration and login using SQLite, bcrypt for password hashing, and JWT for sessions. I need POST /register and POST /login endpoints. Include input validation and error handling.”
The vibe coding AI will give you something like:
const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const db = require('../database/db');
const router = express.Router();
const JWT_SECRET = 'your-secret-key-here'; // In real apps, use environment variables
// Register new user
router.post('/register', async (req, res) => {
const { email, password } = req.body;
// Check if email already exists
db.get('SELECT email FROM users WHERE email = ?', [email], async (err, row) => {
if (row) {
return res.status(400).json({ error: 'Email already registered' });
}
// Hash password and save user
const passwordHash = await bcrypt.hash(password, 10);
db.run('INSERT INTO users (email, password_hash) VALUES (?, ?)', [email, passwordHash], function(err) {
if (err) {
return res.status(500).json({ error: 'Registration failed' });
}
// Create JWT token
const token = jwt.sign({ userId: this.lastID }, JWT_SECRET);
res.json({ token, userId: this.lastID });
});
});
});
// Login user
router.post('/login', (req, res) => {
const { email, password } = req.body;
db.get('SELECT * FROM users WHERE email = ?', [email], async (err, user) => {
if (!user) {
return res.status(400).json({ error: 'Invalid email or password' });
}
const passwordMatch = await bcrypt.compare(password, user.password_hash);
if (!passwordMatch) {
return res.status(400).json({ error: 'Invalid email or password' });
}
const token = jwt.sign({ userId: user.id }, JWT_SECRET);
res.json({ token, userId: user.id });
});
});
module.exports = router;What this does:
- Register: Takes email/password, scrambles the password with bcrypt (so even you can’t see their real password), saves to database, gives back a token
- Login: Takes email/password, checks if they match what’s saved, gives back a token if correct
- JWT Token: Like a temporary ID card that proves someone is logged in
Create Login/Signup HTML
Create src/public/index.html:
Prompt to AI: “Write HTML for a simple login and registration form. Include email and password fields for both, with buttons to switch between login and register modes. Make it look clean with basic CSS styling.”
This will give you a webpage with forms where people can type their email and password.
Day 5: Build the Core Website Features
Create Post Management
Create src/routes/posts.js:
Prompt to AI: “Write Express.js routes for website posts using SQLite. I need GET /posts to fetch all posts with user email and upvote count, POST /posts to create new posts (requires authentication), POST /posts/:id/upvote to upvote posts, and DELETE /posts/:id to delete posts. Include JWT authentication middleware.”
Create the Main Feed
Update your HTML to show posts:
Prompt to AI: “Write JavaScript to fetch posts from /api/posts and display them in a list. Each post should show the text, author email, upvote count, upvote button, and timestamp. Include a form at the top to submit new posts. Handle authentication with JWT tokens stored in localStorage.”
Important: Ask AI to explain what localStorage is: “localStorage is like your browser’s pocket — it remembers small pieces of information (like your login token) even after you close the webpage.”
Add Comments
Create src/routes/comments.js:
Prompt to AI: “Write Express.js routes for comments. I need GET /posts/:id/comments to fetch comments for a specific post, and POST /posts/:id/comments to add new comments. Include user authentication and connect to SQLite database.”
Day 6: Connect Everything and Test
Create Your Main Server
Create src/server.js:
Prompt to AI: “Write an Express.js server that serves static files from public folder and uses the auth, posts, and comments route files. Include CORS and JSON middleware. Make it run on port 3000.”
Test Your App
Run your app:
node src/server.jsOpen http://localhost:3000 in your browser. Test each feature:
- Register a new account
- Login
- Create a post
- Upvote a post
- Add a comment
- Delete your own post
If something breaks: Copy the error message and ask AI: “I’m getting this error: [paste error]. What does this mean and how do I fix it?”
Day 7: Deploy and Reflect
Put It on the Internet
Use a free service like Railway, Render, or Vercel:
Prompt to vibe coding AI: “How do I deploy a Node.js Express app with SQLite to [pick a service]? Give me step-by-step instructions.”
The Harsh Truth Of Vibe Coding
By the end of the week, you’ll have:
- A working website on the internet
- Real experience with databases, authentication, and APIs
- Code you can show in interviews
- A foundation to build more complex apps
You WON’T have:
- Thousands of users
- Perfect code
- A business ready to scale
- Advanced features
And that’s exactly the point. You’ve learned the loop: plan → build → test → ship. That skill is worth more than any tutorial because you’ve felt what it’s like to go from zero to deployed app in one week.
The real magic of vibe coding isn’t the website. It’s that you now know you can take any app idea and break it down into database tables, endpoints, and screens. You can use AI as a coding partner. You can ship things that work.
That confidence will serve you for years.
What’s Next?
Week 2 ideas:
- Add user profiles
- Image uploads
- Better styling with CSS frameworks
- Email notifications
- Search functionality
- Admin features
But first, show someone what you built. Share it. Get feedback. Feel proud that you went from idea to internet in seven days.
Welcome to the vibe coder life.
Quick Reference
Common AI Prompts That Actually Work
For debugging: “I’m getting this error: [paste error]. Here’s my code: [paste code]. What’s wrong and how do I fix it?”
For new features: “Write [language] code that does [specific thing]. Include error handling and comments explaining what each part does.”
For explanations: “Explain [concept] like I’m new to programming. Use simple words and give me a real example.”
For code review: “Is this code correct? [paste code]. Are there any bugs or ways to improve it?”
Essential Terminal Commands
node server.js– Start your appnpm install [package]– Add a new libraryCtrl+C– Stop your running appgit add .– Save all changesgit commit -m "message"– Create a save pointgit push– Upload to GitHub
Debugging Steps
- Read the error message completely
- Check the line number mentioned in the error
- Copy/paste the error to AI with your code
- Test the fix
- If still broken, ask AI for a different approach
Remember: Every experienced programmer still googles basic things and copies code from Stack Overflow. Using AI is just the modern version of that. You’re not cheating — you’re learning efficiently.
Ready to Build Something Bigger?
You just proved you can ship a working app in a week. That’s the kind of momentum that builds real products and real businesses.
If you’re thinking “okay, this was fun, but I want to build something people actually pay for” — that’s where Pixelswithin comes in. We help founders and builders like you turn weekend projects into products that matter. Whether you need help scaling your website, want to build something completely new, or just need someone who gets the vibe coding mindset, we speak your language.
Ready to level up? Drop us a line at info@pixelswithin.com or check out our work at pixelswithin.com. Let’s build something that makes the internet a little more interesting.
Keep vibing. Keep shipping. 🚀
Leave a Reply