Choosing a tech stack for our food app

  • 📖 ~2 mins to read

For a long time, Kev Simpson and I have been discussing building a food app together. Over the years we’ve both worked on our own food-related projects of sorts and have finally decided to join up and work on this project together.

Kev Simpson, if you haven’t already guessed is my brother, he’s also a front-end developer but his skillset leans more towards the engineering side of things whereas mine leans more towards the design/UX side of things.

Rob and Kevs skillset across UX, design, front-end and back-end

Not just another food blog

So why are we building this?

We’re designing and building this first and foremost for ourselves. It’s a product we intend to use weekly. We need somewhere that we can:

  • Store all of our recipes
  • Make it easy to find recipes to cook for the week
  • An easily customisable shopping list
  • A polished cooking experience

Once we have the core functionality built and enough content on the platform we plan on rolling it out for others to use – it might be invite-only initially but we’ll iron out those details later on.

Never miss out on new articles

Get new articles straight to your inbox. Your information won’t be used for anything besides sharing updates with you.

Our chosen tech stack

Next.js

For a long time, I’ve been using Gatsby.js as my static site generator (SSG) of choice, for this project we’ve decided to give Next.js a try. Next.js is a framework for building static and server-rendered React applications – which allows developers to create highly performant sites.

Next.js is used to build static and dynamic websites and web applications

Prismic

Using a headless CMS is key for this project, we plan to push the same content to the app and the website but use it in different ways. I’ve used both DatoCMS and Prismic for projects in the past but we’ve decided to go with Prismic. The main reason is that DatoCMS’ pricing model is far steeper once you get off the free plan and we want to keep running costs low.

Prismic is a headless CMS which allows you to edit your content and choose the framework you want

Vercel

Next.js was created by the team at Vercel (formerly Zeit), so it only makes sense to use it for hosting. I’ve mostly used Netlify in the past so it will be interesting to see how Vercel compares – both seem to have fairly similar pricing models as you scale.

Vercel combines the best developer experience with an obsessive focus on end-user performance

Storybook

I’ve been building pattern libraries for around 5 years now so understand the need to have a component library to power the interface. Storybook is great because we can build it right into our Next.js project and have a living pattern library that powers the interface and not have it as a separate project.

Storybook is an open source tool for developing UI components in isolation

Framer Motion

Micro-interactions are becoming expected nowadays, plus it has some real benefits when it comes to the user experience and can reduce cognitive load for users when done right. So to help with that side of thing we’re giving Framer Motion a go (Kev has played around with v1 already and it’s pretty amazing). We plan to use Framer during the design phase to create the interactions which can then be used in production.

Framer Motion is a production-ready React animation and gesture library

Stay tuned for more updates

I plan on posting updates of our progress as we design, build and launch this product every other week – so stay tuned for more updates.

Rob Simpson

UI/UX Designer & Front-End Developer bridging the gap between user goals and business needs