How I Built MiniBreaks.io With AI

My Original Expectations

Before we formally start the series, I want to let you, the reader, know what my original expectation of using AI was. This transparency is important because it sets the foundation for everything that follows in this series.

The Time Problem

Having built several websites and apps before, I knew how much time even a "simple" project could take. For something the size of MiniBreaks, doing everything from scratch—while juggling a full-time job, would easily eat up a year or more. The endless cycle of:

• Setting up project structure and tooling
• Writing boilerplate code for authentication, databases, and APIs
• Designing and iterating on UI components
• Writing marketing copy and content
• Making countless small design decisions

I'd been through this before. I knew that by month 6, motivation would wane. By month 9, I'd be questioning whether the project was worth continuing. And by month 12, there was a good chance it would join the graveyard of unfinished side projects.

What I Wanted AI to Do

I wanted AI to accelerate the boring parts—the foundation work that every project needs but that doesn't feel particularly creative or engaging:

• Help me bootstrap a well-organized codebase with proper folder structure, configuration files, and initial setup
• Offer quick ideas for UI/UX when I was stuck staring at a blank screen
• Speed up writing copy and generating content for landing pages, feature descriptions, and marketing materials
• Act like a second brain during design decisions, someone to bounce ideas off when I wasn't sure which approach to take

Essentially, I wanted AI to be my development accelerator, not my replacement. I still wanted to make the key decisions, write the critical logic, and shape the product vision. But I hoped AI could eliminate the friction that often kills side projects before they gain momentum.

More importantly, I needed AI to help me finish my project before it becomes another my abandoned project! 🤦‍♂️

What AI Actually Delivered

AI did all of those things I expected—and occasionally, it did more. Much more.

Beyond My Expectations

For example, AI not only refactored my code using solid architecture principles, it sometimes suggested layouts or visuals better than what I had in mind. It would reuse styles from my existing design system and make smart decisions about what elements to highlight on a new page.

There were moments when I'd describe a feature I wanted, and AI would come back with an implementation that was not just functional, but elegant. It would suggest patterns I hadn't considered, point out potential edge cases, and even recommend user experience improvements.

Along the way, I had a few "aha" moments—like realizing I could ask AI not just to generate code, but to help structure it using best practices. Suddenly, my project folders were clean, organized, and extensible. My components followed consistent patterns. My API endpoints had proper error handling and validation.

The Partnership Shift

The real breakthrough came when I stopped thinking of AI as a tool and started treating it as a development partner. Instead of asking "Can you write a function of doing X?" I began asking something like "Before we go further, I want us to consider our current architecture so it will be more maintainable in the long term?" or "For this feature, but how can we sustain user engagement?"

Over time, I began giving more instructions to AI instead of writing the changes manually. This wasn't because I became lazy; it was because I discovered that articulating my requirements clearly to AI forced me to think more systematically about what I was building.

And that shift, treating AI as a partner rather than a tool, was what really unlocked its value.

The Reality Check

But let's be honest: it wasn't hands-off magic. AI required careful direction, clear communication, and constant quality control. There were moments of frustration when AI would misunderstand requirements or generate code that looked right but had subtle bugs.

I learned that AI amplifies both good and bad practices. If I was unclear in my instructions, I got unclear results. If I didn't understand the problem space well enough, AI couldn't compensate for that gap.

The most successful outcomes happened when I combined my domain knowledge, strategic thinking, and product vision with AI's ability to rapidly generate, iterate, and implement solutions.

Setting Your Expectations

Therefore, I want you to ask yourself a few questions before we continue with the series:

Questions for You

Briefly write down your answers. I'd encourage you to come back to these notes halfway through the series and see if everything is meeting your expectations.

The Key Mindset

The most important mindset shift I made was this: AI is not about replacing your thinking, it's about amplifying it.

The developers who struggle with AI are often those who expect it to read their minds or solve problems they haven't fully understood themselves. The developers who thrive are those who use AI to execute their well-thought-out plans more efficiently.

Building a website with AI doesn't require a massive toolkit. In fact, starting simple is better—you can always add more tools as you grow. Today, I'll introduce you to just four essential tools that can take you from idea to live website.

Even if you're not an engineer, don't worry! I'll walk you through each step and explain everything in plain language. By the end of this part, you'll have your workspace ready and know exactly how to use AI as your development partner.

The Essential AI Tools You Need

After trying dozens of AI tools, I've narrowed it down to these four essentials. Each serves a specific purpose, and together they create a powerful development workflow:

ChatGPT - Your AI Assistant

ChatGPT will be your primary brainstorming partner. Here's how I use it:

• Idea refinement - "Help me think through this website idea..."
• Learning new concepts - "Explain how websites work in simple terms"
• Problem solving - "My code isn't working, here's what's happening..."
• Writing content - "Help me write an introduction about my website."

GitHub Copilot - AI Code Companion

If ChatGPT is your mentor, GitHub Copilot is your coding buddy who sits next to you and helps write the actual code. It integrates directly into your code editor and suggests code as you type.

When using GitHub Copilot, make sure you configure it to use the Agent mode, which allows it to understand your code context better and provide more accurate suggestions.

Cursor IDE - AI-First Code Editor

Cursor is like a supercharged code editor built specifically for AI assistance. It's what I used to kick off MiniBreaks.io, and it's completely free.

Hugging Face - AI Models Hub (Optional)

Think of Hugging Face as a library of free AI tools (check Hugging Face Space). You might not need it for your first website, but it's good to know it exists.

Setting Up Your GitHub Account

GitHub is where your code will live and where you'll deploy your website. Think of it as a combination of Google Drive for code and a free web hosting service.

Creating Your GitHub Account

Head to github.com and click "Sign up for GitHub". Choose a username that represents you or your project.

Creating Your First Repository

A repository (or "repo") is like a project folder for your website:

1. Click the green "New" button on your GitHub homepage
2. Name your repository (try "my-first-website")
3. Check "Add a README file"
4. Click "Create repository"

Preparing Your Workspace

Local Development Setup

While you can edit code directly on GitHub, it's better to work locally on your computer. Here's the minimal setup:

1. Download Visual Studio Code - Visit code.visualstudio.com
2. Sign up for GitHub Copilot - Go to github.com/features/copilot
3. Download Cursor IDE (Optional) - Visit cursor.sh
4. Sign up for ChatGPT - Go to chat.openai.com
5. Install Git - Download from git-scm.com

Your AI-Assisted Workflow

Your Homework

Before we move to the next part, complete these simple setup tasks:

You might wonder: why do I even need help crafting an idea when I already have AI at my fingertips?

That's a fair question. But here's the catch: while AI is great at generating ideas, it can also overwhelm you with too much information or lead you down overcomplicated paths.

In fact, one of the best lessons from the book Scalability Rules: 50 Principles for Scaling Web Sites is this:

Don't overengineer the solution.

Overthought ideas → Overengineered solutions.
That's what we want to avoid.

Why AI Brainstorming Matters

When I started building MiniBreaks.io, my initial idea was much more complex than what I eventually launched. The AI tools were happy to help me plan all of this!

But that's exactly the problem. AI will enthusiastically help you build a complicated solution when what you really need is to start simple and prove your concept first.

The key is learning how to guide AI toward simplicity rather than complexity. This requires strategic prompting and clear boundaries.

3 Guidelines for Brainstorming with AI

When you brainstorm your website idea with AI, keep these principles in mind:

Using ChatGPT Projects for Better Results

If you're using the paid version of ChatGPT, create a Project for this brainstorming session.

Why? Because you can define the tone and role AI should play for you.

Cross-Reference for Confidence

One final tip: don't be afraid to cross-reference ideas with other AI tools. This can boost your confidence and give you different perspectives.

Common Pitfalls to Avoid

Your Homework

In this part, you'll learn how to kick off your project by generating a real, working design with AI.

The way I started with Minibreaks was using DeepSite, a powerful tool that can generate beautifully designed landing pages from simple text prompts. This becomes the foundation of your site's design system.

Introducing DeepSite

DeepSite is available at: https://huggingface.co/spaces/enzostvs/deepsite

This is completely free, but with very limited number of uses. But if you get your prompt right, you should get what you want with one or two attempts.

Getting Your Domain Name

Before we continue, you actually need another thing: a domain name. This is important because you should include it in the prompt when generating your website design.

Here I will use one of my ideas (that I am not going to pursue as an example...😏) to create a prompt. The motivation is that I have some old toys that I do not want to keep and I want to sell them to people who really like them.

Crafting Your Design Prompt

Here is the prompt I am using for DeepSite:

Notice how specific this prompt is about:

• Brand positioning: "serious collectors," "professional and aspirational"
• Visual style: "modern, minimal aesthetic, neutral/dark tones"
• Key features: Specific sections and functionality
• Target audience: Clear about who this is for and what to avoid

The Generated Result

You can also visit my HuggingFace space to view this generated page: https://huggingface.co/spaces/hongincanada/collectibles-sale

Honestly, it's a very good starting point. Copy the source code, and create a new file in your local machine, call it generated.html, paste the entire code. We will use it in the next section.

Technical Notes

Your Homework

In this part, you'll learn how to transform your generated design into a structured, maintainable website using AI as your coding partner.

Up to this point, you've created a beautiful static HTML page using DeepSite. Now it's time to turn that into a proper web application using modern development tools and AI assistance.

🧰 Choosing Your Tech Stack

Before diving in, you'll need to pick a tech stack — which simply means the combination of technologies you'll use to build your website.

My recommendations: SvelteKit for frontend, Tailwind for CSS, PostgreSQL for database (when needed later).

Why SvelteKit?

🖥️ Setting Up Your Environment

Make sure you have Node.js and Git installed.

Create a SvelteKit project

npx sv create my-app

This uses the new Svelte CLI to scaffold your project. Follow the prompts — don't worry too much about advanced options right now.

🗂️ Moving Your Generated Design

Take the generated.html file you created in the previous part and drop it into the root of your SvelteKit project folder.

🤖 Your First AI Prompt

Now it's time to let AI help you turn that static HTML into a proper SvelteKit site.

AI-Powered Migration to SvelteKit

Let AI generate and organize the code for you. You should see results like:

• A structured project with src/routes/+page.svelte (your homepage)
• An About page at src/routes/about/+page.svelte
• Reusable components in src/lib/components/
• All JavaScript converted to TypeScript

Extending Your Site with AI

From here, you can prompt AI with simple requests like:

🎯 Best Practices for AI-Assisted Coding

📝 Homework

🚀 Ready to Level Up?

Congratulations! You've built the foundation of your website and learned how to work effectively with AI for coding. Now it's time to add the features that will make your site truly functional and professional.

In this part, we'll cover:

• Setting up a database - Your website's memory bank
• Creating a user table - Managing user accounts
• Implementing authentication - Secure login and signup
• Adding password recovery - Using an email API for user support

📊 What is a Database?

Think of a database as a digital notebook that stores all your website's important information neatly organized into tables. Each table is like a spreadsheet with rows and columns.

🧰 Setting Up PostgreSQL

PostgreSQL is a reliable and free database system. Follow these steps:

How to Install PostgreSQL

1. Go to PostgreSQL Download
2. Download and follow the installation guide
3. Set a password during installation (save this password somewhere secure!)
4. Install pgAdmin (a graphical tool that comes with PostgreSQL)
5. Open pgAdmin and create a new database

🗃️ Creating a User Table

We'll use AI to help us create the table. Here's how to ask clearly:

-- user table for the website
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    email VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

🔑 Building Authentication Step-by-Step

To help AI generate accurate results, let's break down the authentication feature into multiple prompts.

Step 1: Sign-Up Page

Step 2: Login Page

Step 3: Password Recovery Page

🔐 Connecting Email Sending with an External API

We'll use the Brevo API to enable our website to send emails. Brevo (formerly Sendinblue) offers a reliable, free tier that's perfect for getting started.

Setting Up Brevo API

1. Visit Brevo API documentation
2. Sign up for a free account and get an API key
3. Keep your API key secure

Using AI to Complete Email Integration

🛡️ Security Best Practices

📓 Homework

Introduction

Congratulations on reaching this stage! You've successfully created an MVP. Now comes a crucial phase that many developers overlook: preparation for deployment.

This isn't just about making your website "go live" – it's about ensuring your users have a smooth, secure, and enjoyable experience from day one.

Testing Your Website

Testing ensures your website functions correctly and provides a good user experience.

Manual Testing

For personal projects and MVPs, thorough manual testing is often sufficient:

1. Start your development server: Run npm run dev
2. Test systematically: Test every page, button, form, and feature
3. Check different scenarios: Try invalid data, edge cases
4. Test user flows: Go through complete journeys from start to finish

Debugging with AI Assistance

Automation Testing (Optional)

• Playwright - Modern automation testing framework
• Cypress - Popular end-to-end testing tool
• Jest - JavaScript testing framework for unit tests

Security Check

Common Security Measures

• CORS: Controls which domains can access your resources
• CSP: Prevents cross-site scripting attacks
• Input Validation: Protects against malicious data
• Rate Limiting: Guards against excessive requests
• SQL Injection Prevention: Secures database queries

Securing Sensitive Data

Never put sensitive information in your source code. This includes API keys, database passwords, secret tokens. Store these in environment files (.env) that are never committed to your repository.

Accessibility and Responsiveness

Accessibility Checks

• Color contrast: Ensure text is readable in both light and dark modes
• Keyboard navigation: All interactive elements should be accessible via keyboard
• Screen reader compatibility: Proper heading structure and alt text
• Focus indicators: Clear visual indication of focused elements

Responsiveness Testing

Your website should work beautifully on all devices. Test across different screen sizes, browsers, and orientations.

Performance Check

Using Lighthouse Tool

1. Open your website in Google Chrome
2. Press F12 to open Developer Tools
3. Click on the "Lighthouse" tab
4. Click "Analyze page load" to run the audit
5. Review the suggestions and implement improvements

Performance Optimization

• Image optimization: Compress images and use modern formats
• Code splitting: Load only necessary code for each page
• Caching: Store frequently accessed data
• Minification: Remove unnecessary characters from code

SEO (Search Engine Optimization)

SEO Basics

• Keywords: Include relevant keywords naturally in your content
• URL structure: Keep URLs clear, short, and keyword-rich
• Internal linking: Link related pages together
• Site speed: Fast loading times improve search rankings

Meta Tags and Content

• Title tags: Descriptive and unique for each page
• Meta descriptions: Compelling summaries that encourage clicks
• Alt text for images: Describes images for screen readers and search engines
• Header structure: Proper use of H1, H2, H3 tags

Deployment Time

Deployment Options

• Vercel: Excellent for SvelteKit, React, and Next.js
• Netlify: Great for static sites and JAMstack
• Railway: Good for full-stack applications with databases
• DigitalOcean: More control with VPS hosting
• GitHub Pages: Free hosting for static sites

Pre-Deployment Checklist

• ✅ All manual testing completed
• ✅ Security measures implemented
• ✅ Environment variables properly configured
• ✅ Lighthouse performance score above 80
• ✅ Accessibility audit passed
• ✅ Responsive design tested on multiple devices
• ✅ SEO elements properly configured
• ✅ Error handling implemented

📋 Homework

🧠 AI Still Needs Your Help

After months of building with AI, the most important lesson I learned is this: AI is a powerful tool, but it still needs human guidance.

Think of AI as a brilliant but inexperienced teammate. It can write code fast, but it doesn't always understand context, project goals, or the subtle requirements of a good user experience.

😤 Common Frustrations

Repetitive Suggestions

One of the most common issues I encountered was AI suggesting the same solution over and over, even when it didn't work the first time.

Overcomplicated Code

AI sometimes generates overly complex solutions when a simpler approach would work.

Wrong Assumptions

AI will sometimes make assumptions about your project, tools, or requirements that aren't correct. For example, it might assume you're using a library you haven't installed, or that your database structure is different from what it actually is.

📖 Case Studies from MiniBreaks.io

Case Study 1: The Dialog That Wouldn't Close

I was building a confirmation dialog for MiniBreaks.io — a simple modal that opens on user action and closes when the user confirms or cancels.

The AI generated a solution using a Svelte modal component, but the dialog wouldn't close when the user clicked "Cancel." I asked the AI to fix it — three times. Each time, it restructured the dialog component but the issue persisted.

Case Study 2: Deployment Troubleshooting

After weeks of development, I was ready to deploy MiniBreaks.io. The AI suggested using a popular deployment platform and provided step-by-step instructions. Everything seemed fine — until I pushed my code and got a build error.

The AI tried to fix the error by modifying the build configuration, but each fix introduced new issues. It took me hours of back-and-forth before I realized the root cause: my Node.js version was incompatible with one of my dependencies.

✨ Pleasant Surprises

Despite the frustrations, there were genuine moments of surprise where AI exceeded my expectations:

💭 Reflection

Looking back at the entire journey, building with AI has been both challenging and rewarding. It's easy to get frustrated when things don't work, but it's equally easy to be amazed by how much you can accomplish in a short period with AI assistance.

The key is to maintain a learning mindset. When AI makes mistakes, use those moments to deepen your own understanding. When AI provides great solutions, study them to learn new patterns and techniques.

📓 Homework

🔮 Series Reflection

You made it to the end of this series — and that's no small feat. We've covered everything from the very first "Can I really build something with AI?" question to deploying a real product and reflecting on lessons learned.

Let's take a moment to look at where AI development is headed and what it means for builders like us.

🚀 What's Next for AI Development?

AI tools are evolving at a breathtaking pace. Here's what I see coming:

⚠️ A Word on "Vibe Coding"

There's been a lot of hype about "vibe coding" — the idea that you can just describe what you want and AI will build it for you. While it's true that AI can generate a lot of code quickly, there's a dangerous trap here.

The future belongs to people who can collaborate with AI effectively — who understand enough to guide it, question it, and improve upon its outputs.

🎓 Parting Advice

🌱 What's Next for Me

I created this series to shorten the gap between having an idea and seeing it live. Building MiniBreaks.io was one of the most rewarding experiences of my career — and the most humbling.

I'll continue building, writing about my experiences, and exploring the intersection of human creativity and AI capability. If you've made it this far, you're already ahead of most people. Now go build something amazing.

📋 AI Development Cheat Sheet