Complexity Levels - Digital Alchemy Vault

Every blueprint in the library includes starter prompts for ALL THREE complexity levels. Pick your path and grow into the next one.

The 3 Paths

Digital Alchemy blueprints offer three distinct complexity paths for every app idea. Same app concept. Different technical implementation. You choose based on your current skill level and growth goals.

Beginner

Who: First-time buildersOutput: Single HTML fileBuild Time: 2-4 hours

Intermediate

Who: Built 2-3 appsOutput: Multi-file projectBuild Time: 6-10 hours

Advanced

Who: Want production-gradeOutput: Full-stack appBuild Time: 15-25 hours

Beginner Path

Overview
Example
Beginner Blueprints

Who This Is For

First-time builders. You’ve never written a line of code. You want to see if vibe coding works for you before investing serious time.

What You Get

A single HTML file with embedded CSS and JavaScript. Open it in your browser and it works. No build tools. No dependencies. No confusion.

Technical Stack

Tools

Google AI Studio (Gemini 2.0 Flash)

Output

Single HTML file with embedded CSS + JS

Storage

localStorage (data stays in browser)

Hosting

GitHub Pages (free)

Build Time

2-4 hours from idea to deployed URL

Prerequisites

Flash Module 01

What Is Vibe Coding?

Flash Module 02

AI Studio Setup

Flash Module 03

Your First Prompt

Example: The Macro Alchemist (Beginner)

The Prompt:

Build me a single-page web app called "THE MACRO ALCHEMIST".

WHAT IT DOES:
A calorie and macronutrient calculator that lets users set 
daily targets for calories, protein, carbs, and fat, then 
log every meal to track progress in real time.

CORE FEATURES:
1. Macro Target Calculator
2. Meal Logger
3. Daily Dashboard with progress bars
4. Remaining Macro Counter
5. Meal History List

REQUIREMENTS:
- Single HTML file with embedded CSS and JavaScript
- Mobile-responsive
- Use localStorage to save data
- Clean, modern UI with Health palette colors
- No external libraries or frameworks

The Output:One complete HTML file (~400-700 lines) that you can:

Open directly in your browser
Edit with any text editor
Deploy to GitHub Pages in 5 minutes
Share via a live URL

What You Learn:

11 Beginner Blueprints Available

Code	App Name	Niche
HW-01	The Macro Alchemist	Health
HW-02	The Hydration Engine	Health
WB-01	The Income Tracker	Wealth
RD-01	The Date Night Generator	Relationships
PD-01	The Affirmation Engine	Personal Dev
FB-01	The Devotional Companion	Faith
FT-01	The Rep Counter	Fitness
PC-01	Chore Quest	Parenting
PC-02	The Storytime Forge	Parenting
BS-01	The Skincare Routine Builder	Beauty
PT-01	The Focus Timer	Productivity

Start with any niche that interests you. The technical skills transfer across all of them.

Intermediate Path

Overview
Example
Intermediate Blueprints

Who This Is For

You’ve built 2-3 beginner apps. You understand HTML, CSS, and JavaScript basics. You’re ready for multi-file projects and API integrations.

What You Get

A professional multi-file project with separated HTML, CSS, and JavaScript. Includes API integrations, advanced UI patterns, and production-ready hosting on Vercel.

Technical Stack

Tools

AI Studio + VS Code + GitHub + Vercel

Output

Multi-file project (HTML/CSS/JS separated)

Storage

localStorage + optional API integration

Hosting

Vercel (free tier)

Build Time

6-10 hours from idea to custom domain

Prerequisites

Complete Beginner Path

Build at least 1 Beginner app first

Flash Module 06

Add Local Storage

Flash Module 07

API Basics

Flash Module 08

Responsive Design

Example: The Macro Alchemist (Intermediate)

What’s Different:

Separated Files

index.html (structure)
styles.css (all styling)
app.js (application logic)
data.js (localStorage helpers)
README.md (documentation)

API Integration

Connects to USDA FoodData Central API to search for foods and auto-populate macro values

Advanced Features

Saved Foods Library
CSV Export
Weekly Summary Report
Dark Mode Toggle
Share My Day

Professional Patterns

CSS custom properties
Modular JavaScript functions
Error handling
Loading states
Smooth transitions

What You Learn:

13 Intermediate Blueprints Available

Code	App Name	Niche
HW-03	The Meal Architect	Health
WB-02	The Offer Architect	Wealth
RD-02	The Love Language Quiz	Relationships
RD-03	The Couples Goal Tracker	Relationships
PD-02	The Habit Forge	Personal Dev
FB-02	The Prayer Journal	Faith
FB-03	The Scripture Study App	Faith
FT-02	The Workout Architect	Fitness
PC-03	The Milestone Tracker	Parenting
BS-02	The Shade Matcher	Beauty
BS-03	The Product Tracker	Beauty
PT-02	The Weekly Sprint Planner	Productivity
PT-03	The Second Brain	Productivity

Advanced Path

Overview
Example
Advanced Blueprints

Who This Is For

You want production-grade, full-stack apps with user authentication, real databases, and proper security. You’ve deployed apps to Vercel and understand API fundamentals.

What You Get

A complete full-stack application with Next.js frontend, Supabase backend, user authentication, Row Level Security, and multi-device sync.

Technical Stack

Tools

AI Studio + VS Code + GitHub + Vercel + Supabase

Output

Full-stack app (Next.js + Supabase backend)

Storage

Supabase (PostgreSQL) with Row Level Security

Auth

Supabase Auth (email/password + Google OAuth)

Hosting

Vercel (frontend) + Supabase (backend)

Build Time

15-25 hours from idea to production launch

Prerequisites

Complete Intermediate Path

Build at least 2 Intermediate apps first

Flash Module 09

Supabase Quickstart

Understand Security

Read Ship It Step 6: Launch Checklist

8 Advanced Blueprints Available

Code	App Name	Niche
HW-04	The Wellness Dashboard	Health
WB-03	The Freelance Command Center	Wealth
RD-03	The Couples Goal Tracker	Relationships
PD-03	The Life Audit Dashboard	Personal Dev
FB-04	The Ministry Planner	Faith
FT-03	The Transformation Tracker	Fitness
PC-04	The Family Command Center	Parenting
BS-04	The Beauty Brand Launcher	Beauty

How to Choose Your Path

I've never coded before

Start with Beginner.Don’t skip ahead. The Beginner path teaches you how to work with AI, read code, and deploy apps. These fundamentals matter more than technical complexity.Build 2-3 Beginner apps before moving to Intermediate.

I've built a few apps already

Go Intermediate.If you’ve completed at least 1 Beginner app and feel comfortable with HTML/CSS/JS basics, you’re ready for Intermediate.Build 3-5 Intermediate apps before attempting Advanced.

I want user accounts and databases

Try Advanced, but complete the prerequisites first.Advanced blueprints assume you understand:

Multi-file project structure
API requests and responses
localStorage and state management
Deployment workflows

If any of those feel shaky, build more Intermediate apps first.

Can I skip levels?

You can, but you shouldn’t.Each level builds on skills from the previous one. Skipping Beginner means you miss:

How to craft effective prompts
How to read and modify AI-generated code
How to debug when things break
How localStorage works

These skills are prerequisites for everything that comes after.

Progression Path

The recommended learning progression:

Week 1-2: First Beginner App

Pick any Beginner blueprint that interests you. Build it. Deploy it to GitHub Pages. Share the URL.

Week 3-4: Second Beginner App

Pick a different niche. Build faster this time. Notice what you understand now that you didn’t before.

Week 5-6: Third Beginner App

By the third app, you should be able to modify AI-generated code confidently and add custom features.

Week 7-10: First Intermediate App

Upgrade one of your Beginner apps to Intermediate. Add API integration. Deploy to Vercel with a custom domain.

Week 11-16: More Intermediate Apps

Build 2-3 more Intermediate apps in different niches. Master multi-file architecture and API patterns.

Week 17+: First Advanced App

When you’re ready, attempt your first full-stack app with Supabase. Expect it to take 3-4 weeks. That’s normal.

These timelines assume 5-10 hours of building per week. Adjust based on your schedule.

Key Differences Summary

Aspect	Beginner	Intermediate	Advanced
Files	1 HTML file	3-5 files	15-25 files
Storage	localStorage	localStorage + APIs	PostgreSQL database
Auth	None	None	Email + OAuth
Hosting	GitHub Pages	Vercel	Vercel + Supabase
Security	Basic validation	Input validation	RLS + server actions
Sync	Single device	Single device	Multi-device real-time
Deployment	5 minutes	15 minutes	30-60 minutes
Maintenance	None	Minimal	Regular updates

Blueprint Library

Browse all 32 blueprints by niche

Flash Modules

Skill-building videos for each level

Ship It

Deployment guides for each level

Core Systems

App Blueprints by Niche

Learning Resources

​The 3 Paths

Beginner

Intermediate

Advanced

​Beginner Path

​Who This Is For

​What You Get

​Technical Stack

Tools

Output

Storage

Hosting

​Build Time

​Prerequisites

​Example: The Macro Alchemist (Beginner)

​11 Beginner Blueprints Available

​Intermediate Path

​Who This Is For

​What You Get

​Technical Stack

Tools

Output

Storage

Hosting

​Build Time

​Prerequisites

​Example: The Macro Alchemist (Intermediate)

​13 Intermediate Blueprints Available

​Advanced Path

​Who This Is For

​What You Get

​Technical Stack

Tools

Output

Storage

Auth

Hosting

​Build Time

​Prerequisites

​Example: The Macro Alchemist (Advanced)

​8 Advanced Blueprints Available

​How to Choose Your Path

​Progression Path

​Key Differences Summary

​Related Resources

Blueprint Library

Flash Modules

Ship It

Build docs developers (and LLMs) love

The 3 Paths

Beginner Path

Who This Is For

What You Get

Technical Stack

Build Time

Prerequisites

Example: The Macro Alchemist (Beginner)

11 Beginner Blueprints Available

Intermediate Path

Who This Is For

What You Get

Technical Stack

Build Time

Prerequisites

Example: The Macro Alchemist (Intermediate)

13 Intermediate Blueprints Available

Advanced Path

Who This Is For

What You Get

Technical Stack

Build Time

Prerequisites

Example: The Macro Alchemist (Advanced)

8 Advanced Blueprints Available

How to Choose Your Path

Progression Path

Key Differences Summary

Related Resources