Nuxt Supabase Realtime CRUD template with optimistic UI

Check running example here: https://nuxt-supabase.netlify.app/ Project idea: Full Stack Recipes

Tech Stack: Nuxt.js, Vuetify, Supabase (DB, Realtime, Auth), Postgres, Netlify Hosting

Features list:

• Realtime CRUD example
• Auth
• Federated login with Google
• Role definitions
• DB Init files (SQL)
• DB migrations between environments
• Running locally with docker-compose
• Licensing Notes

Prepare database and Auth

1. Edit the local `.ENV' file to add the url and token from Supabase.
2. create table todos with sql:

 CREATE TABLE todos (
  id varchar primary key  NOT NULL,
  text text,
  done boolean,
  created_at TIMESTAMP DEFAULT(now()) NOT NULL
 )

3. Add Login with Google from the Auth settings in supabase. If want a guided tutorial, then folow this steps: https://www.youtube.com/watch?v=_XM9ziOzWk4

Development

# install dependencies
$ yarn install

# serve with hot reload at localhost:8080
$ cd docker && docker-compose up -d
$ yarn dev


# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Licensing Notes

Tracking and understanding licensing Node applications can be tedious due to the 3rd party packages involved in the project.

You can run this command locally to check the number of licensing for the installed packages. npx license-checker --summary

See only production packages: npx license-checker --production

See all option here

Example:

 $ npx license-checker --production --summary
├─ MIT: 988
├─ ISC: 89
├─ CC0-1.0: 24
├─ BSD-2-Clause: 22
├─ BSD-3-Clause: 12
├─ Apache-2.0: 6
├─ (MIT OR CC0-1.0): 3
├─ Public Domain: 2
├─ BSD*: 2
├─ 0BSD: 2
├─ (MIT OR Apache-2.0): 1
├─ CC-BY-4.0: 1
├─ UNLICENSED: 1
├─ (WTFPL OR MIT): 1
├─ (MIT AND Zlib): 1
└─ (MIT AND BSD-3-Clause): 1