Creating applications with the RunSignup API is becoming simpler all the time with AI tools like v0.dev. We are now beginning to share these applications with customers to use directly as well as build additional custom capabilities on top of our base application.
Results Kiosk Application
The first application in our library is a simple Results Display Kiosk application that makes it simple for customers to provide a walk up kiosk so participants can quickly search for their time. In the example below, we search for the Blue Bell Fun Run race, and then searched for participants with the name “bob”. Clicking on one of those shows the full page on the right, which uses the race default color scheme, logo as well as timer logo and custom messages (which are set by clicking the gear icon and setting those under Preferences).
There are a variety of options which we cover in more detail in this blog.
This application is live and ready for use now. Simply type the name of a race with RunSignup results in the past year and the rest is pretty intuitive.
Customizing the App
Not only can customers use this app today, but the app can be “forked” so that customers can create their own custom version. This is surprisingly simple using v0.dev.
Step 1 – Open the Application from the RunSignup Library in v0
This can be done even if you have not used v0 in the past. The Results Kiosk App, here is the link to open the project.
If you have set up a v0 account, this is the display you will see. In the middle pane, is the list of prompts and responses that Soren had when he built the application in v0. In the right pane, you see a preview of the application. There is a toggle that switches to a view of the code. On the upper right, you will see “Version 25” – v0 creates a new version of the application each time you prompt and it responds with new code if you have asked it to make a change. On the far right highlighted with our red box is a “Fork” option, which we will cover in the next section.
Fork the Project
“Fork” is a common term in programming. It basically creates a copy of the project that can then be changed and edited without impacting the original project. This allows for starting with a working project from our library and then customizing the project.
Create A New Application
Now that there is a fresh new project that is at Version 1, v0 makes it simple to make changes. For this blog we did a simple one prompt example moving the timer logo and timer message to the upper right corner rather than below the time.
The prompt is highlighted in green/blue in the big red highlighted section:
“can you move the timer logo and timer message to the top right of the individual result display page?”
v0 thought for 3 seconds and then started writing code and replying to let us know what it was doing. The Version 2 of the app including this new feature is created and is appearing on the right preview section. We Deployed that app so there was a public URL that others could see and share – https://v0-deployed-fork.vercel.app/. To see the timer logo, add one by clicking the gear icon and adding an image and a timer message in Preferences.
Summary
Over the coming weeks we will be creating a RunSignup AI Application Library. We will add to this over time, but there will be two general categories:
- Dashboard Extensions where Event Directors would login to see their event information in a custom webpage.
- Front End Public Pages like this Results Kiosk Application (or more complex pages like switch event, which would require login like RunSignup currently does for things like modifying a registration).
We are doing a couple of development projects to improve our API for use with AI tools like v0. One will be an OAuth 2 based login that can be added to applications so users of the application are authenticated with their RunSignup Login before accessing the application and data.