The inspiration for this website came when considering our lives as students. Everyday we are presented with challenges, and anything that can help overcome these challenges is welcome.
The Studium suite groups the features of other student websites into one. First, the home page lets the user input a list of to-dos for the day. These to-dos are saved for the duration of the session. The second page is a timer page, it features a timer that alters between work and break. Users can edit the length of work and break time as well. The third page is a map page. This map shows the user a map of Montreal with markers showing universities, libraries, cafes, and parks near the universities of the Island. The final page is a music playlist page. On this page the student can browse through over 10 genres of music, ranging from vaporwave, cafe ambience, to white noise and classical. Each category presents 50 different playlist videos.
The page was built using the React JavaScript Library, along with material-ui components. Features like the todo page use localStorage. The Focus page uses packages such as 'react-circular-progressbar' and 'react-slider' for the UI and design. The svg icons for our buttons were from heroicons. The Home page was built using React with Hooks such as useState() and useEffect() to make a dynamic to do list that is refresh proof for storage. Everything was then styled with css files to make everything user friendly and with as little resistance as possible. The Map page was implemented using the Google Map API offered online by Google. The music page was built using a Rapid API to fetch randomized Youtube playlists.
We faced several challenges, most of the team members had little experience with React and were learning mostly from the start. We faced other issues like familiarizing ourselves with foreign APIs and new components. Implementing a clean UI also took effort.
We're proud of the fact we managed to design and develop this application in 36 hours. This is our first hackathon and we look forward to the next!
We learned how to code in JavaScript using ReactJS. We learned about using new APIs online. We also experimented with persistent data and user interaction.
We hope to host the application online and introduce user accounts. This would allow the application to get one step closer with the user, allowing them to tailor the services of their app based on their preferences and save them.
