[2025 Retrospective]

This project from 2021, captures my mindset after use my personal note taking app and getting more experience from a Software Factory.

What I Would Do Differently Now:

  • As I understand how the things works on the server, now I prefer to move quickly and use a free server like Cloudflare or Vercel.
  • Write tests on important functionalities to move quickly keeping quality.
  • Setup Linter and prettier to improve code styling.
  • Reduce the steps to create notes, just one click and create a powerful filter by content
  • Make it offline PWA to use it everywhere

This post is preserved as a snapshot of my growth. Follow the journey to v1, v3 and v4.

The Opportunity

I learned many things in 2021 specially in my last job, I wanted to build something with all my experience as an exercise to see the big picture in software development (Requirements -> Design -> Frontend & Backend -> DevOps -> Testing), I’ben using my personal note-taking app version 1 called Simple Notes. However, there are many things to improve. Therefore, I decided to build a new app to manage notes with the best engineering I ever implemented 💪.

The Design

I wanted a great and configurable UI, I took again a paper and start drawing some sketches to planing ideas, when I feel comfortable with my workflow I moved quickly to Figma, Then I started to implementing, but, It feels strange I can do it better.

I needed inspiration, so I decided to research more views and after a reflection and discovering Atomic Design I’ve redesigned again, This time I take care on 4 principles: simplicity, contrast, spacing and reusability. I started creating my Design System including: color pallette, fonts, icons, components, etc. Then I remembered using my app when there is not enough light, that motivates me to create a dark theme.

The Implementation in Frontend

I create a empty repository and configured with Webpack, ReactJS, Typescript, SASS, GraphQL with ApolloJS, StoryBook. I used Clean Architecture to scalable and maintainable app, so I setup four layer:

Then I faced a challenge here, the theory explains how to works with Object Oriented Programming (OOP) but not with Functional Programming to have predictability, but after talk with some friends and share insights, I understand how to make this works in my project.

Then proceed to structure my components with Atomic Design, It is a fantastic component architecture inspired on Chemistry (Atoms build molecules, the molecules build organisms, etc). With Atomic Design + Storybook I got a highly reusable component library, which improved my speed reusing my implemented, tested and documented components, I organized my styles with ITCSS and allow text formatting with Markdown.

The Implementation in Backend

In the Backend I create a empty repository and configure with webpack and Clean Architecture. Then I chose MongoDb to manage the data and Redis to save users with sessions, I’ve created from zero the authentication module with JWT with Access Token and Session Token, this helps me to understand the complete workflow of Authentication with JWT. Afterward I set up my databases in container, here I got another challenge in the communication between my containers. Afortunatly I took attention to my teacher of networks at university. Lets see the challenge in the next section.

A Challenge transformed in my new super skill (Automation)

After complete the local development on local, I wanted to simulate the complete workflow from the Software Factory I’ve been working. Because the things looks magic, I been doing the CI/CD manually, when I saw how a PR trigger scripts to review the code and a Merge move the code to make the web page accessible to the internet, I was fascinated.

Well if we will do, lets do it great!. First I hired a remote server, with access to the terminal, I setup my ssh access, I feel like I was in a movie of hackers, then I made me the questions: “How I will setup the server?”, “What server do I need to get the magic things?”, “mmmm, Do I need some security?”. Well, At university we setup multiple server, but we didn’t use them, because at that moment I wasn’t focus on web development. I planed to install:

Then I setup my container with my DBs, but the things was not working because they don’t know how to access them, I spent many time researching it. Then I discovered I need to indicate the network and ports to allow the communication between services. I started creating my internal network, and connect them one by one. After many tries it works.

Finally I need the last step: make the magic (CI/CD) ✨. I created a pipeline with Gitlab, where I execute my build, test and access to my remote server to change the files of my Frontend and Backend, I’ve made many tries because it was not working, I got result “Failed”, “Failed”, ….

But. My friend, you probably know some times one fells inside “It is near, don’t surrender”, I tried and tried ignoring the time, when suddenly appear all the green flags, congratulation the CI/CD works. Multiple tries setting up CI/CD Now the last truly last step, I copied the URL of my App on the browser to verify, if it was access to the internet, and Yes!, it works 🎉.

Finally Words

This project had 2 purpose and I so proud to got my goals:

This key project opened my mind to my next move: Improve my Note taking app with perspective of T-Shaped Software Engineer.