Visit studynotes

Motivation

With the recent shift to remote learning, students around the world are faced with a common problem: without friends and faculty around, it becomes hard to find the motivation to study. studynotes is a web app that helps to promote a social aspect to studying whilst acting as an easy collaboration tool for sharing notes. Our goal is to create a social network for studying, where users are able to collaborate with others, share their notes, and view what their friends have been up to.

About

There are three components to this app: the website, the API, and the desktop client.

Web Client: Our main app is a web app where users can create an account, view other users' activity, and view your friends' notes. It's written in JavaScript using React and deployed on AWS using Amplify. We decided to use a simplistic design for the web page to reduce the barriers that users will face and ease user onboarding. It is through this web client that users will be able to follow and interact with each other, establishing an encouraging atmosphere for learning.

Desktop Client: Using the desktop client, users are able to select their notes folder on their computer and automatically have their notes synced to our servers. This is a Python application with native-level support for Windows, macOS, and Linux. While running in the background, the client monitors the chosen directory, automatically detecting file changes and sending updates to our API. All the user has to do is save their files locally and their work will be automatically synced with our servers.

API: This is the central point of the entire stack. It connects everything together - the desktop client, the MongoDB database, and the web client. It's written in Python using Flask and PyMODM using a model-controller architecture and is deployed on AWS ECS as a Docker container for scalability. The service is backed by a load balancer and will automatically scale up and down depending on traffic. This is a fully fledged API complete with login and user authentication, CORS configurations, and a secure HTTPS connection.

Challenges we ran into

One of the major issues we ran into was with CORS. Because we implemented our own login system, passing cookies over remote servers was a big pain and we spent a lot of time troubleshooting cross-origin policies.

We also ran into a couple of challenges with optimizing queries to MongoDB and preventing re-renders on the React side. Since we had a lot of data to work with, processing and retrieving data took up to eight seconds at first, which made the service completely unusable. To get around this, we implemented a caching laying on the API which greatly reduced the number of database queries, helping us get the load time to just over one second.

Accomplishments that we're proud of

Firstly, we are extremely proud of our final product! It is especially fulfilling to have created a functioning application that is fully-deployed and not dependent on hard-coded data of any sort. We are also proud of how we picked up on many new skills over the course of this project, from working with low-level OS APIs for the client to learning how to use MongoDB. Most importantly though, we're proud of how well we worked together as a team, especially since this was our first times working together virtually rather than in-person. It's a weekend we'll remember for sure!

What we learned

  • How to build APIs using Python and Flask, with user authentication
  • How to use functional components and hooks in React
  • How to use Docker
  • How to deploy an application for scalability

What's next for studynotes

In the future, we hope to see our idea implemented by online learning and collaboration companies and turn it into a widely-used social media platform for students and workers across the world to share, collaborate, and better manage their work. Additional features include collaborative editing directly on the platform, direct uploads, more support for different file types, a chatting functionality, and group folders to organize notes for a particular subject or course. We also hope to integrate the app with existing platforms such as Google Drive and OneDrive and support additional files formats such as Word and LaTeX.

Share this project:

Updates