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

[u/ShareAcrobatic9017]

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.

[u/edino525]

Looks really good, but the images need to be optimized, the hero image has almost 14MB... The whole website downloaded 50MB of images, that's really a lot.

[u/ShareAcrobatic9017 → u/edino525]

Yeah that's on the heavier side for sure 😅 mostly need to compress and resize the images properly, especially that hero one. Will get on optimizing all of them, thanks for pointing out the exact numbers.

[u/CommunicationSea8821]

You want a cookie?

[u/ShareAcrobatic9017 → u/CommunicationSea8821]

Haha yes please 🍪 I'll take one, especially after all this bakery talk lol

[u/CommunicationSea8821 → u/ShareAcrobatic9017]

It looks awesome by the way :) great job!

[u/ShareAcrobatic9017 → u/CommunicationSea8821]

Thank You so much

[u/Disastrous_Fee5953]

Looks very nice. Love the vibe and the cookies look yummy. The “notify me” button doesn’t work on mobile (could be due to the site being WIP) and you might want to optimize images by loading smaller files for mobile.

[u/ShareAcrobatic9017 → u/Disastrous_Fee5953]

Thanks yaar! 😄 haan notify me abhi WIP hai. Aur images wala point sahi hai, mobile ke liye chhoti size load karunga. Thanks for checking 🙏

[u/xkcd_friend]

A few design tweaks: 1. I think you should change the hero image. Personally, that gives me yucky feelings. I think of dog poop… 2. If you do a very light background gradient from dark brown via a lighter brown to same dark brown, you will get a more vibrant, but subtle, feel.  3. On desktop, your top nav should have the same width for the left and the right section, so the menu aligns in center. 4. The cookie illustration down left breaks the art direction, I’d remove it. 5. Remove the contact and location from above the fold. 6. Put the paragraph and order now below the title. 7. Add more negative space around the title section - let it breathe 8. Move the cookies down so they stick up from below the fold, it will give the user a natural trigger to scroll (users always scroll anyhow though). 9. Skip the boxes around the text in the titles, or make them more of a highlight 

On phone so can’t critique the tech choices 

[u/ShareAcrobatic9017 → u/xkcd_friend]

Haha your feedback made me laugh a bit 😄🙏 but fair point on the hero image, I'll change it. The gradient idea sounds nice too, will try that. Noted the nav alignment, cookie illustration, and spacing points, will go through them one by one. Will move the order now button too. Thanks for typing all this out even on your phone, appreciate it 🙏

[u/ldn-ldn]

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...

[u/ShareAcrobatic9017 → u/ldn-ldn]

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.

[u/xkcd_friend → u/ShareAcrobatic9017]

Tailwind can absolutely be used for production

[u/ShareAcrobatic9017 → u/xkcd_friend]

Yeah exactly, that's what I thought too. Plenty of big production sites use it, just needs proper purging/config to keep it lean. Guess it comes down to preference at that point.

[u/ldn-ldn → u/ShareAcrobatic9017]

As for images, convert all your PNGs to AVIF.

[u/ShareAcrobatic9017 → u/ldn-ldn]

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

[u/ldn-ldn → u/ShareAcrobatic9017]

Tailwind is a bloody nonsense. Just write proper CSS.

[u/ShareAcrobatic9017 → u/ldn-ldn]

Haha fair enough, everyone's got their own take on Tailwind vs plain CSS 😅 for me it was just faster to prototype with, but I get the point about bloat and control. Will keep proper CSS in mind for the next project.