The Project
I'm pretty thankful to have a family who know how to create delicious food. This website was a fun little side project to show off our recipes to the world.
The main goals of the project was to:
- Create a fast experience
- Make it easy to add new recipes
- Use preview mode
- Optimise the site for Search Engine Optimisation (SEO)
- Use the recently released on-demand revalidation feature
- Display the recipe up front as high as possible (most sites just have words at the top)
Weapons of choice
- Next JS
- Tailwind CSS
- Sanity IO
- Vercel
The Sanity Studio
I like to have full control over everything, the Sanity Studio allows me to define my content models and use the structure builder to customise the navigation of the website content.
Sanity IO is one of many CMS's to support the Next JS preview mode which means you can edit content and see the changes on keypress! And once your happy with the content, using on-demand revalidation you can make the changes live in under a second.
The Image CDN provides useful utilities such as hotspot and crop allowing for art direction meaning I can upload any image without having to edit beforehand.
The Design
Using TailwindCSS you can quickly prototype and see what looks good. I took plenty of inspiration from dribbble to help come up with a simplistic MVP that has enough information above the fold on any device.
The Frontend
Using this guide, I was able to get a head start without having to worry about setting up the preview mode and helper functions to interact with Sanity.
Querying using GROQ was new to me but I found the guides to be informative and created a single query that works for all content types. This was useful as I prefer the pattern of a catch-all page route rather than creating different route files for different types.
Pagespeed
Next JS is already performant but while creating this website I learnt more about how to make it even faster. Some of the most important parts were:
- Using Preact not React
- Critical CSS
- Using lighter npm package alternatives
- Analysing the app bundle
- Loading scripts on user interactions e.g. form hover, page route
You can learn more in my blog post.
SEO
The following items were added to optimise the site:
- Sitemap (XML and HTML)
- Meta tags
- robots.txt
- Recipe Schema (How-to embedded)
- Review Schema
- Breadcrumbs Schema
- Image alt text
- Image no scripts for lazy loaded images