Building a Reading List Web App as a Side Project
Building a reading list web app as a side project, using node, preact, and tailwind CSS, you might ask yourself, what is my purpose?
This must have been done a thousand times before.
Motivation: JavaScript Web Development the Proper Way
I finally took some time for proper research (and some lazy trial and error based on tutorials and example code) to set up a proper full-stack application for three main reasons:
- Doing the right thing: trying to use the MERN stack the proper way
- Learning: getting a deeper understanding of modern web dev
- Saving time by being prepared for future projects
Work in Progress
Parts of this article have already been published in my article series “Building a reading list web app with node, preact, and tailwind CSS” on dev.to. The app is a work in progress. You can have a look at my code on GitHub.
Doing the right thing: trying to use the MERN stack the proper way
In the past, I had worked with legacy code or did not take the time for proper research, for reasons I will explain below. At some point, I had been quite unhappy about my work and even felt like I did not like React or even JavaScript and Single-Page Applications at all. But as fellow web developers helpfully pointed out, there is more than one way to do things, especially when it comes to React, and I wanted to keep an open mind and be able to work with different web development tech stacks.
Actually, MERN Stack is only an approximation to my actual technical setup. Instead of React, I use the smaller, and probably faster, Preact library which does not use a virtual DOM while still being mostly compatible to React.
I use TypeScript in the front-end, Snowpack instead of Webpack, and no Babel in the back-end. Also, I wanted to give the functional CSS framework Tailwind a try, after not being convinced by the popular CSS-in-JS approach of many modern Single Page Applications.
Learning: getting a deeper understanding of modern web dev
In real-life projects, we often have to be pragmatic, using existing code, copying from some tutorial, refining until the code passes all code reviews, and wasting most of the time doing trivial tasks that do not trigger any learning progress at all.
And while I will always opt for proven stable software to sell customers for production, side projects offer a good opportunity to test new and less widely adopted technology like Svelte, Preact, and beta releases of Tailwind JIT etcetera, so I can make up my mind without making experiments on behalf of a customer.
Controversial concepts and solutions like functional CSS vs. CSS-in-JavaScript, Typescript, controlled vs. uncontrolled components, can also be safely evaluated in a side project.
Saving time by being prepared for future projects
Finding out: learning, experience, and hopefully some fun and save me some time in future projects. Besides learning, experience, and hopefully some fun, the result should be an actual project to show, plus a scaffold that might save me some time in future projects. The time that I already invested when researching and building my side project.
Trying to use Tailwind, TypeScript, and (P)React in a proper way, or at least in a way that fits my experience and requirements seems a good way to make up my own mind about technology that seems to elicit a lot of controversy in the web developer community.
Continue reading and see more technological details and hands-on code in my article series on dev.to: Building a reading list web app with node, preact, and tailwind CSS.
My Current Web Development Tech Stacks
Besides full-stack front-end web development using JavaScript, CSS, and HTML, I have been using JAMStack for my static portfolio website, ingo-steinke.com, and PHP-based stacks (LAMP, Symfony) mostly when working with WordPress and Shopware.
About me
I am Ingo Steinke, a creative web developer from Germany, creating sustainable software and websites. If you like my talks and articles, feel free to support me on Patreon, buy me a coffee, or hire me as a freelancer.
