PROJECT OVERVIEW:
The purpose of this project is to deliver an improved, all-encompassing disc golf tracker to help users find their frisbees more quickly and view their performance. To start the software, go to the website, create an account, and you will be redirected to the web application. From there, connect your tracked disc to your account on the web app and start playing!
This software includes: Add or remove tracked discs, view flight stats, record throws for better insights, and use tracking functionality to find discs more quickly.
WANT TO REPORT A BUG OR SUGGEST A FEATURE? Contact Us: moshernat@hotmail.com, wearewebtastic@gmail.com
USER DOCS:
- Interface incorporates WCAG AA styling to comply with ADA standards for web development.
- The color palette and typeface choice are an improvement from the original prototype. Improving readability by using a San Serif typeface (Inter) via Google Fonts for free-use purposes.
- Colors will not cause conflict with readability. WEBAIM.org https://webaim.org/resources/contrastchecker/ verifies this.
ACCESSING/USING THE APP:
Follow these steps to get started tracking your disc golf throws.
Go to:
🌐 https://disc-tracking-software.vercel.app/
Use the navigation at the top of the page to either:
- 🔑 Sign in with your existing account, or
- 🆕 Create a new account
Once logged in:
- Name and start a session
- Open the Disc Actions dropdown
- Add a new tracked disc by entering its name and connection number
- After adding, you can:
- Sync the tracker
- Switch between discs in your bag
- Remove a disc if needed
With a disc selected and synced:
- Use the live GPS distance preview to help locate your disc after a throw
- Record throws using:
- Built-in accelerometer data (auto-detects flight), or
- Manual stopwatch mode (configurable in settings)
After a throw, you’ll see:
- 📊 A detailed flight path chart showing curvature, distance, and direction
- Key metrics include but are not limited to:
- Flight time
- Distance
- Average velocity
- Metrics can be changed to meters or feet, and can be chosen to be visible in the settings panel when desired
This data helps you understand disc behavior — perfect for choosing the right disc for long shots, hard right hooks, or windy conditions.
Not every throw is perfect (trees happen!). After viewing results:
- Click ** "Add Throw to Records"** to save the throw to your statistics, or
- Reset the timer and try again if you don’t want to log it
- Autosave is also available; users can delete their bad throws in the throw statistics page when desired
Saved throws appear in the User Throw Statistics section, where you can:
- 📈 Analyze patterns in sessions over time
- 🔍 Compare different discs
- 🎯 Identify which disc performs best in specific situations
Experiment freely — the more data from sessions you collect, the better your on-course decisions will become.
DEVELOPER DOCS:
- Landing page was created using Next.js with TailwindCSS and TypeScript for styling. Universal styles have been applied to meet WCAG AA standards. For the backend, a file structure was established with 2 groups to differentiate between the website and web app. This is shown using () in the naming of folders for organizational purposes.
- Components and other TSX styling are shown in PascalCase, with the database using snake_case.
- Configs for auth have been started, the .env.local file is being used to handle environmental variables as well as backend API keys. Additional API calls are being routed through the api folder in the project. NOTE: Env files are NOT public and are shared privately between contributors
- Backend Server will be done in GO, this interacts as the port for the web application to interact with the devices and send data packets for the web app to process and serve to the end user. Recharts, a Next.js library, handles the visualization of the data in chart and card form.
- The embedded system will be written in C/C++ and flashed onto the physical device memory.
HOW TO OBTAIN SOURCE CODE: This is shared through GitHub and downloading dependencies. To know which ones are to be downloaded, please refer to the project package.json file and run the command "npm ci". This reads the package.json and package-lock.json and does a clean install. Do this instead of the general "npm install" as that will be much cleaner to work with for CI/CD pipelining.
Planned Directory Structure: As mentioned in the developer docs. How to Build/Test: See Getting Started in bottom of this Readme file. How to release a version: Go to GitHub releases, draft a new release. This will create a new version to be tracked. Bug tracker (See Issues in GitHub): Next.js Bugs/ Warnings
Sprint/Portfolio Backlogs: https://docs.google.com/document/d/16ZOI3ZHT498dK0WAmcIgPP1SnBpY4iGB3s9eKXZxDik/edit?usp=sharing
- Frontend | Next.js, TailwindCSS
- Backend & DB | Go, PostgreSQL with Drizzle ORM, NeonDB
- Auth/Proxy | NextAuth.js
- Hardware | Flashed in C with GO server connection, Antenna integrated GPS module SKM52, XIAO RP2040, Disc Golf Driver
To run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.