My Experience with Atomize and Next.js
Tags: react, javascript
Published: 2020-02-24 00:41:10

I started out on my journey to redesign my portfolio website a few months ago. I created many designs, just to question it and make another. Eventually, I hit the jackpot with a prototype and decided it was time to realize it. 

After hearing great things about it, I also decided to host the website on [Zeit.co](https://zeit.co). So, before I started coding, I was scrolling through [Product Hunt](https://www.producthunt.com/) and I saw [Atomize React](https://www.producthunt.com/posts/atomize-react). It immediately intrigued me, so I went to their homepage and got more information.

> "Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly" - [Atomize React](https://atomizecode.com)

I went into the quick start and well, got started. After having to setup the Styletron engine for next.js (the framework I decided on), I was already a little worried. But my doubts quickly faded away as I used Atomize, or at least some of my doubts. For example, the framework itself worked well, but it felt difficult to get into the Atomic Design approach and they didn't really do too much to help. Also, the attributes to style the Components were so strange that I was pretty much glued to the documentation. There were a few other issues, but most of them are just little problems.

So, I built out the site, component by component, consulting the documentation regularly. This went fine and I published the site within 2 days of starting. However, after publishing the site, I realized a few issues that I hadn't thought of. One was the max width of the container. On different sizes, the `<Container>` element had a max width. This caused the container to be only half of my screen width. Another problem was that my row was configured strangely, so an `<Image>` and a `<Text>` tag weren't on the same line as they should've been.

My last big issue was kind of on me for bad implementation. After releasing the site and fixing everything else, I started working on adding a dark mode. At first, I passed the background and color of each component as a Stateful variable. Then, when I wanted to toggle dark mode, I could just change the state and it would update. However, it was extremely messy and dirty code. I also had trouble deploying the code, so I rolled back the commit and started again.

This time, however, it went much better. I took a different approach, utilizing the Styletron engine and the `useState()` hook, located in my `index.js` file. I then passed the variable to set the state to my `App.js` as a prop. The state variable was used to append custom colors to my Styletron Config. Basically, you can set custom colors and variables to use in the attributes of your components, and I changed the custom colors to match dark mode or light mode. This worked and resulted in much cleaner code.

Overall, my experience was pretty good. It had it's road bumps, but the issues were small and very manageable.

## Ratings
[Next.js](https://nextjs.org/) - 8/10
[Atomize React](https://atomizecode.com) - 8/10
[Zeit.co](https://zeit.co) - 10/10

If you read all the way through this, thanks for reading. 

## Links
[The final site](https://ajkachnic.now.sh)
[The Github](https://github.com/ajkachnic/portfolio)

## Updates
I rebuilt the site without using any component library, mostly because maintenance was extremely annoying