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 (requirents -> design -> frontend and backend -> devops -> test), I usually use my 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, so I played with many colors and built my color pallet with both light and dark themes on Figma. Then I use borders in my components to make them look like modern app, I knew I would use Atomic Design, so I design Atoms and join them to build my components and views. Some time after implementing the basic functionality, I felt inspired to make great improvement in the UI, so redesign all the UI.
The Implementation in Frontend
I create a empty repository and configure with Webpack, ReactJS, Typescript, SASS, GraphQL with ApolloJS, StoryBook). I used Clean Architecture to scalable and maintainable app, so I set-up four layer:
- Application (controllers)
- Domain (bussiness logic)
- Infrastructure (external services)
- Presentation (user interfaces)
I faced a challenge here, the theory explains how to works with Object Oriented Programming (OOP) but not with functional programming, but after talk with some friends I understand how to make this works in my project. Then I organized my components with Atomic Design and documented them with Storybook, finally I organized my styles with ITCSS.
The Implementation in Backend
In the Backend also 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. Afterward I set up my databases in container. Finally I created a pipeline with Docker and Gitlab for both my Frontend and Backend.
Finally some words…
It was challenging because I needed to think globally, considering other areas and putting myself in the user’s shoes, I feel like an architect, and I learned a lot. The app is working now, I also configure the serve for CI/CD, to have SSL, and more.