Yes that's right, another wordle clone. You can play it here.
nexdle is a wordle clone made with React, TypeScript, TailwindCSS, Vite, Zustand and tested with Vitest.
This project was a great learning experience for me. Things I learnt while making nexdle:
- CSS Grids
- Using state management libraries (Zustand in this case)
- Using testing tools like Jest (Vitest in this case)
Before this I had made a simple todo-app to get comfortable with using TypeScript in React projects. Now after using it for 2 projects, I'm absolutely in love with it. TypeScript is just so good for catching errors before shipping the app to production, and the autocomplete you get is just crazy. It takes the developer experience to a whole another level.
I used TailwindCSS for all the styling because lets face it, CSS is really fricking hard. Tailwind just makes it really simple and quick to make a stunning ui. Just add pre-built CSS utility classes and you're good to go!
I didn't use create-react-app for this project. Instead I used Vite.
Vite is a module bundler, just like webpack. Since I've come across Vite, I
haven't gone back to create-react-app. It's just faster, has less dependencies
so the build size is less. If you haven't tried it yet, I highly recommend you
do!
I finally learnt how to use state management libraries. In this project I used Zustand, which is like a bare bones version of Redux. It's better than using the Context API as its less boilerplatey. I figured for a small project I don't really need to use a heavy library like Redux.
A few weeks ago I learnt how to use Jest and I was really excited to try it out here. But I found out that it wasn't compatible with Vite. So I found this really awesome library called Vitest. Honestly, testing was the most fun part of the whole project. It helps you catch bugs before production and is just really fun to do.
Vitest also has this crazy ui testing option, I haven't explored it a lot but it's just insane. Check this out:
I also uploaded this gif to YouTube since it's kind
of long. You can watch it there if you prefer that.
So that's it for this blog. All the code for nexdle can be found here.
If you made it this far thanks for reading!