My father has always been passionate about crafting tiled stoves. It's something he's wanted to do his whole life, turning blocks of ceramic into beautiful, functional stoves. Recently, he realised it was time to bring his craft into the digital age. Ok, that isn't completely true. I made him realise that. My goal? Make him as visible online as his stoves are striking in person, all without breaking the bank.

Technologies Used

Next.js

Using Next.js was a no-brainer for me; it has everything needed to create a responsive and dynamic website. On top of that, it's server-side features make SEO optimization possible, although I agree this is something I should definitely spent some more time on.

Tailwind CSS

Tailwind CSS provided the utility-first architecture that expedited the styling process. I have to be honest here - at first, I really hated working with tailwind classes, but I grow to like, and maybe even love it. Now it's my first choice when starting a new project, that's supposed to look good besides functioning.

Vercel

The project needed a home. Vercel, being tailored for Next.js apps, was the perfect fit, offering a robust free tier. Deploying websites on Vercel is as easy as it gets - all you need to do is grant access to your repository and you are good to go. For more robust deployment process, feel free to add checks, which I did but for project this size I didn't opt for anything crazy.

Cloudinary: The Game-Changer

My father's work thrives on visuals. A gallery wasn't just an extra feature; it was a necessity. That's where Cloudinary came into play. Its free tier was perfect for hosting the image gallery, enabling us to showcase high-quality images without added costs. And you can upload videos, too.

The only problem here is that my father isn't very eager to take pictures of his work. Which is a shame, if you look at his work! So as soon as he manages to provide more appealing pictures, the gallery will be reworked. I think the best suitable approach would be to use project-based gallery - which you can easily do with Cloudinary. Each stove will have a separate folder with content and the only thing you need to do, is to manage that on your front-end part. Nothing special.

Contact

A website for a craftsman like my father wouldn't be complete without a way for potential clients to reach out. So, a contact form was essential. However, as much as we wanted to open lines of communication, we also wanted to protect ourselves from the inevitable spam that plagues online forms.

Given that Next.js is not just a frontend framework but a full-stack solution, I created API routes to handle the email sending logic directly within the Next.js app. This removed the need for a separate backend service.

To keep spam at bay while ensuring a smooth user experience, I opted for Google reCAPTCHA v3. Unlike its predecessors, v3 doesn't require users to solve puzzles or click on images. It operates in the background, generating a score based on user interactions with the site, allowing us to distinguish between genuine users and bots without any user friction. This seamless integration maintains the integrity of our contact form while optimizing user experience.

Conclusion

In the end, the website, cylinder-pece.sk, became more than just a project; it was a heartfelt gift to my father who has devoted his life to his craft. Using Next.js, Tailwind CSS, Vercel, and Cloudinary, I managed to create a fully functional, visually appealing website for him. And the best part? The only cost was the domain registration.

Now, my father's intricate stoves are accessible to anyone, anywhere — thanks to a few lines of code and some fantastic free services. Feel free to visit his website any time!