Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakedangit/siths-math-a-thon
📐➗ 2025 SITHS Math-a-thon Website
https://github.com/jakedangit/siths-math-a-thon
javascript math-competition mathathon nuxt open-source pinia school-project shadcn-ui supabase tailwindcss vercel vue vuejs
Last synced: about 22 hours ago
JSON representation
📐➗ 2025 SITHS Math-a-thon Website
- Host: GitHub
- URL: https://github.com/jakedangit/siths-math-a-thon
- Owner: JakeDangIt
- License: mit
- Created: 2024-08-17T20:17:39.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-09-20T13:18:48.000Z (8 days ago)
- Last Synced: 2024-09-23T17:32:35.131Z (4 days ago)
- Topics: javascript, math-competition, mathathon, nuxt, open-source, pinia, school-project, shadcn-ui, supabase, tailwindcss, vercel, vue, vuejs
- Language: Vue
- Homepage: https://math-a-thon-25.vercel.app
- Size: 1.09 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Math-a-thon 2025
> You're on the Math Team? What a nerd.
If you're reading this, you're in a very niche intersection of fields:
- Mathematics
- Computer Science
- Web Design
- and whatever other nerd subjects you can think of.
Welcome to the Staten Island Technical High School Math-a-thon 2025 repository! I hope this README allows you to more easily understand the code I've written. But for some context, the Math-a-thon is a school-wide math competition where more questions right means more points and more points means closer to winning. Every week, 20 questions are released, alongside 12 bonus questions, increasing in difficulty as you go until the last 3rd week. This website aims to digitize the whole process, making it easier on the Math Team and the competition's participants and hopefully gaining more users.
## Creator + Maintainer: [Jake J. Deng](https://github.com/JakeDangIt), class of 2025
- Email:
- [Instagram](https://www.instagram.com/jakedangit/)
- [LinkedIn](https://www.linkedin.com/in/jake-deng-905229322/)
### About the Web App
> What if we just didn't use paper anymore?
I realized that this competition could be graded so much easier if I made it a website.
Things got a little out of hand from there...
## Demos
### Features
- User registration and authentication
- Automatic grading of Math-a-thon submissions
- Leaderboard of top scorers
- Real-time data display and updates
- User profile management (including custom avatars!)
### Goals
- Advertise the competition and appeal to the student body
- Organize and streamline student participation
### Installation + Contributions
1. Open the repo in your IDE
2. Set up Supabase project and create .env file with your key and url.
```
SUPABASE_URL =
SUPABASE_KEY =
```
3. Install dependencies and run development server
```
> npm i
> npm run dev
```
4. Commit and create a pull request.
5. Wait for it to be pushed.
### Main Structure and Services I've Used
- Framework: Nuxt 3
I started off using vanilla Vue and eventually switched to Nuxt for the SSR and better SEO and autoimports.
- Domain Name and Website Hosting: Namecheap, Vercel
I host the website on Vercel, which has not been too hurtful. Just make sure that you have the environment variables.
I wanted to buy a nice domain for the website, siths-mathathon.com, which, in hindsight, isn't the most prettiest name, and I bought it for like **$6** on Namecheap for 2 years. I also bought the email service **(like $11)** that comes along with it, called PrivateEmail, and allows me to use it for SMTP purposes, which brings me to the next point.
- Authentication and Database: Supabase
Supabase, the very *free* Firebase alternative, requires an SMTP to send more than 3 emails an hour, which is highly beneficial when you need like a hundred kids to signup. Supabase is also handy for the data handling of the students' answers, except for the usage of their public functions, which has forced me to call those functions to check and update answers manually. I also use Supabase to host the avatars of users, contact form submissions, and the answer key (shhh).
- Spreadsheets: Google Sheets
Unfortunately, the general-ness of the Math Team does not use software like Supabase, instead opting for the more basic Google Sheets to handle the data. Previously, that's how it's always been done, with papers being graded and then inputed on the spreadsheet. But now, I'm here!
In 2024, instead of sending the data to Supabase, I sent it to the sheet using Google's API (which was a huge pain) and used the Google formulas to check and validate that data.
It was a very huge mess, having to share it with other members and them changing my formulas, and overwriting data on accident, prompting me to have to email all the participants (a plus side to using Supabase auth) and have them resubmit.
Hopefully for 2025, I am sticking to Supabase, and if they need the data, I'll send it to them or input it myself on the sheet.
- Important modules/plugins: [Pinia](https://pinia.vuejs.org/ssr/nuxt.html), [TailwindCSS](https://tailwindcss.com/docs/guides/nuxtjs), [ShadCN](https://www.shadcn-vue.com/), [Icons](https://nuxt.com/modules/icon)
Not a crazy list, but there are others that I used in some small parts (IDK if that's good for performance).
I extensively use the Vue port of the ShadCN component library, built off of radix-vue, for most of the components, as well as Tailwind CSS to style. And I also use the gravity-ui icons for things like the links on the navigation menu for mobile screens.
Pinia stores are there to share data, usually data that has to be fetched, amongst components.
### Authentication
Very simply, I set up the Supabase client in the Nuxt app using the [Nuxt + Supabase library](https://supabase.nuxtjs.org/).
For 2025 specifically, and for all future references to code unless I have redesigned the whole website again, in `math-a-thon-25\components\auth\AccountTabs.vue`, you basically just log in and sign up here. If you log in or click the link in your email after you sign up, you get redirected to your profile.
There is very necessary information to be kept about each user, so the dialog in the sign up process is crucial.
Profile data is uploaded too.
### Profile + Avatar
Unfortunately, I spent a long time figuring out this feature, but eventually I got it.
To put it very briefly, you can update your user data and upload an avatar, of which you crop yourself.
Might be best to just leave this stuff alone since I'm not too confident in changing it. It was very hard adding the cropper library, converting the canvas to images, figuring out how to update it on the app and on the DB, etc.
### Questions + Answers
The questions will be written in LaTeX and be typeset by MathJax. MathJax will be inserted as a script when the questions page is mounted, alongside fetching the question data and making cards for each one. Once the content is loaded, it typesets.
You can also change weeks/bonuses on the carousel, with the questions just being filtered by week name.
Save every minute, submit every hour, just uploads the uid, time, and answers (as jsonb).
There's also a scroll down button and remove input buttons.
### Leaderboard
Top 3, top 10, and your own answers.
But, only top 3 deserves their avatar shown.
### Staff
Just all the people working on it, but it's just me rn.
### Archive
Fetch the file data, and then it just becomes links that opens up the .pdf files.
### Contact Us
Form with name and email autofilled if you're logged in.
### Acknowledgments
Special thanks to Mr. Whalen for indirectly teaching me the basics of Vue.js, and to the Math Team members and CS students (Bridget Feng and Andrea Guo) for helping with testing and designing the early versions of the app.
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)