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

Popular posts from this blog

Podman– Command execution failed with exit code 125

After updating WSL on one of the developer machines, Podman failed to work. When we took a look through Podman Desktop, we noticed that Podman had stopped running and returned the following error message: Error: Command execution failed with exit code 125 Here are the steps we tried to fix the issue: We started by running podman info to get some extra details on what could be wrong: >podman info OS: windows/amd64 provider: wsl version: 5.3.1 Cannot connect to Podman. Please verify your connection to the Linux system using `podman system connection list`, or try `podman machine init` and `podman machine start` to manage a new Linux VM Error: unable to connect to Podman socket: failed to connect: dial tcp 127.0.0.1:2655: connectex: No connection could be made because the target machine actively refused it. That makes sense as the podman VM was not running. Let’s check the VM: >podman machine list NAME         ...

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.

VS Code Planning mode

After the introduction of Plan mode in Visual Studio , it now also found its way into VS Code. Planning mode, or as I like to call it 'Hannibal mode', extends GitHub Copilot's Agent Mode capabilities to handle larger, multi-step coding tasks with a structured approach. Instead of jumping straight into code generation, Planning mode creates a detailed execution plan. If you want more details, have a look at my previous post . Putting plan mode into action VS Code takes a different approach compared to Visual Studio when using plan mode. Instead of a configuration setting that you can activate but have limited control over, planning is available as a separate chat mode/agent: I like this approach better than how Visual Studio does it as you have explicit control when plan mode is activated. Instead of immediately diving into execution, the plan agent creates a plan and asks some follow up questions: You can further edit the plan by clicking on ‘Open in Editor’: ...