Runner's Roadmap

• 

  Runner's Roadmap Home Page

• 

  Enter Options with Dropdowns

• 

  Calendar generated workout schedule

Inspiration

For four years, I ran for my high school's cross-country and track teams, so I always had a coach to give me weekly workouts in preparation for races. However, in college, I don't have a dedicated point person to refer to for daily running-related workouts. In my training for a marathon, it's been difficult to find a personalized training schedule for someone with my running experience because there's so much information out there that may or may not be applicable to me.

What it does

Runner's Roadmap takes in a variety of parameters and outputs a customized workout plan for the user depending on what they are training for.

How we built it

I used React to house both the frontend and the backend. The user interface of the web app is built with TypeScript in React to help me catch any pre-compile time errors. I used the Google Gemini API to input a user-parameter specified prompt, making sure the output was in a JSON-style format. I parsed through the output and split it up into the title of the task, and the start and end dates. To get the calendar format, I used the open-source React Big Calendar from jquense on GitHub.

Challenges we ran into

Since this was my first time programming in React, I had a large learning curve in order to understand how to format my web app and to determine what to make a component and when. Another challenge I ran into was parsing the Google Gemini API response into two different arrays, one for the date and time of the calendar entries, and the other for the specific calendar event. Both required manipulation of dictionaries in React, and were essential to get the calendar to be up to date with the current time, as well as have proper titles/times.

Accomplishments that we're proud of

I'm proud of putting together the whole web app, especially because I never used an API or coded a web app before. With it being my first time, I had little expectations to get this much done within a month, but I'm somewhat content with this first product.

What we learned

I learned how to make a request to an API and how to utilize React's characteristics of components to simplify logic and break complex parts into smaller, more manageable pieces.

What's next for Runner's Roadmap

If I were to keep working on this web app, I would like to try to train and implement a machine learning algorithm instead of an AI API to provide a personalized workout schedule. I believe an ML algorithm would provide a more accurate training plan given the current parameters, also, since the Google Gemini API can be unreliable sometimes. Additionally, I would like to improve upon the specificity of the inputs, either by making them text inputs or creating more dropdown options. Aesthetically, I would like to add animations to the logo and make the calendar more visually appealing.

Built With

• gemini
• react
• typescript