Skip to main content

Vibe Coding with GitHub Spark: From idea to app in minutes (continued)

Yesterday we started exploring GitHub Spark. We looked at the basic prompting experience, the live preview but also explored the visual editing features and the specification generation (through a PRD.md file). But we didn't have the time to check out all the features. 

Let's dive in...

Seamless GitHub Integration

This is where Spark really shines. Unlike standalone vibe coding tools, Spark can create a GitHub repository from your project. Once created you get a repository with GitHub Actions, Dependabot, and all the standard tooling. The code is synchronized so you don’t need to leave the vibe coding experience.


Remark: This is also a great way to better understand what is going on behind the scenes. It allowed me to fix some issues where I wasn’t able to solve it inside GitHub Spark.

Need more power? Open a Codespace directly from Spark and continue development with the full GitHub ecosystem at your fingertips.

Upload a sketch or an image

You don’t have to start with only a prompt but you can also start from an existing design or sketch you draw on a napkin. Take a picture and attach it to the Spark's input field, together with the following example prompt.

Authentication

Spark has built-in authentication, since users need to sign in with their GitHub account to access your app. You control who has access to your app by setting visibility and data access options.

 

One-Click Deployment

When you're ready, click "Publish" and your app goes live on Microsoft Azure with built-in authentication and a secure URL. No DevOps knowledge required.

 

Billing

GitHub Spark uses your existing GitHub Copilot plan. Each prompt consumes 4 premium requests, which draw from your plan's premium request allowance. (More info here: GitHub Spark billing - GitHub Docs)

 


Conclusion

I think that GitHub Spark certainly has its place among the other vibe coding tools. In addition, it offers some unique features like the visual editor and of course the great GitHub integration that makes it a compelling candidate.

My main wish is that the used model will still improve as it got stuck a few times. The good news was that I was always able to fix it by switching to the repository and do some changes there (using GitHub Copilot).

Addendum

I used Github Spark to create a 7 minutes workout application. The 7-minute workout is a high-intensity circuit training routine designed to deliver maximum fitness benefits in minimal time using just body weight, a chair, and a wall.

I started doing this workout every day with my oldest son and we noticed that we had 2 problems;

  1. We always forgot the exact order of the routines
  2. Tracking the time manually was cumbersome

So we decided to build an app that walks you through the routine and keeps track of the time. Timing and the exact exercise are shared through audio cues so you don’t have to look at your cellphone during the routine.

The app is available here (you only need a GitHub account to be able to access it):

https://7-minute-workout-com--wullemsb.github.app

Labels:

Popular posts from this blog

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
Read more

.NET 8–Keyed/Named Services

A feature that a lot of IoC container libraries support but that was missing in the default DI container provided by Microsoft is the support for Keyed or Named Services. This feature allows you to register the same type multiple times using different names, allowing you to resolve a specific instance based on the circumstances. Although there is some controversy if supporting this feature is a good idea or not, it certainly can be handy. To support this feature a new interface IKeyedServiceProvider got introduced in .NET 8 providing 2 new methods on our ServiceProvider instance: object? GetKeyedService(Type serviceType, object? serviceKey); object GetRequiredKeyedService(Type serviceType, object? serviceKey); To use it, we need to register our service using one of the new extension methods: Resolving the service can be done either through the FromKeyedServices attribute: or by injecting the IKeyedServiceProvider interface and calling the GetRequiredKeyedServic...
Read more

Kubernetes–Limit your environmental impact

Reducing the carbon footprint and CO2 emission of our (cloud) workloads, is a responsibility of all of us. If you are running a Kubernetes cluster, have a look at Kube-Green . kube-green is a simple Kubernetes operator that automatically shuts down (some of) your pods when you don't need them. A single pod produces about 11 Kg CO2eq per year( here the calculation). Reason enough to give it a try! Installing kube-green in your cluster The easiest way to install the operator in your cluster is through kubectl. We first need to install a cert-manager: kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.14.5/cert-manager.yaml Remark: Wait a minute before you continue as it can take some time before the cert-manager is up & running inside your cluster. Now we can install the kube-green operator: kubectl apply -f https://github.com/kube-green/kube-green/releases/latest/download/kube-green.yaml Now in the namespace where we want t...
Read more