GitHub Spark - First Impressions

A few days ago, GitHub launched its new product, GitHubSpark; let's take a look at what it's all about.

1 - What is GitHub Spark?

Spark is a platform designed for vibe coding applications, from start to finish. This includes everything from frontend and backend development to deployment and infrastructure.

The main idea behind Spark is that you never have to leave your browser. Everything is done through a text field, where you can use natural language to describe exactly what you want to achieve.

It features a runtime environment with data access, app template configuration like colors and fonts, and even includes access to some LLMs if you want to add AI-driven functionality.

In short, it’s a vibe coding tool.

2 - Creating a Website with GitHub Spark

To get started, all you need to do is start writing prompts in the following field:

And this is the prompt we submitted:

**Goal**  
Build a responsive full-stack web application for selling handmade crochet products.  
The site must combine a storefront and a read-only blog, with every story linking back to products.

---

#### User-Facing Pages & Flows
- **Landing / Home**
  - Hero banner with a standout product photo
  - Featured products grid (4–8 items)
  - Latest 3 blog post teasers
  - Commission CTA panel (“Ask for a custom piece”)
- **Shop**
  - Filterable, paginated grid of products (square thumbnail, name, price, “Buy Now”)
  - Clicking **Buy Now** → Checkout flow
- **Product Checkout**
  - Shipping-address form (name, email, address, phone)
  - On submit, create a Stripe Checkout Session and redirect
- **Blog**
  - Paginated list of posts (title, date, cover image, excerpt)
  - Individual post page (Markdown → HTML)
  - Publicly read-only
- **Contact / Commissions**
  - Form: name, email, description, reference-photo upload
  - Send details to admin email + store in DB

---

#### Roles & Permissions
- **Visitor**: browse, purchase, read blog, submit contact form  
- **Admin**: secure dashboard to create/update/delete products and blog posts; can toggle `visible` flag on products (items with `visible=false` are never returned by the API)

---

#### Tech & Architecture (suggested)
- Frontend: Next.js 14 + React Server Components, TypeScript, Tailwind CSS
- Backend/API: Next.js API routes or tRPC; Prisma ORM; PostgreSQL (or SQLite for local dev)
- Auth: NextAuth.js with password-less email login for admin
- Payments: Stripe Checkout & Webhooks (order confirmation, inventory decrement)
- CMS for blog: Markdown files in `/content/blog` or Prisma `Post` model
- Deployment: Vercel (edge-optimized) or similar
- Testing: Playwright e2e + Vitest unit tests

---

#### Design Language
- Palette: soft yarn-inspired pastels — blush #FDE8E8, peach #FFF1E0, powder #F6F9FF, moss #D4E7C5
- Typography: “Caveat” for headings, “Inter” for body
- Styling: rounded-lg cards, subtle shadows, hover lift, gentle Framer-Motion transitions
- Accessibility & SEO: WCAG 2.1 AA contrast, semantic HTML, OpenGraph tags, sitemap.xml

---

#### Acceptance Criteria
1. Hidden products never appear in API JSON or UI  
2. Successful purchase stores order + shipping details in DB and emails admin  
3. Blog list paginates (default 10 posts per page)  
4. Lighthouse scores ≥ 90 for Performance, Accessibility, Best Practices, SEO  
5. Contact form sends confirmation email to visitor

As you can see, it's a pretty long and specific prompt, detailing exactly what needs to be done. In summary, it's a full stack website with a database, and it needs to have several views plus a contact form.

And the final result, after 6 minutes, speaks for itself.

Spark provided us a website with all the pages we requested: the landing page with a hero banner, a shop, a blog, and a contact form. Everything came separated and clearly laid out.

You can find the public site (requires a GitHub account) here -> https://handmade-crochet-sho--electnewt.github.app/ and the GitHub link -> https://github.com/ElectNewt/test-spark-crochet  

Conclusion

I'd like to just summarize by saying it blew my mind; it’s incredibly easy to use and I’m sure after just a few iterations you can end up with interfaces that look 100% professional.

We’ll see where AI and creation go next, especially in programming, but honestly, I wouldn’t mind if things stayed just like this for a few more years 😓.