Find a Hero

Multisite set up

Having some experience in my day job setting up multisites, I managed to implement some of the concepts into a configuration on Nextjs to allow for a single code base to manage all four (and counting) apps.

Tailwind offers a great solution for theming. So far custom CSS is virtually zero. https://tailwindcss.com/docs/theme

For CI/CD, it means four different apps on Netlify, with four pipelines. They can still feed from a single repo, however the build hours are 4x. So far free account limits haven't been met. 🤞

Backend - Strapi on Heroku

For backend I have settled on Strapi Headless CMS. The feature I'm most excited about is the GraphQL integration. It takes all the pain out of having to define types, queries and mutations, so that you can focus on building out app features.

To host the Strapi app, I considered AWS, however all the options seem way too expensive for a pre-launch phase, non-revenue bearing app. So after other considerations I've gone with Heroku. Having not used it much at all until now, I can say it's ridiculously simple for an app like Strapi - simply connect with the heroku CLI, push to the repo and it's done.

I finally came up with a way to make the concept more sexy than "Find a Plumber" or "Find a Locksmith"... bringing the concept together under "Find a Hero" as a collective of web apps to match-make local professionals and home owners.

Burst pipes? Faulty wiring? - You need a Hero! 💪
(🎵queue Bonnie Tyler - Holding Out For A Hero)

Hopefully the service providers (heroes) and homeowners will find this concept more "entertaining" and easy to engage with than other alternatives.

If you think differently or have an opinion please share!

From here on the concept will be about www.findahero.co.za.

This week I made some good progress re-thinking the stack of the frontend, even though it's still largely static only. It's a React app built on Next.js.

Switching to Tailwind

I initially started out by experimenting with Ant Design as the css framework. It would have been fine, but I also tried out Tailwind for the first time. I've been apprehensive of using it in the past, because it makes the HTML look incredibly messy and seemingly hard to maintain. However seeing its popularity increase over the years I decided to fold and give it a try.

I must say i'm pleasantly surprised - building up CSS with SCSS or LESS could well be a thing of the past. It's much faster to prototype new components and ideas. I could imagine it would require some discipline for non-css savvy devs to adhere to using certain classes (eg colours, sizes, formatting, padding, margins, etc), across different components. You need to keep things really simple in terms of rules and consistency, and build up reusable components instead of relying on classes.

Another benefit of Tailwind is the potential to borrow boilerplate code from different source such as https://shuffle.dev/ - all you need is the HTML and everything is taken care of.

Setting up on Netlify

I decided to see how cheaply I could get things going, so I've cancelled my previous host and set up a project on Netlify. Setting up this Next.js app with Netlify required minimal config changes. The two work together like BFF's. I'm yet to see what the impact of using Next's SSR features will be.

Temporary logo

I whipped up a temporary logo and colour scheme to get things going. It will definitely change in future.

Needless to say I've updated the "coming soon" page to look slightly more appealing.

https://www.findaplumber.co.za