I've been so focused on my work as a backend dev for the last couple years that I hadn't taken the time to explore the latest and greatests of the frontend ecosystem. Over the holidays, I was finally inspired to dive into React and Tailwind CSS and I'm really glad I did!
One of the mini projects I made as practice is this Random Inspiration Generator. I hope it can help you find some inspiration for the new year!
The React app itself here is very simple and minimal, where I had the most fun with this app was learning about Tailwind CSS.
Tailwind CSS is a CSS framework with a ton of utility classes that allows you to style your app right in the markup. You can also use it to compose custom styles in CSS.
I remember when I first looked at Tailwind, I was immediately intimidated by the copious amounts of utility classes. I couldn't wrap my brain around how I was supposed to know what classes existed and what classes to use, but once I broke the seal and dove into it, it became pretty intuitive and the docs are well written. I was able to style this mini inspiration app in just minutes! Okay, maybe a bit longer cause I was going back and forth to the docs, but the important part was I didn't have to spend any time coming up with my own class or selector names or organize my CSS or do any pixel pushing. It was really easy to come up with a polished look with just their built-in utility classes, I didn't have to write any custom CSS, but I like that I can if I needed to. I am definitely sold on Tailwind now and will be using it for my personal projects.
I'm used to focusing more on the code that I need for my job, but I am glad I tried something new this year. I am really looking forward to diving deeper and building more with React and Tailwind. I hope this inspires you to try something new too, and don't forget, open yourself to the impression left by thousands of butterflies. 🦋 Happy New Year y'all!