Actualize Capstone App
The Culmination of My Bootcamp Experience
In May, I decided to take a leap of faith and begin a career transition by enrolling in the Actualize Coding Bootcamp.
Four weeks of online pre-work followed this decision, followed by 12 weeks of in-class instruction. All the dedication and hard work this summer culminated in our Capstone Showcase about two weeks ago, where we got to present our individual final projects to those in attendance. It was a very rewarding experience, and I’m proud of myself and my classmates for being able to create such interesting projects in such a short amount of time.
After taking a “week off” from coding (during which I attended a coding meet-up with half my cohort — what can I say, we were going through withdrawal!), then completing the first week of my apprenticeship at The Difference Engine, I thought it’s about time I post a summary of my app and what I learned!
So here goes!
(For those who prefer watching over reading, here’s a screencast demo of my app!)
A Race Review & Social App for Endurance Athletes
As an avid runner and triathlete, I’m very involved in the Chicago endurance community.
I’ve been on the management team of the Chicago Tri Club (CTC) since 2011 and have served as a group leader in several Chicago Area Runners Association (CARA) programs.
In almost all events I’ve been to, the conversations invariably include one or more of the following topics:
- What races are you doing this year?
- How did your last/ big race go?
- I’m new to the sport. Which race(s) should I do?
- I’m doing XYZ race. Who’s doing it too?
For my capstone, I thought it’d be interesting to bring that discussion online, not only to better keep track of these comment, but also to allow those who don’t have a real-life endurance community to participate in the discussion.
Searching for Races
Once a user has signed up for my app and created their profile, the first step is to search for races by visiting the Events Index. The main feature on the Events Index page is a dynamic Google Map written in VueJS.
The International Triathlon Union (ITU) API was used to populate the Events database (including images), and VueJS was used to dynamically hide and show races as the user types in the search boxes. Users are able to filter by country as well as various race attributes such as name, distance, or sport. The races can also be sorted by date or popularity (which is simply a calculation of the number of participants times the race rating).
VueJS hides and shows not only the event listing in the index, but also the corresponding map marker on the Google Map. The Google Map also zooms and re-centers based on which markers are still visible on the map.
Reading Race Reports
Once users narrow down their search, they will want to visit the Event Show page to view the details of the individual race they’re considering. For an upcoming race, the most prominent feature on the Event Show page is the Countdown which shows how many days are left before Race Day!
Before a user decides whether they will sign up for a particular race, they’ll want to read what others are saying about the race. However, users aren’t able to write a report for a race that hasn’t happened yet! So how do you know if people like the race?
My solution to this problem is to show Related Races on the Event Show page. For this capstone, Related Races are simply races that have a similar name, though this mechanism can certainly be fine tuned in a future version.
For races which occur annually, previous years’ races would show up as related races, and you’d be able to visit the previous races’ Show page and read Race Reports that others have written.
Once a user has read previous years’ race reviews, they can also see who is registered for this year’s race and, taking all this information into consideration, decide whether or not to do the race themselves. They can let other users know what they’ve decided by RSVP’ing for the event, and their name with a link to their profile will appear in the list of race participants.
Race Tracking and Searching
One feature I wanted to implement was a race tracking functionality, where a racer can share a link with friends and family, and they’d be able to track their progress online while spectating. However, since we only had 6 weeks to work on this project, I didn’t have the chance to seriously looking into the race tracking options.
However, I was able to graph the race route for the Chicago Marathon, after having found the course coordinates on an existing Google Map online.
I used the coordinates to create a simulation tracker that simply draws the route in 1-second intervals using the Polyline function of the Google Maps API. I used HTML5 geolocation to also show the user’s position on the map, in relation to the course.
Since the race route was being drawn on the map using the Google Maps API, I was able to also add a search functionality to the map. That way if spectators are waiting for their friend or family member to pass, they can find coffee shops, brunch places, or otherwise search the map so they can be comfortable while still supporting their loved one!
Post-Race Wrap-Up
After a race has occurred, the user can then log back into the website and write a race report based on their experience. On clicking “Add Report” from the Race Reports menu, the user is taken to the Report New page. Under Race, the Dropdown menu only lists the races that have already passed that the user had RSVP’ed to. That way, it should be fairly easy to find the most recent race they’ve done and get started on writing about their experiences.
At the moment, the Race Report simply consists of the Race Name, a title and body for the report, a rating of 1–5, and a bib number. The bib number can be used in the future for race directors to potentially verify if a user was a real participant, and also potentially tie the user’s race results to their profile.
The Rating will of course be used to take the race’s Overall Rating, as well as the rating of related races.
In addition to being able to write a report on the race they just did, a user could also see their own race results to the app. Because I had used real races from a real database, I was able to use the same International Triathlon Union API to pull real results data from their database and graph it using ChartsJS. For the purposes of this demonstration, I only showed the top 5 results for men and women for each race; however, this can certainly be expanded to show more results for even the average age-grouper.
Real people can also be linked to any online race results API to show a person’s results among all their past races. To demonstrate this, I added real people to my “users” database and again used the International Triathlon Union API to pull each person’s results from their database. While my app only currently shows results from ITU races, in future versions, other race results APIs could be used to show results from other races as well.
That’s A Wrap!
That’s all folks! I learned a lot building this app, and I’m excited to be starting my apprenticeship to see how much I can do as part of a team. I still have a lot to learn, but this app showcases not only what I learned during my bootcamp but also what I’m able to learn on my own given the necessary tools.
