Building a note taking App using React

Building a note taking App using React

How to quickly build a single page note taking app using React and styled components.

Note-taking apps provide one of the best utility services we can get there.

Not only because it helps us save costs from purchasing books but, also with the ease to carry about and making edits when necessary.

So, for the completion of my year-long Software Engineering program at ALX, I decided to build a platform that provides quick service without all the hassles involved in signing up and downloading an application locally.

I would be defining some timelines, the motivation and hiccups encountered while working on this project, and how I turned the tide around.

Project Definition

Note-taking has become difficult for some individuals not just because handwriting is slower than live speech, but because even when note-takers do, they end up copying and pasting the text verbatim.

Also, users leave lots of web pages open because they just cannot let go of important information they stumbled on that page, which in most instances are little less than a piece of insight or quote on the page.

Users are always using the internet each day and come across a lot of pages with content snippets they might want to save or use in a post later.

The ultimate solution has been to bookmark the post which is not a tidy practice as it mostly leaves a huge number of pages opened in the browser.

The solution...Notefy Note App!

What is the Notefy project?

Notefy App aims to redefine digital note-taking by helping note-takers like; students and academians take better notes and also, keep track of the most important happenings in their lives.

It does this by encouraging note-takers to effectively understand a concept or topic before taking a note. Two clear-cut ways to do this would be:

  • Introduce a character limit and also

  • Disabling copying and pasting into the note-taking text area.

  • Google Auth, allow users to access notes on multiple devices.

However, Notefy does not solve the following:

  • Replace traditional note-taking as the Notefy notes are character-limited

  • Replace Bookmarking an internet webpage

Oddly enough, I didn't really have an interest in writing partly because I grew up with the limitations of having enough books for classes, but I went along with the project as I consider it a really great technical challenge.

My entire career has been spent living in my imagination of better ways to provide solutions to individuals who might currently be facing these limitations, therefore I made the Notefy app to help writers and everyone with a keen interest in text documentation.

The Notefy Architecture

For the technologies and libraries required to build out this project, I have gone with using ReactJS, a declarative JavaScript library that allows building interactive component-based UI, and managing change changes without refreshing the entire app.

I believe using a library allows me to really explore industry practices while solidifying my understanding of Javascript.

Also, styled-components is another awesome tool that offers flexibility to write CSS inside our JavaScript rendering each part of the UI when needed.

So as to curb the hassles that come with loading data from a database, we have provided a safe option to store away the notes on the browser localStorage which the note was taken, this allows us to easily cache data(the note storage) in the users browser and efficiently return them when needed.

Features

Aside from the core functionality of our project which is note-taking, Notefy also offers some other features aimed at providing users with the best value.

We have made provision to incorporate Google Auth with Firebase, that way, we are sure only the device owner is accessing the notes taken.

Also, the website is responsive and compatible with all devices.

Technical Challenges & Breakthroughs

Early in the project, I decided to provide a save feature that stores away the data(notes) in a cloud database so that users could return to the app from any device.

I set out to research the different pathways to achieving this and decided to go with the Google cloud storage platform - Firebase because it is reliable and also a trustworthy product from Google.

However, we hit a snag as it became difficult completing the UI and rally through deployment while figuring out how to connect the data to the cloud provider. With little to 5 hours remaining, I could only integrate the Google Auth for login. I hope to complete the remainder of the project in the coming days.

Take-Aways

If there's one big takeaway, it is to always use the right tool for the job.

I was a bit skeptical about developing the project using vanilla JavaScript having done numerous tasks on the intranet using this but the task on JQuery opened my eyes to numerous other libraries that offer the same result in a much better way.

Finally settled for ReactJS as I enjoyed its component-based architecture. Also, the Notefy project will require a lot of activity going on in a particular area of the page and doesn't require a complete refresh of the app, which is something React is pretty good at managing.

One technical risks which might actually be associated with the Notefy webpage project is Privacy. This is because individuals might resort to using this to document their private life. Also, it can really be a pain using the Notefy app in the case of a lecture or fast session as the user can easily run out of character.

But, I have plans to use Google Auth to authenticate a particular user accessing the notes, else if not authenticated, just store the data in the browser's local storage.

A non-technical risk is minimal with the Notefy app but one that might arise are online pop-ups from other apps which might get in the way during note-taking.

An alternative solution to this would be taking notes with the internet connection turned off, as the Notefy webpage still stores the data after the page has been loaded or a user has been authenticated.

Conclusion

There are many note-taking apps in existing but one that stands out is the Google Keep app, tho a major case can be made against it for being another of many Google products that don't hit the right highs due to complications with ease of use. Another example is Evernote and Microsoft OneNote which all require varying subscription levels to use the core note app features.

Notefy would offer a more seamless and minimalistic use for pretty much anyone with a Google account or note while being FREE.

My name is Excel Nwachukwu, I have carried out this project as part of my requirements to complete the Software Engineering Bootcamp at ALX. I love building out amazing interfaces that users love.

Link to the project GitHub --- https://github.com/trillionclues/notefy-portfolio-app

Link to Demo page --- https://notify-react-app.netlify.app/

Care to connect on Linkedin? Find me at https://www.linkedin.com/in/trillionclues-excel/