Offsight

Offsight is a product made for students, by students. We strive to increase productivity, while giving students as much ease of use as possible.

Comment

Inspiration

As college students who are currently learning remotely, this project came to us naturally since it directly related to us and prompted us to create an app that we believe would genuinely benefit the student population. Our application’s name, Offsight, draws inspiration from the remote learning that has become widely used over the past two years (from the term “off site”) as well as the ability we hope to give our users of easily obtaining an otherwise strenuous sense of organization (as they don’t need to spend a long time looking for documents).

What it does

Offsight is an application that provides two services we find to be essential in the next wave of educational apps. One is a to-do list that actually draws attention from the user. Throughout our years of using many educational services, we have found that there is rarely a spotlight on arguably the most important function of an educational application: the to-do list. Even when you find it, it’s not easy to see when exactly assignments are due. Offsight not only provides an interface that highlights this to-do list, but also pulls attention to our unique countdown due date on top displaying the usual calendar date. In addition, Offsight provides an intuitive organizational service that allows for users to easily sort the many, many documents that accumulate through the years. Instead of users being swamped with subfolders upon subfolders, Offsight allows for quick and simple arrangement.

How we built it

For the backend, we decided to use Google Firebase, a cloud based service. We created our own API that held our cloud database (Firestore database) and the Firebase Storage. We used Javascript to write our backend, with node.js, express.js, and busboy. We used this to create our functions which allowed us to place information in our database and extract it later in our application. It also performed updates and other functions such as a time calculator for our to-do list. For the frontend, we delved deep into React and its dynamic flexibility. We developed specific components for different webpages and features, distributing Offsight’s functionality into logical systems for developers to easily build upon. We took advantage of MUI’s wide variety of components and hooked up the backend with express.js.

Challenges we ran into

For the overall project, we struggled with finding features we could include in our application to help it stand out compared to other big name planner/organizational applications like Google Drive and Notion. While you can achieve high level organization with these applications, most of the time you have to spend a significant amount of time making it so. We decided that with our application, you achieve this same amount of high level organization, but with minimal effort. In the backend, we used the Google service Firebase, which we were new to. A big struggle came with trying to decipher the documentation in a way that fit our needs, especially since we weren’t just using simple, hard-coded variables. We also ran into issues really using express.js for the first time as we used it to access our data. We also struggled to learn to create CRUD (Create, Read, Update, and Delete) functions using an API. In addition, we had trouble integrating different utilities such as multer and busboy in an attempt to read in files. For the frontend, we expanded on our previous React experience. We had to reimagine our design process to incorporate an intuitive UI with smooth, optimized workflow. We wanted to include all the quality-of-life features that streamline an application’s usage without oversaturating it with over-the-top additions. This meant ditching simple design practices and learning new libraries like MUI to provide the best user experience possible.

Accomplishments that we're proud

In our application, we really wanted to include a datafield in our database where it would calculate the days left to do the assignment by comparing the current date with the assignment date. We found this as a unique and critical function as many educational services only provide a calendar due date, which can easily lull students into a false sense of security with how much time is actually left to complete an assignment. Unlike our other functions where we would just create/post a course and retrieve/get a course based on its ID, with our assignments, we had to simultaneously get the current time and update specific datafields in our database so that we could later make that important calculation. We were fortunately successful with this process even though we had much difficulty with the updating part of the function. Additionally, our frontend work took on a lovely aesthetic as it developed along with intuitive features that we wish we had in our educational platforms. We’re especially proud of integrating drag & drop functionality for our file management system and providing an uncluttered workspace for users to interact with.

What we learned

We got the chance to dive more into topics such as APIs, schemas, firebase cloud storage, and other javascript utilities such as express.js. We also explored further React functionality along with components offered by Material UI.

What's next for Offsight

We believe that Offsight has the potential to be beneficial to students of any kind as well as anyone who has tasks they need to get done. For the future of Offsight, we plan to add more features as well as build upon the existing features. Along with this, other improvements include design, simplicity, and accessibility to anyone anywhere.

Built With

Share this project:

Updates