<aside> đź’ˇ Here we present layout and application flow
</aside>
Summary:
Since Javascript is our main programming language, we decided to use it to leverage its productivity while maintaining performance. We used React as it provides state management and declarative interfaces.
Alongside React, we took a server-side rendering approach, so our page would display as soon as possible for our users. For that, we used NextJS to provide some nice SSR features, SEO performance for future scalability, and a developer-friendly experience.
As for the UI, we all know every digital product gets to a point where it needs a consistent layout and patterns. With that in mind, in order for us to have a design-system all set up, fully customizable, and easy to use, we decided to go with @emotion/react (styled-components) library. This way, we can set up a consistent theme-based design-system, that helps us take control of our theme while allowing full customization for feature changes. It works well with server-side rendering and performance. It can easily integrate with other libraries such as framer-motion for quick and easy animations
Having the application specs set, we chose notion’s layout and a little bit of inspiration from trello.com and notion.so, to redesign the idea a little bit.
Trello’s board
Notion’s board
We decided to just init a project using NextJS + React and see how we would design the app:
Screen Recording 2022-01-13 at 23.43.28.mov
Aiming straight-forward Todo application and personal organization, we designed a simple and modern UI: