:zap: Next Tailwind Supabase

• Next.js PWA to display data from a Supabase PostgreSQL database
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Next Tailwind Supabase
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :flashlight: Testing
  • :computer: Code
  • :cool: Features
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Supabase is an open-source alternative to Firebase, but uses PostgreSQL instead of document database. Database is realtime & can use SQL joins. Realtime notifications via Websockets. RESTful API requires no backend code.
• Next.js uses React v17
• Progressive Web App with a service worker for programmable content caching and a web manifest so app can be found by search engines.

:camera: Screenshots

:signal_strength: Technologies

• Next.js v12 React framework
• React v17 Javascript library
• Supabase public Beta Postgres database
• supabase-js v1 isomorphic Javascript client for Supabase
• TailwindCSS v3 CSS framework that helps create very light build packages
• @tailwindcss/aspect-ratio used to give elements different fixed aspect ratios depending on screen width
• next-secure-headers v2 to set secure response headers

:floppy_disk: Setup

• npm i to install dependencies then...
• Create free account with Supabase and create table
• Add data to table - I found image URLs from Pinterest. Data was exported from Supabase as a CSV file - see images_allRows.csv. It is easy to import this into a new Supabase table and set id as the Primary Key. Database also requires a Function Hook to be added so database changes are shown in the deployed app
• Create .env.local then add your Supabase API Authentication credentials as shown in .env.example.local
• npm run dev for a dev server. Navigate to http://localhost:3000/ - app will automatically reload if you change any of the source files
• npm run build for a build folder - not necessary as Vercel creates build files during Deployment

:flashlight: Testing

• Tests not set up

:computer: Code

• index.tsx function to get data from Supabase database

export async function getStaticProps() {
  const supabaseAccess = createClient(
    process.env.SUPABASE_URL || '',
    process.env.SUPABASE_KEY || ''
  )

  const { data } = await supabaseAccess.from('images').select('*').order('id')
  return {
    props: {
      images: data,
    },
  }
}

:cool: Features

• Supabase user interface is cool to work with and they have SQL templates to create a user login etc.
• Changes to the Supabase data are automatically displayed in the deployed app using a Supabase Function Hook
• 100% perfect Lighthouse score

:clipboard: Status & To-Do List

• Status: Working PWA, deployed to Vercel. 100% Lighthouse score
• To-Do: Nothing

:clap: Inspiration

• Youtube: Lee Robinson: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS but with my own database data, other modifications for a perfect Lighthouse score, including conversion to PWA.

:file_folder: License

• N/A

:envelope: Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com