Welcome to day six of the useaffiliates.com build log! This series covers my journey of building a business from scratch in public. If you missed day five, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.
Finally, let’s start coding the damn thing! 🚀
Today, we finally set up our development environment, which is one big step towards launching this project! This shouldn't be called a build log if I don't give you the juicy details on what stack I am using to build this project.
And as promised at the start of this project, the code is open source:
https://github.com/twankruiswijk/useaffiliates.com
NextJS
I loved working with Remix for my personal website, but I want to leverage SSG (static site generation) for this project. This technology will come in handy for generating the category pages, which will be great for SEO, and combined with the Notion API, it will be fast as fuuuuuu.
Besides having access to SSG, we can also leverage the API routes for infinite loading and filtering of the affiliate program table.
TailwindCSS
For styling, TailwindCSS has been my weapon of choice for a little while now. It sets reasonable defaults, makes it easy to collaborate (great adoption and documentation), and keeps my CSS files tiny.
I've been asked why I don't use Chakra, a component library for React built on top of Tailwind. I use it for another project I work on, upupland.xyz, and while I like working with it, even for that project, I think I could have done it faster with just Tailwind. It also introduces another layer of complexity to the project since you have yet another tool to learn and documentation to read.
Today we updated the Tailwind configuration file with the fonts, container sizes, colors, and background pattern. I think this is what I like the most about Tailwind; do you want to update the defaults? You do you! Everything keeps working as expected, even with your customizations and additions.
Prettier, ESlint, and lint-staged (with husky)
Since I am doing this project solo, I wanted to set up some tools to help me push cleaner code. I dislike my editor distracting me with "problems," especially when the computer or auto-formatting can fix them.
The cool thing about lint-staged is that it checks my files against my Prettier and ESlint rules before pushing anything to my Github repository. No more silly formatting issues inside of my repository!
Code, code, and more code to come! 🏎
With the development environment setup, and all the basics configured, it's now time to code the entire platform from start to finish. Tomorrow, we'll finish the default template by implementing the mobile navigation, adding the footer, and ensuring everything is performant, accessible, and responsive.
I am currently under the weather (flu), so progress is a little slower than I hoped, but hey, we are enjoying the journey even though I sometimes sound like a dying sea lion on stream!
Anyway, thanks for reading this short build log, and I hope to see you tomorrow!
Have a great day!
With love,
Twankrui
Top comments (0)