DEV Community

Suifeng023
Suifeng023

Posted on

I Built a Full-Stack App Using Only AI — Here's the Complete Workflow

#python #fastapi #webdev #tutorial

I Built a Full-Stack App Using Only AI — Here's the Complete Workflow

Last month, I set myself a challenge: build and deploy a complete SaaS application using AI coding assistants for every single step. No Stack Overflow. No manual debugging marathons. Just AI.

The result? A working developer tools website deployed to production in under 48 hours.

Here's exactly how I did it — step by step, tool by tool, with the actual prompts I used.

The Project: DevToolkit — A Free Online Developer Tools Platform

I wanted to build a single-page web app offering common developer utilities: JSON formatter, hash generator, regex tester, base64 encoder, color converter, and more.

Tech stack decision prompt:

I want to build a single-page developer tools website with: JSON formatter/validator, hash generator (MD5/SHA), regex tester, base64 encoder/decoder, color converter, and timestamp converter. It needs to be fast, SEO-friendly, and easy to deploy on a $5 VPS. Recommend a minimal tech stack.
Enter fullscreen mode Exit fullscreen mode

AI recommended: FastAPI + Jinja2 + htmx + vanilla JS. Perfect choice — minimal dependencies, fast, and I could serve everything from a single process.

Step 1: Project Scaffolding (0 minutes)

Instead of manually creating directories and config files:

Create a FastAPI project structure for a developer tools website. Include:
- app.py with FastAPI setup
- templates/index.html with Jinja2
- static/css/style.css 
- static/js/app.js
Mount static files, set up template engine. Include a basic responsive layout with a sidebar for tool navigation and a main content area.
Enter fullscreen mode Exit fullscreen mode

This gave me the complete project skeleton in one shot. I just ran mkdir -p and pasted the files.

Step 2: Building Each Tool (The Real Magic)

Here's where AI shines. Instead of writing each tool from scratch, I built them one at a time with focused prompts.

JSON Formatter + Validator 

Add a JSON formatter endpoint to my FastAPI app. It should:
1. Accept POST /api/json/format with form data
2. Parse JSON and return prettified version (indent=2)
3. Return error with line/column number if invalid
4. Also add /api/json/minify and /api/json/validate endpoints
Enter fullscreen mode Exit fullscreen mode

Hash Generator 

Add hash generation endpoints: POST /api/hash/generate
Accept text input and comma-separated algorithm list (md5, sha1, sha256, sha512).
Return all hashes as JSON. Use Python's hashlib.
Enter fullscreen mode Exit fullscreen mode

Regex Tester 

Add POST /api/regex/test that accepts a pattern, test string, and flags.
Return all matches with their positions, groups, and named groups.
Handle regex errors gracefully. Support flags: ignorecase, multiline, dotall.
Enter fullscreen mode Exit fullscreen mode

Base64 Encoder/Decoder 

Add /api/base64/encode and /api/base64/decode endpoints.
Handle both text and URL-safe base64. Detect auto if text contains URL-unsafe chars.
Enter fullscreen mode Exit fullscreen mode

Color Converter (RGB ↔ HEX ↔ HSL) 

Add /api/color/convert endpoint. Accept a color in any format (hex, rgb, hsl, named color).
Return the color in all formats: hex, rgb, hsl, plus a complementary color and contrast check (#000 and #fff).
Enter fullscreen mode Exit fullscreen mode

Timestamp Converter 

Add /api/timestamp/convert endpoint. Accept either a Unix timestamp or human date string.
Return: Unix timestamp, ISO 8601, relative time ("3 hours ago"), and date in multiple timezones.
Enter fullscreen mode Exit fullscreen mode

Each prompt produced working code on the first try. The key was being specific about input/output format and edge cases.

Step 3: Building the Frontend with htmx

Instead of a heavy React/Vue setup, I used htmx for dynamic interactions:

<div hx-post="/api/json/format" 
     hx-target="#result" 
     hx-swap="innerHTML"
     hx-indicator="#spinner">
    <textarea name="input_text" placeholder="Paste your JSON here..."></textarea>
    <button type="submit">Format</button>
</div>
<div id="result"></div>
Enter fullscreen mode Exit fullscreen mode

The prompt that made this click:

Build a responsive UI for my developer tools site using htmx. Each tool should:
- Have a clean card-based layout
- Show a loading spinner during API calls
- Display results with syntax highlighting
- Have a "copy to clipboard" button
- Work on mobile without horizontal scrolling
Use CSS Grid for the layout. Dark mode support.
Enter fullscreen mode Exit fullscreen mode

This gave me a complete, responsive UI that feels like a modern SPA — without any JavaScript framework.

Step 4: Deployment (15 minutes) 

Create a systemd service file for my FastAPI app running on port 8000 with uvicorn.
Also give me an nginx config that:
- Proxies / to the FastAPI app
- Enables gzip compression
- Adds security headers
- Handles static file caching
Enter fullscreen mode Exit fullscreen mode

Then:

sudo cp devtoolkit.service /etc/systemd/system/
sudo systemctl enable devtoolkit
sudo systemctl start devtoolkit
sudo nginx -t && sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Done. Live in production.

Step 5: SEO Optimization

AI helped with the SEO parts I always forget:

Generate meta tags, Open Graph tags, and structured data (JSON-LD) for a developer tools website.
Include WebApplication schema. Optimize for "online JSON formatter", "hash generator online", "regex tester" keywords.
Enter fullscreen mode Exit fullscreen mode

This produced proper <head> tags, sitemap XML, and robots.txt.

What I Learned: The AI Development Workflow

✅ What Works Incredibly Well

Task Time Saved Quality
Project scaffolding 30 min → 0 Excellent
API endpoint logic 20 min each → 2 min Very Good
Boilerplate code 15 min → instant Perfect
Nginx/systemd config 20 min → 2 min Excellent
SEO meta tags 15 min → 1 min Good
Error handling 10 min → 2 min Good

❌ What AI Struggles With

  • Complex CSS animations — often produces verbose, non-performant code
  • Cross-browser quirks — sometimes suggests non-standard APIs
  • Security hardening — you still need to review every line
  • Performance optimization — needs specific guidance, not generic advice

My Prompt Template for AI Coding

After 48 hours of this experiment, I distilled my process into a repeatable prompt template:

Context: I'm building [feature] for [project] using [tech stack].

Task: [Specific, atomic task description]

Requirements:
- Input: [Exact input format]
- Output: [Exact output format]
- Edge cases: [List specific edge cases to handle]
- Error handling: [How to handle errors]

Style: [Production-ready | Prototype | Minimal]
Enter fullscreen mode Exit fullscreen mode

The key insight: Treat AI like a senior developer. Give it context, be specific about requirements, and review the output critically. Don't just copy-paste — understand what it generates.

The Numbers

  • Total time: ~8 hours (spread over 2 days)
  • Lines of code: ~2,500
  • Bugs on first deploy: 3 (all fixed within 10 minutes)
  • Tools built: 6
  • What I'd normally estimate: 2-3 weeks

Should You Try This?

Yes, if:

  • You understand the fundamentals of your tech stack
  • You can debug and review code critically
  • You treat AI as an accelerator, not a replacement

No, if:

  • You're learning a technology from scratch (you need to understand what AI generates)
  • Your project requires novel algorithms or deep domain expertise
  • Security is absolutely critical (AI code needs extra review)

The future of development isn't "AI writes everything." It's AI handles the boilerplate while you focus on architecture and business logic. And honestly? That's a pretty great deal.

What would you build if you had 48 hours and an AI pair programmer? I'd love to hear your ideas.

If you enjoyed this article, follow me for more AI-powered development workflows and practical coding guides.

Top comments (0)