The primary objective of this project was to develop an interactive user interface in Svelte for goal, activity, and progress tracking. I chose to focus on health and fitness, as these are key areas in my life that I actively prioritize and track.
Project GitHub Link: https://github.com/madicoulson/Workout-Tracking-Svelte
Public Application Link: https://madicoulson.github.io/Workout-Tracking-Svelte/
Before beginning code development, I conducted interviews and created sketches to better analyze and understand the needs surrounding my application. Click the Design Phase link above to view the documentation.
Click the Interface Description and Functionality link above to view documentation on the interface and descriptions of the component functionality.
How I Implemented this Application
Software, Languages, and Frameworks
This application was implemented using Svelte, which is a JavaScript web development framework. Additionally, I used JavaScript, CSS, and HTML. The writable Svelte store library was utilized to define variables that can be edited or changed from outside the component it is defined in. Also, the onMount functionality from Svelte was used to run functions on load of the webpage. External from Svelte libraries, chart.js was utilized to create the graphs shown in the Tracking Stats component.
Code Structure
In total, 9 Svelte files were developed to create components within the application. One JavaScript file (script.js) was used to export functions and writable store variables that multiple components utilized. An example of this is the appendCurrentDay function which is used to implement or edit data within the application, and called in several components. Two SVG images were created using an online SVG tool generator. The Svelte components, script.js, and SVG files are all located in the lib folder under src. Most style implications are defined within the Svelte component files, however, overlapping component styles are defined in app.css in the src folder. Finally, the main App.svelte file holds the component calls to deploy and display the webpage.
Use of AI
I utilized ChatGPT to help debug specific encountered issues. For example, I had trouble implementing the graphs using chart.js, so I used ChatGPT to help figure out why the graphs were not appearing in the component. The reason was because I had not defined the context as 2d, and therefore the graph was not rendering properly. A similar process was used on other encountered issues. In general, ChatGPT was helpful, however, I had to ensure I gave it lots of context and at times had to ask for help in different ways to find the correct answer. I did not use it as a way to wholly generate code, only as a debugger for specific instances.
Future Work and Ideas for Further Implementation
Allow the data to automatically interact in all components so that the Refresh Goals and Refresh graphs buttons are not necessary. I struggled in doing this, although it most likely can be done with writable stores and refactoring.
Fix the buttons to make the grayed out when not available to click rather than having a pop-up upon incorrect clicking. This was something I planned on doing but ran out of time.
Add a Previous Workout button in the Past Workouts component so you can move both forward and backward between workouts. This was something I planned on doing but ran out of time.
Create a better display for the Past Workouts component, most likely consisting of a calendar feature where specific dates can be selected.
Alter the goal setting ability in Current Goals to create more realistic, actionable goals for a specified period of time. For example, setting a daily goal rather than an overall, running total goal.
Add more graphs within the Tracking Stats component, and allow the user to add their own specifications of what elements they would like to track in graph format.
Add a way to customize the colors or themes of the UI. I planned on doing this, but ran out of time.
Allow the user to enter more than one workout per day / session. Currently, only one workout can be entered, and if another is it overwrites the previous entry.
Add a way for the user to develop a new component which is customized to what they want to track, such as sleep or screen time.
Demo Video