I was pretty reluctant to transition myself into a "framework" guy. But here I am, using off-the-shelf React, Firebase and react fire.

During the whole 2-year period of my Master's study at the University of Melbourne, for every assignment and project that involved web development, I always adopted the pure, vanilla JavaScript approach.

However, as you can see here in the example, ART SIDE. It was a pain in the arse to write code specifically to add extensive amount of event listeners on every user interactive elements of the template HTML.

ART SIDE source code.

It's not the best practice for non-tiny side projects and my friend has been mocking me ever since, saying that I am an Upper Cave Man.

Fine. Let's get React a try. I quickly went through an introduction course on Scrimba that taught React in a functional programming way, then took the time scrubbing content on the Full Stack Open 2020 course from the University of Helsinki. I skipped parts covering Redux, TypeScript and Testing and only skimmed quickly through Mongoose and Express.

To put my quickly “learned” to the test, I made two websites and what I'm gonna talk about today is Nost. Github and online demo available.

I pinned Nost to my browser as well. Check out why.

Nost sounds similar to notes, and that is exactly what it does. It is an online notepad that persists your texts in a database. There are plenty of other similar services out there. For example, Note.ms, which I think took a similar design approach from a long dead project Notepad.cc (I used it quite frequently when I was in high school). I've always wanted to write something similar as well.

I built Nost with responsive design in mind and adopted the minimalistic aesthetics approach. I used none of the React animation libraries but solely relied on CSS transitions. I used media query to adapt to the user's preferred colour schemes (aka. Dark Mode).

As for the storage, I don't want to deal with any of the backend stuff so I chose Firebase. Reactfire is a great middle man handling all communications between the browser and Google's database. Once you feed it with the Firebase configuration JSON it just works.

The whole frontend is deployed on Netlify with little tinkering on the rewrite rules and that's basically it.

Overall I took one afternoon to set things all up and coded everything. For the next month I occasionally came back and tweaked some little knobs to make it look nice. I purchased a domain too and drew a simple favicon for it. Sadly no one came and left anything. After the first few days my Firebase was littered with junk data (I said NO JUNK DATA on Github tho) and the document name is not inline with my rules. I left no credentials on Github and only the published (and minimised) version on Netlify contains such data.

Anyway, I couldn't wrap my head around this and deleted those junk data later. One and a half months later, I am the only one using it. I hope it can help you too and I plan to add many features later on if I have time so definitely come back in the future.