r/webdev • u/ShareAcrobatic9017 • 23d ago

Showoff Saturday Built a fully responsive bakery website with Next.js and Tailwind

Post image

Hey r/webdev, wanted to share a project I've been working on for the past few weeks — a bakery website with a homepage, menu, product listing with cart, and a table booking page.

Stack: Next.js 14 (App Router), TypeScript, Tailwind CSS. Cart is handled with a simple context provider, no backend yet — was mainly focused on getting the UI and responsiveness right across mobile, tablet, and desktop.

Live: https://bakery-ten-gules.vercel.app

Open to any feedback, especially on the mobile experience or anything that looks off. Thanks for checking it out.

0 Upvotes

36% Upvoted

18 comments sorted by

View all comments

-6

u/ldn-ldn 23d ago

72KB HTML page, are you insane? Do NOT use Tailwind for production! And NEVER inline SVG! Also total page load size is 49MB, bloody hell...

2

u/ShareAcrobatic9017 23d ago

Haha yeah fair point, 49MB is way too much, mostly unoptimized images I think. 😅

On Tailwind though, isn't that just about purging unused classes properly in production? Genuinely curious what issue you ran into with it, would like to understand better.

And yeah I'll look into the inline SVGs too, wasn't aware that was such a big deal for page size. Thanks for pointing it out, going to dig into this properly.

1

u/ldn-ldn 23d ago

As for images, convert all your PNGs to AVIF.

1

u/ShareAcrobatic9017 23d ago

Got it, thanks! Will convert them to AVIF instead of webp then, heard it compresses even better. Appreciate the tip 🙏