I am a Track & Field coach. I record over 5,000 40-yard sprint dashes a year, track weight training programs, as well as numerous other statistics for individual athletes.
I want to build an athlete training log so I can compare and contrast training volumes, stimulus, and results. Having detailed logs and reports of training adaptations would allow me identify potentially beneficial/not so beneficial training methodologies.
My simple web app would need to be able to perform the following:
• Ability to add in specific categories for data capture. Examples: 40-yard dash time (seconds) / 10 meter fly (seconds) / Back Squat (lbs. or kilos) / Deadlift (lbs. or kilos) • Ability to input individual performances per athlete. • Ability to plot a trend graph for each category of data.
What would be a lightweight way of creating such an application?
I could do this in a Google Sheet or Excel Spreadsheet. However, I'd love to work on creating my own custom application to do this simple data tracking and provide reporting for analysis, and learn how to handle data in web apps.
What technology, framework, or tools would be friendly to a beginner looking to learn?
I personally would suggest ReactJS but that's obviously because that's what I work with. Depending on your experience, developing in ReactJS might mean that it will take you longer to reach an MVP.
If it were me, I would build with React (NextJS might speed up the process), deploy with Netlify, and use Firebase for user management (if needed) and for database. Again, these are just my tools of choice. If anyone else posts a different stack, that stack would be just as valid as this one.
All that being said, I'd be willing help with coding.
I think it's more important to learn what your goals are in terms of personal development.
Why are you looking for make this app and not just use Excel? Are you looking to just learn about new tech or do you want to eventually do more frontend development? Are you more interested in learning about Javascript? Or just creating web apps in general? Do you want to code, or do you like interfaces more?
There are plenty of tools nowadays for developers and designers looking to code, it's just good to know if you're more into hacker stuff like CLIs or hand-holding stuff like GUIs. I'm going to assume a mix of both.
In web development, there are endless paths to the same solution. I could recommend a few paths to explore, but it's such a broad explorations, it's best to know what neck of the woods I'm sending you into (and why). No reason to learn things if you don't need them, ya know?
Personally, I'd recommend using an app like Airtable to manage the data. This way you can create all the categories you need, download their mobile app and keep track there, all the benefits of a pre-made app 😜 Then you can use the Airtable API to grab your data, and create any kind of report you want. This way you avoid having to create a CRUD interface that is essentially a cheaper version of Excel/Airtable.
Ideally, one you have the Airtable API, you can work from anywhere (since the data is in the cloud). CodeSanbox or Codepen would make great IDEs (or coding environments) to test your app live as you code it.
You can use HTML+JS and just
fetch()the data, and use a library like ChartJS or D3 to display the data in graphs/charts. You could use a framework/library like React, Angular, Vue, etc, however, that's all more to learn and adds unnecessary complexity.I'd recommend using a service like Firebase if there's any extra data you can't store in Airtable (or you don't want to use Airtable / hit the free limit). It's a pretty simple API for sending/receiving data from a database.
If/when when you need the charts as a PDF, you can just "print as PDF", or use a library like HTML to PDF.