Part 1: Let's make a Coffee Shop review site with Supabase and Vue.js

Introduction

I wanted to see how fast I could build a fully-functional coffee shop listing and review web app and learn new things, which led me to write this guide. Let's call our app 'Shoffee' (https://Shoffee.io).

We'll use Supabase (the open-source Firebase alternative) on the backend and Vue.js on the front to build this app.

There will be a few parts to this guide.

You'll probably like to sign up for my newsletter to get notified of any new parts to this guide.

Bootstrapping the project

First off, make sure you have Node.js v19.8.0 installed. If you don't, I highly recommend using NVM to install it.

To check your Node.js version, run 'node -v' in your terminal. The output should be:

v19.8.0

Also, make sure you have npm installed. To do this, run 'npm -v' in your terminal. The output should be along the lines of:

9.5.1

Now that we have Node.js and NPM installed, we can install Vue using the 'create-vue' command.

npm create vue@3

When asked what tools to include in your project, use this code snippet for reference:

ivansostarec@Ivans-MacBook-Air ~/D/P/personal> npm create vue@3
Need to install the following packages:
create-vue@3.6.1
Ok to proceed? (y) y

✔ Project name: … [shoffee.io](<http://shoffee.io/>)
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in /Users/ivansostarec/Documents/Projects/personal/shoffee.io...

Done. Now run:

cd shoffee.io && npm install && npm run format && npm run dev

To open your project in VSCode (my code editor of choice), use the following:

ivansostarec@Ivans-MacBook-Air ~/D/P/p/shoffee.io>code .

Now go back to the shell where we ran npm run dev and notice the provided development URL it gave us. Mine is: http://localhost:5173/, but yours could be anything localhost: port.

When you open that URL, you should see the Vue.js start page! 🎉

Outlining minimal project requirements

We got our Vue.js project up and running, but what now? What do we really want to build?

I imagine shoffee.io as a coffee shop review app. When you enter the web app, it should present you with a list of the best coffee shops in town. Each coffee shop should have a nice image, a rating, and a customer review - at the bare minimum.

Above the list of coffee shops, I’d like it to have a filter mechanism. A bare minimum filter is by city, and then we can introduce other filter properties.

We also need a ‘back office’ panel where coffee shop owners can login and add their coffee shops to our site.

So, to summarize our minimal requirements:

• List of best coffee shops in town

  • each coffee shop should have a nice image

  • a rating

  • a customer review

• Filter

  • by city

• Back office site

• Login/Register page

In the next part of this guide, we will be building our front end.

Make sure to stay tuned for more by subscribing to my newsletter. 👋