[2025 Retrospective]

This project from 2020, captures my mindset in my first year into web development. While the passion for building remains, my technical approach has evolved significantly.

What I Would Do Differently Now:

  • Prioritize a clean architecture to decouple business logic from external services.
  • Implement shared types across the frontend and backend for full type-safety.
  • Leverage a reusable component library to ensure consistency and speed.
  • Write targeted tests for all complex functionalities.
  • Establish a full CI/CD pipeline for automated deployments.
  • Replace React Query with native fetch, prioritizing feature velocity over premature caching optimizations.
  • Make it offline PWA to use it everywhere

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

The Opportunity

While I was studying, I took notes on paper, in notebooks and everywhere in between. I keep loosing them, and they were impossible to categorize or connect them. I thought, “It would be awesome if I could keep my notes in one place and access them from anywhere.” This personal pain point became the opportunity to build my first real project: a note-taking app organized by tags.

The Design

I started by researching the best ways to take notes and concluded that a tag-based system would be the most flexible for grouping and filtering. I sketched out some initial ideas and, once the user workflow felt right, I moved the design to Figma. I established a simple color palette and designed each component with reusability in mind.

The designs

The Implementation

Frontend: I chose React to build the UI, as it follows pure functional philosophy and SASS for styling, taking advantage of its nesting features. All styles were written following a consistent naming convention, and I used CSS variables in the :root for the color palette. For data fetching, I used React Query to handle caching server state.

Backend: The server was built with Node.js and Express to continue improving my JS skills. I chose MongoDB for the database for better object operation and implemented a simple authentication system. The project was initially deployed on Heroku and later migrated to Vercel.

Final Words

Tis project was my first useful personal project 🚀. It gives me real user feedback, even from family and friends, it is the initial small step which catalyst my engineering, creativity and insights, this project give me the opportunity to get a Job, now imagine: Implementing my Note-Taking App V2, with a fully software factory workflow