GitHub Spark - primeras impresiones

Hace unos días github lanzó su nuevo producto, GitHubSpark, veamos ahora de que trata

1 - Qué es GitHub Spark? 

Spark es una plataforma para hacer vibe coding de aplicaciones, desde el principio hasta el final, esto incluye tanto el desarrollo del front end, el back-end o incluso el despliegue o la infraestructura. 

La idea principal de spark es que no tengas que salir de tu navegador, todo se hace a través de un campo de texto donde con lenguaje natural le pides que es lo que quieres hacer. 

Tiene un runtime con acceso a datos, configuración de plantillas de la app como colores, tipo de letra o  incluso tiene acceso a algunas LLMs si le quieres poner una funcionalidad con inteligencia artificial. 

En resumen es una herramienta de vibe coding.

2 - Creación de una web con GitHub Spark

Para empezar a trabajar únicamente tenemos que empezar a poner prompts en el siguiente campo: 

Y este es el promp que nosotros hemos enviado:

**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

Como vemos es un prompt bastante largo y bastante específico en lo que es necesario de hacer. Pero resumiendo es una web full stack con una base de datos, y tiene que tener varias vistas junto a un formulario de contacto. 

Y el resultado final, tras 6 minutos habla por sí mismo. 

Spark nos ha devuelto una web que contiene las vistas que le hemos pedido que son, la landing page, con el hero banner. Luego la tienda, el blog y el formulario de contacto. Todo separado y especificado de una forma sencilla. 

Puedes encontrar la web pública (necesitas cuenta en github) aquí -> https://handmade-crochet-sho--electnewt.github.app/ y el enlace a github -> https://github.com/ElectNewt/test-spark-crochet  

Conclusión

Simplemente quiero hacer un resumen y es que me ha dejado loco; Tiene una facilidad de uso tremenda y estoy seguro de que en unas pocas iteraciones puedes dejar unas interfaces que parecen 100% profesionales. 

Veremos hacia donde avanza la IA y la creación, sobre todo en programación, pero a mi ya me estaría bien que se quedara unos añitos donde está 😓.