Cloud Notes

A hyper-simple note taking app with auto-saving and cloud storage, inspired by OneNote.

With React-Redux on the front end for single page app efficiency, this app utilises local storage and MongoDB to allow the user to resume their progress on load but only save what they actually need. Security with Helmet.js, authentication with 3rd party Oauth2.

showing the tag filter
A simple tag system allows notes to be grouped and recalled quickly

I wanted to flex my new skills in a project that was clean, followed a structured project plan, and solidified my learned findings. I also wanted to mature some of my visual design work given my tenancy to flip back and forth on a design theme and make stuff up as I went along.

This app was built after projects such as Pinapathy and the Stock Price Viewer. I was proud of the things I had done and learned but still felt uneasy given how much I had to wrestle such things as getting Passport Oauth to work with React.

the notes menu being interacted with
An example of matured responsive UI feedback; in the past I would toggle between items going lighter / darker on hover, on click etc

The code structure such as the server routes and packages needed, as well as the front end components and application structure were planned in advance, I was able to successfully reconcile some of the things that bothered me with the previous projects, and I achieved my goal of a super “clean” app, even if it’s functionality was not much of a push on my skillets as I would seek out in later projects.

drop menu being demonstrated
UI features such as a drop menu which closes on out-of-bounds clicks and an unsaved-changes indicator.