Skip to main content

Getting Started

About​

A Social Media / Peers App with NextJS Supabase, i made for an onboarding project

Technologies​

Documentation Link 📃​

Notable Features​

  • Keyword analysis using Fulltext search with postgresql
  • Secured database using Supabase Database Policies
  • Supabase Edge functions using Deno
  • Lazy loaded image gallery /

Installation​

1. Create a new supabase project​

2. Initialize Supabase Tables | Policies | Functions​

  1. Go to the Project Source File > supabase > initialize.sql and
    scan through all the queries and replace some values relative to your supabase project ex. {YOUR SUPABASE PROJECT URL HERE} then copy the all of sql queries then paste it to supabase > sql editor

    This will create all of the database configs like table for the project

  2. Go to Database > Extensions > Enable HTTP Extension

    This project uses this http extension to automatically delete post images when a post is deleted

  3. Go to Authentication > Providers > Email > Turn off Confirm Email

    We only use username and password for auth

  4. Add Supabase URL Project in next.config.js remote patterns to enable

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [{ hostname: {YOUR SUPABASE URL HERE}, protocol: "https" }],
  },
};

module.exports = nextConfig;

This for our post images so that nextjs allows then

3. Database Types | Deploye Edge Functions​

Generate Database Types​

  1. Install the Supabase CLI then login with your access token

  2. Run this command to generate Database Types

npx supabase gen types typescript --project-id 'YOUR SUPABASE PROJECT URL HERE' --schema public > types/db/db-generated-types.ts

Deploy Edge Funbctions​

Using the supabase CLI you can deploy your edge function using

supabase functions deploy createpost --project-ref {YOUR SUPABASE PROJECT URL HERE}

4. Environment Variables and Dependencies​

Fill out .env.local

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Install project dependencies and run the project

npm install
npm run dev