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 workflow into a reusable prompt template:

I'm building [feature description] for my [tech stack] project.

Context:
- Current file structure: [list files]
- Existing patterns: [describe patterns]
- Requirements: [specific requirements]

Please generate:
1. The complete code with inline comments
2. Any necessary imports or dependencies
3. Error handling for edge cases
4. Brief explanation of your approach
Enter fullscreen mode Exit fullscreen mode

The key principles:

  1. Always provide context — don't make the AI guess your project structure
  2. Be specific about inputs/outputs — define exact data types and formats
  3. Mention existing patterns — AI will follow your conventions
  4. Request edge case handling — this is where most bugs hide
  5. Iterate in small chunks — one feature at a time, not the whole app

The Numbers: Time Comparison

Traditional development vs. AI-assisted:

Phase Manual AI-Assisted Savings
Planning 2 hours 30 min 75%
Scaffolding 1 hour 5 min 92%
Backend (6 tools) 6 hours 45 min 88%
Frontend 4 hours 1 hour 75%
Deployment 1 hour 15 min 75%
SEO 1 hour 10 min 83%
Total 15 hours ~3 hours 80%

That's not just faster — it's a different way of thinking about software development. Instead of writing code, you're reviewing and directing code.

Would I Do It Again?

Absolutely. But with caveats:

  1. I wouldn't use AI for a mission-critical production system without thorough code review
  2. The AI is a force multiplier, not a replacement — you still need to understand what you're building
  3. Security is your responsibility — always audit authentication, input validation, and data handling
  4. Testing still matters — AI-generated code needs tests just like human-written code

The sweet spot? Use AI for the 80% of development that's repetitive and well-documented, and spend your saved time on the 20% that truly requires human creativity and judgment.

What's Next

I'm now using this workflow for client projects and it's been transformative. The key mindset shift: you're not a coder anymore, you're a code reviewer and architect.

If you're interested in the full source code or want to try DevToolkit, check out the live demo — it's free and has no sign-up required.

Have you built something entirely with AI? I'd love to hear about your experience in the comments! 👇

If you found this useful, follow me for more AI development workflows and practical coding tips.

Top comments (0)