My Lightweight Noteboard 1.0

This week, I have been making a small open source project which I call"My Lightweight Noteboard".

Reference to the app: Source Code | Github-hosted Page

What can the app do?

"My Lightweight Noteboard" is a fairly simple web application allowing you to put sticky notes overlayed on its website. The reason  I call it "lightweight" is that the notes are locally stored in a virtual file system in the browser. This is achieved through the use of the Filer.js library.
The app's user interface with 3 notes added
The app was created by plain JavaScript, HTML and CSS with the help of jQuery UI and Bootstrap 4 libraries.

With these old-schooled technologies, the app facilitates a range of features including:

  • Adding an unlimited number of notes
  • Leaving note overlayed at any position on the "noteboard" area.
  • Save note contents with a colour indicator of saved status
  • Removing unused notes

A few potential features I am having in mind to be implemented in the future are:

  • Resizing notes
  • Colour picker for background and text content
  • Simple text formatter/highlighter
  • Ability to work with touch screen

My experience in the project

With Web Development technologies:

The process of creating this single-page app is a fun experience for me. Although the app is simple, it is still challenging to go through the documentation of the jQuery and Filer.js libraries and make them work with plain JavaScript DOM manipulation. I had an opportunity to refresh myself in creating plain HTML/Js/CSS webpage without the support of major frameworks such as React or Angular which I have been working on for a while.

With DevOps tools:

Besides that, the project promotes the professional use of Git and Github that I actually paid attention to creating a new branch when working on a new feature and then merging them back to master. This helps me avoid unwanted changes to be made to the master branch. Another experience with Git/Github is when I was helping a friend with an issue adding a rich text editor library. I forked the project to my account to investigate the code, make changes and make a pull request to fix the issue. This is a good practice in using Git/Github that I will do in the future.

In conclusion...

The app allows you to write and leave personally notes locally on its website.

I feel lucky that I had a chance to build this project myself. I have learned quite new skills from it and will learn more in the process of enhancing the current application.

A more... heavy-weight version

A more technically complex version of the app can also be found here: Souce Code | Heroku-hosted Page

This version is powered by a backend interacting with a MongoDB database.

Comments

  1. Beautiful write up for a beautiful website! Great job, so many little details added that inspired some new ideas! Keep it up!

    ReplyDelete

Post a Comment

Popular posts from this blog

discord.js - A powerful library for interacting with Discord API

Release 0.2a: #good-first-issue - Make web app work offline!