I was approached by Mr. Erickson, the principle of Minnetonka High School in early December of 2023. He wanted me to create a website where students were able to see what the current class was. As Minnetonka high school's schedule changes everyday depending on the day of the week and a A/B rotation that students find it hard to keep track of.
I approached a fellow classmate, Zeen and he informed me that he had already got a very barebones system he can made to help him personally keep track of classes with the older, less complex school schedule. we decided to further improve his basic HTML into a proper PWA (progressive web application) so it could be easily changed and all students could access it from their school issued iPads and personal devices like phones.
photo of a part of the code made by Zeem, for the generating schedule data using python.
Zeem's statement on backend work of this time:
I started out working on the project from the initial proposal, throwing together a proof of concept that the website would be technically feasible with the software we planned on using for the website (react js webpage + json for storing schedule data). The schedule app needs to be able to store the schedules for every day of the school year, and it would be tedious type it out line by line, so I wrote a quick Json schedule generator in python (a language I’m more comfortable with). At a high level, it works by taking a json file of inputs (specifying things like which dates have different schedules like early releases, which are days off, what events are happening each day, etc), and outputs a json file of every day and it’s corresponding schedule.
I contacted Zeen and we worked extremely hard on the project planning out the basics, we started out by making a basic table design on a whiteboard
we started by fundamentally making the basic CSS boxes to fit the general layout we had planned. he started work on some of the translation of secession start and stop times, and I worked on the CSS of the frontend.
the next step was adding a checkbox system to allow for divs to be adapted depending on what lunch hours the user wants to view. the system defaults to all lunch time divs being viewable, and when no lunch times are checked a message returns in it's place that states
"Check a lunch period to view"
we replaced the logo we used as a place holder to be a proper PNG. this was so it could correctly adapted in size and also fit the entire "item1" div.
i added a bug report button that leads to a google form where users can report a bug and upload a photo of the reported issue if needed. the user's email's are also recorded so we can follow up in person or over email is needed
my father then assisted me on deploying this application to the azure server he wrote all about the process in detail here
i setup a basic google doc, for showing beta testers how to report bugs, and also the current website URL. Alongside some common errors they might occur and also where to properly submit feedback for the project.
this google form collects both short answer and basic numerical data. this allows us to see insights at glance. Then also allows us to dive deeper into feedback on a per user basis.
Grammar Errors Fixed:
Corrected punctuation errors (replaced periods with successions).
Case Sensitivity Fixed:
Resolved upper/lowercase inconsistencies.
Bug Button Moved:
Improved usability by relocating the bug button.
Lunch Button Default:
Set default for the lunch button to "all false" for simplified use on small devices.
Improved Main Content Adaptability:
Enhanced adaptability of the main content size.
Note: Still awaiting a higher resolution logo image.
Use Mobirise website building software to create multiple sites for commercial and non-profit projects. Click on the image in this block to replace it. You can add a description below your image, or on the side. If you want to hide some of the text fields, open the Block parameters, and uncheck relevant options.
after a lot of thinking i decided on the domain "studentassist.app" due to it's low price and potential to be used for other school related applications.
the domain was purchased through namecheap, they had the best prices and also had many help tools in later configuration. after buying I used the azure and namecheap panels to add a TXT and CNAME record so they could correctly connect.
if anchor time is present in the current day it is highlighted in Dark blue. the current class period is also highlighted in a light yellow. this allows the user to easily see the most important infomation right away
The site was then announced to the school on Mar 12 in the early morning: below is a short video that shows the announcement
We were also featured several times on the principle's public Instagram account
(google form full of bug report responses)
we then got to work going through over 50 bug reports that we received over the first 3 weeks. we
reviewed the issue and image they submitted
then reached out to the individuals if needed when trying to solve the bug.
next Ren created a basic version of the site with all the new visuals added. Though it didn't contain the "guts" of the application it allowed us to have a idea of a final product and also the gave us the CSS code to achieve it.
Students didn't seem to like the clock and also the removal of the "this class end in X minutes" section. So we fixed both problems by implementing a brand new system that allows for a circular timer system. It shows how long is left in class based on the how far it has been since the start of the hour. it also changes color depending on the remaining time left in class and has the previously mentioned rendering of the "this class end in X minutes" section that fits within the circle.
AI Website Software
