For the open-source development course I am taking this semester, I built a simple web app that allows users to take notes. This blog will give a brief overview of the app, its main features and what I learned while building it.
What is Notes Forever?
It is a simple note-taking web app for users to save, edit and retrieve notes as needed. It is a single-page app hosted on Github pages. I started off by implementing a basic HTML boilerplate and used the FilerJS library to read and write the user’s notes to local memory. Then I added additional features. The app was implemented using the following technologies:
• Google Fonts
• Font Awesome (for icons)
Features At a Glance
- Taking notes: As a note-taking app, the core feature is the ability to type notes, save them and be able to access them later.
- Note grid: The app allows users to add many notes and stores them in a grid. The user can click on any note in the grid, make changes, save them and review them later. Bootstrap grid and modals were used to implement this feature.
- Dark theme: The app has a black and white theme, with an occasional splash of color, giving it good contrast that makes it easier to read. This was implemented using plain CSS.
- Autosave: The app routinely saves the user’s work every 2.5 seconds, reducing the need to keep saving notes every few minutes or so. The user can also save their work by explicitly clicking the ‘Save’ button.
- FilerJS: Building this app was the first time, I used this library. It is very similar to the ‘fs’ module and was the easiest to implement.
- Bootstrap Modals: Though bootstrap was covered in a previous web course, I really didn’t get the chance to experiment with all the components. I was able to learn and implement bootstrap modals in detail. They were crucial to my note grid feature.