We have another example application built with v0.dev and the RunSignup API – this time a Customizable Results Lookup and Finisher Certificate Page. This application is live and ready for use for races within the past year doing RunSignup Results that is publicly shared and viewable.
Result Kiosk Quick Overview
The application is very simple and is all contained in a single page that allows users to search for a race and then search for a participant with the name or bib. For example, search for Blue Bell Fun Run and then search for a common name like “Bob” as shown above. It shows search matches. Click on the individual and it will switch to a temporary view of the person’s results (goes back to search page after a variable time like 10 seconds).
Customization Built Into the App
Clicking on the gear icon allows for customization of the page with a variety of display options like chip or clock time, whether times are rounded to the second, custom message for the participant, custom message and logo for the timer, and color selector. The app tries to get the race logo and default color scheme to match.
Customizing This Application
Not only can customers use this application today, they are also welcome to “fork” this application and make their own. Signup for a v0.dev account (you can have a free account and still use this). You can then open up this link – https://v0.dev/chat/deployed-fork-0Q9zSnSCs4S. When you do that, you will be able to see the whole chat history and versions that Soren had in the center, and the deployed application on the right.
On the upper right corner there is a button to “Fork” this project. This means you will now control your own version of this application. Using v0, you can use prompts to to do things like move the location of the timer logo, or change the font size of the message or name of the participant.
We envision creating a library of v0 applications that use the RunSignup API that customers will be able to use and modify for their own needs.
Soren’s Motivation
This application was built by Soren Larson, our Senior Technical Account Manager for Timing. When he was at Mtec they had several clocks to show participant times. The LED’s were high maintenance and complicated to setup.
He originally started rebuilding this application a couple of weeks ago with Cursor, but that was frustrating. The v0 tool provides a much simpler development environment that no-developers can use. This applications took about 4-5 hours working on it intermittently (probably would have been only 3 hours if he sat and focused).
Building the Application in v0
These are Soren’s notes:
The first prompt was very simple, since I’ve learned that AI struggles to get the API calls correct and that this is one of the larger hurdles. It was:
“Using the RunSignup API how would I get a list of all events for a race_id? Tell me don’t code”
And once it returned good information I asked:
“If I were to make that call without using API keys, what event_ids would be returned for searching for the “Wharton 5K”? Tell me don’t code”
When that returned what I was hoping, I put in this prompt:
“Create an interface for users to search for a race on RunSignup. The search should go from a year ago to 60 days in the future, and only return races where “only_races_with_results” is “T”. If there are multiple races that are returned by the search, allow the user to select which one. The list of races should include the race date, city, and state for them. When a race is selected, return all of the event_ids”
This didn’t go so well, and I had to copy stuff over from the API testing interface on RSU.
That worked ok, which means I was ready to start getting it aesthetically in place. I learned from the first times on v0 and from Cursor that it’s best to get it LOOKING like I want first and then making it work right, since AI seems to break things when making UI/visual changes when things get more complicated.
I asked:
“When a race is selected, in the background go to https://runsignup.com/Race/Results/x where “x” is the race_id and use the icon from the upper lefthand corner to show at the top of the page instead of “RunSignUp Race Search”. use the colors from the header for the background of the application until or unless a different race is chosen.”
I then got lost in the wilderness of getting it to pick colors correctly. One big thing I’ve learned from this and Cursor is that you need to learn when to cut your losses – if it’s not doing something right consistently, don’t waste time and implement a different way of solving it. V0 does great with UI stuff, so rather than constantly fighting it to get colors right, I just had it make a color picker in the Settings later on.
Then I could start getting into the actual results, and gave it the following prompt, as well as a concrete example from the API tester
“Once a race is selected, store that race_id and all associated event_ids and use them with this method https://runsignup.com/API/race/:race_id/results/get-results/GET (where :race_id is the race_id) to return all results for the race.”
“The results should be stored in the background. The user may then search using either bib number (bib_num) or name (first_name and last_name) to find participants and return both their clock_time and chip_time “
I did have to make more prompts to dial things in – don’t make users choose a specific event, search all of them etc – and found that concrete examples helped and that it’s also useful to tell v0 that it should “use this as an example, don’t hardcode it” to prevent a false sense that things were working.
Most of the prompts were small changes from there – I had a very specific idea of how I wanted this to look and behave aesthetically, so I played with sizing and placement a lot. By Version 37 I had a really good, really usable program. I forked this one, so that I always had a “save point” to fall back on. Basically, if this were Groundhog Day I could skip through the first hours of the day to get to a place where I wanted to make different decisions.
From here there were a few dead ends – this is where trying to get the colors right started breaking stuff and I eventually stashed that into the Settings. Once this was usable, I deployed it and handed it to a few folks for testing (namely Elvir!) who came back with some good suggestions that were easily implemented. All together I have 7 forks, the last of which is just one that people could ask for to expand upon for their own use cases (adding in Sponsor components, moving around placement, deciding to use more fields from the Results API).
What was also really cool was the ability to take suggestions and deploy them without having to send anyone a new link – I noticed that the Timeout wasn’t working, so I worked on that and deployed a fix in the background. It was really helpful to read the full output when the v0 made a change and use that to make a more educated followup prompt or decision. I also leaned heavily on saying “tell me don’t code” when asking why certain things were or weren’t working, and also telling it not to hardcode if I was giving specific examples.
It also takes images really well, so I could add arrows to a screenshot and say “Make the area indicated by the red arrow bigger and use that color in the area indicated by the green arrow”.
v0 also created the documentation you can find behind the gear with just a single prompt asking v0 to write document for users.
Here’s the program: https://v0-results-display-c4.vercel.app/