StudyLine

Inspiration

The StudyLine development team loves to review math together, but our packed schedules make weekly review sessions hard to coordinate. When we occasionally found time to finally review together, we were always hindered by the small feature sets of other platforms and ended up with a dozen open tabs.

StudyLine is the solution and is created around three core principles:

• Simple and modern UI for a focused experience
• Integrate essential features, like LaTeX, into a single site
• Accessibility for all interested students

Each concept aims to fix problems the team ran into with other video-conferencing and collaboration platforms.

What it does

We created a seamless studying tool that incorporates live video calls, chat options with LaTeX support, and easy searching for like-minded peers into a single platform. The unique collection of features eliminates the need for endless browser tabs and is applicable to all topics in the Ontario curriculum. Just select the course you’re studying for, and you’ll be put into a study room. Earn points for each hour you spend studying and show off your grindset on your profile.

How we built it

For the front-end, we use the Svelte Kits with SCSS to construct the frameworks and orientate the website. In addition, we used HTML, JS and CSS to create add-on functionality and achieve decorative purposes for our website. For the back-end, we used the Firebase back-end services for the database storage and server hosting.

Challenges we ran into

The main challenge the team ran into on the first day was implementing authentication via Firebase. We are used to using the server side features of SvelteKit (i.e. in +page.server.ts). However, Firebase is primarily used on the front end, and so we had to adjust by moving code to either an onMount call on a subscribe listener on an auth store. The second major issue the team faced was on the second day, working with the WebRTC APIs. We tried building the video call functionality using the WebRTC primitives, but it proved too difficult and time consuming. Then we decided to use the Peer.js library as well as the Peer library to run the server for it. We implemented a mesh peer-to-peer network to broadcast video to all listeners, which was simpler, albeit more computational intensive.

Accomplishments that we're proud of

StudyLine is our team’s first experience with Figma as a planning and design tool. It’s also the first in-person hackathon for some of our team members! We’re happy to have a complete project that combines graphic design with technical backend tools.

What's next for StudyLine

We would like to synthesize our web layouts to make the UI more intuitive by combining the video call and chat features onto one page. Additionally, We would have liked to build a YRDSB login API to verify users’ identities and ensure the safety of all of our students, but we have not gotten the permissions to do so due to time constraints.

Some other features that are in the works:

A whiteboard feature to allow users in study rooms to communicate and collaborate more freely with vector arrows and graphics. A points counter to track the number of hours users study for and convert into StudyPoints to be displayed on the user’s profile A basic social network that allows users to follow one another’s profiles

Built With

• css
• figma
• firebase
• html
• javascript
• scss
• svelte
• sveltekit