We are pretty close to the end of our Collab Lab project 🤯.

Since we started, I worked each week pairing with another developer on an issue assigned to us. Usually, it was a new feature to add, and it was great that the complexity was growing at a very nice pace, so it kept us really engaged with the project.

Last week, we adopted a more spontaneous approach, as we wanted to address several open issues before beginning to work on the UI styling. We paired on those issues based on our interests, and collaboration was mostly asynchronous.

Define a CSS framework or library

At the moment, we've decided that our next step and focus for the upcoming weeks will be to start working on improving the UI and enhancing the look of our app. We've already begun collecting references in a Figma mood board, although I must admit that working on it wasn't my top priority until now. I've been doing some research on CSS frameworks and component libraries that we might want to use for the project, and we'll be defining our choice in the next few days.

My fav options are:

🛠️ Tailwind: is a CSS framework that uses a utility-first CSS approach. It offers a low-level utility API with classes to build any design directly in your markup without writing CSS, and a set of ready-to-use components.
It might take some effort to get used to it, but it simplifies the development process and provides a lot of flexibility. A main benefit is that it encourages a consistent use of colors, spacing, typography, shadows, and other styling elements within your app.
Another benefit is that it automatically removes all unused CSS when building for production, so the result is a final CSS bundle that is as small as possible.
The website has extensive documentation, and there is an active community plenty of resources, plugins, and extensions available.

🛠️ Chakra UI: is a simple and modular component library that allows you to build visually appealing UIs fast. It has a strong focus on accessibility and strictly follows WAI-ARIA standards for all components. It is themeable, and components are customizable to match the design needs of your app and it includes dark mode support.
It uses a composable approach that keeps complexity low and ensures that the styles and functionality are flexible and extensible. You can easily compose new components from existing ones.
Chakra UI also has an active community and great documentation. It includes resources, tutorials, and examples to get started.

Learning highlights of my week

It was a really enjoyable week for me, as it involved writing code, but also a lot of writing and reading. I also made some time to finish the useState blog post, so now my React Hooks learning series includes three articles.

See you next week! Thanks for reading :)