Build a webapp in days — with AI and no-code.

What this is about

This article is part of our Software & Digital Products topic cluster — an overview of all articles on app architectures, web-app prototyping, and the custom-code migration path.

In the blog about app types I described why PWAs and web apps are the optimal choice for many startup and SME projects in 2026, and which stack actually works: Cloudflare, GitHub, Cursor + Claude Code, Lovable / v0, Resend.

In this post you get the concrete, honest walkthrough of how I used that stack for two real projects:

• aheadoftime.ch — my own agency website, multiple locales (DE / EN / FR), cases, services, blog, contact form with spam protection
• purebosnia.com — a marketing/product website for a Bosnian lifestyle project, multilingual, with newsletter and a simple shop lead-up
• Plus notes on additional smaller setups I built following the same pattern

Target audience for this blog: people who do not come from a classic software engineering background — marketing leads, founders, innovation team heads, SME executive board members. You don't need any coding background, but you do need the willingness to think along step by step.

Disclaimer up front: "Without classic coding" does not mean "without understanding". You will have to learn what a Git repo is, what a branch is, how a deployment works. But: in 2026 a few hours of onboarding plus iterative on-the-job learning are enough. You no longer need to write JavaScript code yourself.

Why AI + no-code + Cloudflare right now

Three developments have come together in the last 18 months, and that makes the stack unusually powerful in 2026:

1. AI coding assistants have reached a level that's productive. Cursor and Claude Code generate working, maintainable code from natural language. What was still a "toy" in 2023 is productive daily reality in 2026.
2. Cloudflare is the default hosting stack in 2026 for small to mid-size web apps. Pages, Workers, D1, R2, KV — complete backend infrastructure, serverless, with a generous free tier.
3. AI design tools (Lovable, v0, Figma AI) deliver usable frontend components in minutes — as a starting point you then refine.

Together, these three layers change what a single person or a small team can build with minimal budget. Drastically. For more ambitious projects, we combine the same stack with classic custom platform development once an MVP shows traction and needs to be engineered for stability.

My stack — overview

┌─ Concept & requirements ──────────────────────────────────┐
│  Claude / ChatGPT — sparring partner for sitemap, flows,  │
│  requirements spec, edge cases                            │
├─ Design ───────────────────────────────────────────────────┤
│  Figma + Figma AI OR Lovable / v0 (for fast sprints)      │
├─ Code & build ─────────────────────────────────────────────┤
│  Cursor (VS Code fork with AI) + Claude Code (CLI agent)  │
├─ Repo ─────────────────────────────────────────────────────┤
│  GitHub (private or public)                               │
├─ Hosting ──────────────────────────────────────────────────┤
│  Cloudflare Pages + Workers + D1 + R2                     │
├─ Email & forms ────────────────────────────────────────────┤
│  Resend (transactional) + Cloudflare Turnstile (anti-spam)│
├─ Analytics & SEO ──────────────────────────────────────────┤
│  Plausible + Cloudflare Web Analytics + Google Search Console│
└────────────────────────────────────────────────────────────┘

Total monthly cost for both projects: ~35 CHF (Cursor Pro, Resend Pro tier optional, everything else free tier).

Case 1: aheadoftime.ch — step-by-step walkthrough

The nine setup steps at a glance:

Starting point

I needed an agency website with:

• Multiple languages (DE, EN, FR)
• Sections: Home, Services (4 sub-pages), Cases (7 sub-pages), Blog (15+ articles), About, Contact
• Modern design with header hero, parallax, scrollytelling
• A working contact form without a mailto fallback
• DPA/GDPR-compliant Maps integration

Step 1 — Concept and content strategy (Claude as sparring partner)

I explained my business positioning, target audiences and brand voice to Claude across 5–6 messages. Then iteratively:

• Defined the sitemap: "Here is my activity description. What structure makes sense from an SEO and conversion standpoint?"
• Worked out a content brief per page (tone, sections, mandatory elements)
• Researched SEO keywords and LLMO terms (with verification of factual claims — see thinking traps 14 and 15)

Output: 25+ content brief files in Markdown that flowed directly into the coding step.

Effort for step 1: ~12 hours spread across multiple sessions.

Step 2 — Design concept

Here I did not take Lovable/v0 but fed Cursor + Claude Code directly with a clear design system:

• Brand colors (cyan/green/purple/orange as service accents, dark grey as BG default)
• Typography (light/300 weight, sans-serif, clear hierarchy)
• Card style (dark grey #1a1a1a, thin white border 15% / 40% on hover)
• Icon system (Lucide React, white flat)

Reasoning: For an agency website I wanted full control over look & feel — and the system is clear enough that Claude Code applies it consistently across all pages.

Alternative for other projects (e.g. purebosnia.com): Lovable as a quick start, then manual fine-tuning. Saves 60–80% initial effort for simpler brands.

Effort for step 2: ~6 hours (design system definition + first Figma mockups)

Step 3 — Set up the repo (GitHub)

• New repository created on GitHub (private — public makes no sense for an agency site)
• README, .gitignore, basic folder structure
• Cloned locally via Cursor

Effort for step 3: ~30 minutes

Step 4 — Code initialization (Cursor + Claude Code)

• Next.js project with Tailwind CSS and MDX support initialized (Claude Code generates this from a single prompt)
• Brand colors defined in tailwind.config.js
• Base components (Header, Footer, Card, Section, PageHero) built together with Claude Code

At each step I clearly articulated what I wanted:

• "Build a Card component with dark grey BG (#1a1a1a), white border (15% opacity, 40% on hover), Lucide icon top-left, headline, body text. Mobile-responsive."
• Claude Code generates the code, I review (read, don't edit), small adjustments via natural language, done.

Effort for step 4: ~8 hours for the complete base component library

Step 5 — Populating content (MDX + content briefs)

• Drop the content briefs prepared in step 1 as MDX files into /content/blog/, /content/cases/, /content/services/
• Claude Code builds the dynamic routes, SEO meta, schema markup, related-articles logic

Effort for step 5: ~10 hours for all content

Step 6 — Header hero + parallax + scrollytelling

• <PageHero> as a shared component with header-image slot, eyebrow, H1, sub, optional CTA
• Parallax layer via JS (factor 0.5 desktop / 0.25 mobile, disabled on prefers-reduced-motion)
• Content block reveal via Intersection Observer

Effort for step 6: ~6 hours — including performance tuning because LCP mattered

Step 7 — Contact form + backend

This is where it gets interesting for non-coders. My setup:

• Frontend form with all required fields (generated in step 4 with Claude Code)
• Cloudflare Turnstile as an anti-spam layer
• Honeypot field as additional defense
• Cloudflare Worker as API endpoint (/api/contact) receiving the form submission
• Resend integration inside the Worker for email delivery to info@aheadoftime.ch (address hidden from the frontend!)
• Auto-reply to the submitter via Resend
• Two-click Google Maps embed for the office address (GDPR-compliant)

Effort for step 7: ~5 hours — including end-to-end mail pipeline testing

Step 8 — Deployment on Cloudflare Pages

• Cloudflare account connected to the GitHub repo
• Pages project created: Cloudflare automatically detects it as a Next.js project
• Custom domain (aheadoftime.ch) configured — SSL auto-provisioned
• Environment variables (Resend API key, Turnstile keys, receiving email) added

Every push to the main branch deploys automatically. Preview deployments for feature branches come for free on top.

Effort for step 8: ~2 hours, including DNS migration of the domain

Step 9 — SEO, analytics, schema markup

• Plausible snippet embedded (cookie-free, GDPR-compliant)
• Cloudflare Web Analytics enabled
• sitemap.xml and robots.txt generated via Next.js tooling
• Article schema and FAQ schema on blog posts (for SEO + LLMO)
• Google Search Console + Bing Webmaster Tools connected

Effort for step 9: ~3 hours

Total effort aheadoftime.ch

• Actual working time: approx. 52 hours spread across 4 weeks (evenings/weekends, in parallel with client mandates)
• Tool cost during this phase: ~30 CHF (Cursor Pro subscription for 1 month) + 0 CHF hosting/email/domain (all free tier or already owned)
• Output: fully functional multi-locale agency website with blog, cases, services, contact form, header hero + parallax — production-ready

What would this have cost classically? Realistically: 40,000–80,000 CHF at a classic agency, 6–10 months of project time.

Case 2: purebosnia.com — step by step

Starting point

Marketing/product website for a Bosnian lifestyle project:

• Multilingual (DE, EN, BS)
• Brand storytelling page
• Newsletter signup
• Shop lead-up (with "Coming Soon" status, Mailchimp/Brevo integration for the pre-launch list)
• Mobile-first design

What was different from aheadoftime.ch?

• Lovable as initial generator: Here I did not build from scratch in Cursor but generated the first UI iteration in Lovable. Reasoning: the brand design was more flexible; a modern, photo-driven look was enough initially. Lovable delivered a first version in 20 minutes that was 60% usable.
• Cursor + Claude Code for refinement: I exported the Lovable output to GitHub, opened it in Cursor, and refined it together with Claude Code — header, images, multilingual support, newsletter integration.
• Cloudflare Pages identical: Same hosting stack as aheadoftime.ch.
• Resend for newsletter confirmation and form submissions.

Total effort purebosnia.com

• Actual working time: approx. 16 hours over 2 weeks
• Tool cost: Lovable subscription (~25 USD for that one month) + otherwise free tier
• Output: productive marketing site with newsletter, multilingual, mobile-first, production-ready

Lesson learned: Lovable as an initial generator saves enormous time for simpler brands. With a more complex brand system (like aheadoftime.ch with 4 service accents and strict card patterns), going straight into Cursor pays off.

More projects following the same pattern

I now use this stack for:

• Smaller microsites for clients (typically 8–20 hours of effort)
• Landing pages for campaigns (typically 4–8 hours)
• Internal tools for AOT workflow automation (bots, dashboards, mini-apps with Cloudflare Workers)
• Bootcamp practice environments for workshop participants

The stack scales beautifully from "20-hour microsite" to "full agency website". Where it's about a real product platform with user accounts and transactions, our Sharyoo platform case shows how far you can carry the same pattern.

When it's time for custom code

For all my love of the AI + no-code stack: there is a real limit at which the efficiency gains tip over. Once your webapp either gets real scale (hundreds of concurrent users, transactional workflows touching money) or needs special features the generator simply cannot deliver (complex permission models, real-time sync, custom algorithms, sensitive data pipelines), workaround engineering starts eating your time.

The decision between "stay with no-code" and "migrate to custom" can be mapped onto two axes: user scale (how many people actually use the app, at what frequency?) and custom feature need (how specialised are the functional requirements?). For most SME MVPs you stay in the bottom-left quadrant — no-code is plenty. Only when you drift toward the top-right does the move to your own codebase with Next.js, dedicated infrastructure and a classic dev setup pay off.

Important: migration is not the success itself, it is the moment your product has graduated out of the MVP stage. Migrating too early burns budget on engineering instead of product validation.

Practical guide for non-tech people — the action plan

If you want to start yourself now, here is your 7-point plan:

Day 1 — Concept

• Describe your project in 5 sentences
• Chat with Claude or ChatGPT through: sitemap, user flows, core features, edge cases
• At the end, write yourself a content brief per page (max 1 page per page)

Day 2 — Accounts and tools

Setup list, in order:

1. GitHub account (free)
2. Cloudflare account (free)
3. Install Cursor (free tier or Pro for 20 USD/month)
4. Anthropic account for Claude / Claude Code (free tier or Pro for 20 USD/month)
5. Resend account (free up to 3,000 mails/month)
6. Plausible account (optional, 10 EUR/month) or Cloudflare Web Analytics (free)
7. Buy a domain (typically 12–20 USD/year at Cloudflare Registrar or Namecheap)

Day 3 — Design

• Either: open Figma, generate a base layout with Figma AI, refine manually
• Or: open Lovable, describe your app in natural language, let it generate the initial UI
• Note down brand colors, typography, component system

Day 4–5 — Code setup

• Create the GitHub repo
• Open Cursor with Claude Code, clone the repo
• Feed Claude Code with your concept and design: "Initialize a Next.js project with Tailwind CSS and MDX based on the following brief: [paste brief]"
• Build the components (Card, Header, Footer, Hero, Form) — step by step with Claude Code

Day 6 — Populating content + form backend

• Create your content as MDX files
• Build the form backend via Cloudflare Worker + Resend (Claude Code can do this end-to-end)

Day 7 — Deployment + polish

• Connect Cloudflare Pages with the GitHub repo
• Configure custom domain
• Run a Lighthouse audit, optimize performance
• SEO meta, sitemap.xml, robots.txt

Realistic time estimate: If you're doing this for the first time, you will need 14–20 days instead of 7 — learning curves, pitfalls, iterations. That's normal. By the second project you're 3× as fast.

Common pitfalls for non-tech people

• Git workflows: branch, commit, push, merge — understand these basics before you start. A 30-minute YouTube tutorial is enough.
• Environment variables: API keys belong in .env (local) and in Cloudflare ENV (production), never in the repo. Otherwise you leak credentials.
• Cursor cost spiral: Claude Code via Cursor consumes tokens. If you prompt all day without focus, it costs you more than planned. Formulate clear tasks.
• Hallucinations: AI sometimes invents library functions that don't exist. If the code crashes: "Does this really exist, or did you make it up?" is a legitimate re-prompt.
• Performance: AI-generated code is often functional but not always performance-optimal. Run Lighthouse audits, optimize with Claude Code.
• Mobile testing: Browser devtools are not enough. Test on a real iPhone and a real Android device.

Workshop / Bootcamp: I coach your team through the setup

If you or your team want to learn exactly this setup hands-on, I offer 2- to 5-day workshops and bootcamps:

Format options

• 2-day intensive workshop for 4–8 people: concept, setup, first page deployed
• 5-day bootcamp for 4–8 people: complete MVP web app production-ready, plus training for independent further development
• Accompanying coaching over 4–8 weeks (1× weekly 2h call) for teams building their first application alongside their day job

What participants take away

• Practical understanding of the complete stack (Cloudflare, GitHub, Cursor, Claude Code, Resend)
• Their own running web app / PWA at the end
• Understanding of how to replicate and extend similar projects independently
• A clear sense of when they can do this themselves — and when external partners make sense

Who it's for

• Marketing and innovation teams in SMEs who want to become digitally capable
• Founder teams who want to build their first MVP independently
• Executive board members who want to understand the setup once themselves to make better tech decisions
• Internal IT or digital teams who want exposure to modern stack setups

Sustainable added value

Unlike a classic agency project that delivers one product to you, the bootcamp transfers the ability to build many products yourself. Afterwards you don't just have a finished web app — you also have the team that builds the next one independently. If you prefer a guided start, our workshop guidance offers the right format.

Interested? Write to me via the contact form — we'll discuss your concrete scenario in a 30-min call.

Q&A — the most common questions about the AI + no-code setup

Can I really build a production-ready web app without a coding background? Yes, with the right guidance in the first steps. You will learn coding concepts along the way (Git, ENV, builds) — but you won't have to write code yourself. Iterative on-the-job learning.

Where are the limits? Complex backend logic (multi-step workflows, data pipelines, real-time features), deep hardware integration (mobile apps with Bluetooth or similar), and very high performance requirements (games, real-time 3D) — that's where you need classic software engineers. For recurring operational processes these limits can often be pushed using multi-agent workflows instead of coding everything yourself.

What happens if the stack looks different in 2027? It will. Cloudflare will bring more features, Cursor/Claude Code will get better, new AI design tools will arrive. But: the underlying pattern (concept → design → code → repo → hosting → forms/email) stays. Anyone who understands the pattern can absorb any concrete tech change.

Is it worth it for a Swiss SME to train an internal "web app champion" rather than hiring an agency? Yes, in most cases. One person on the team who masters this stack beats any external agency on speed, cost and iteration tempo — for standard MVPs and marketing web apps. For very complex custom builds, an agency or senior dev still makes sense.

What about maintenance and updates? Cloudflare patches the infrastructure. Cursor/Claude Code help with dependency updates. Once you've understood the stack, maintenance is realistically 2–4 hours per month for a mid-size site.

What about data protection and compliance (DPA, GDPR)? Cloudflare has EU data centers, Resend likewise, Plausible is GDPR-compliant — the stack can be set up cleanly compliant. Important: privacy notice with concrete tool listings, cookie banner where needed, data processing agreements with Cloudflare and Resend.

My takeaway

In 2026 the entry barrier for your own web apps and MVPs has dropped drastically. Where in 2020 you still needed a 5-person team and 6 months, in 2026 with the right setup you can start alone in 2–4 weeks. That fundamentally changes the game for startups, SMEs and innovation teams. To make sure that speed actually creates impact, when needed we couple the prototyping to a clean strategy implementation — otherwise you build fast, but past the target.

What has not changed:

• You need clarity on what you want to build (concept).
• You need discipline to verify AI output (see thinking traps 14 + 15).
• You need willingness to iterate — first throws are never perfect.

But if you bring those three things — and invest a few days in onboarding — in 2026 you have a tool that was completely unthinkable just a few years ago.

If you'd like a concrete start, get in touch. Bootcamp, workshop, or just a sparring call — I'm happy to help build the setup for your context.

You might also be interested in

• Which type of app fits your project? Native, cross-platform, PWA, hybrid + AI MVP setup → the prior post to this walkthrough — which app type suits which project
• 15 thinking traps in digital business — part 2 → the AI-specific thinking traps (authority bias, hallucination) you absolutely want to keep in mind during the AI MVP setup

Sources and further reading

• Cloudflare (2024). Pages Documentation.
• Cloudflare (2024). Workers Documentation.
• Vercel (2024). Next.js Documentation.
• Cursor (2024). Documentation.
• Anthropic (2024). Claude Code Documentation.
• Lovable (2024). Documentation.
• Resend (2024). Documentation.
• GitHub (2024). Documentation.

This list covers the primary sources for the concepts discussed in this article. It is not exhaustive but should provide an entry point for those interested in going deeper.