Getting Started

About

A ID Based Chat app with NextJS Supabase, for practicing realtime data with supabase and react-query

• https://mmv-chat-line.vercel.app/
• Github Repository
• Deployment Date: Jan 6, 2023

Technologies

• Nextjs
• MantineUI
• Supabase
• PostgreSql
• React Query

Documentation Link 📃

Installation

1. Create a new supabase project

• https://supabase.com/
  
• Create a new account and create a project with the region of your choice
• Go To and get your api keys and url https://app.supabase.com/project/_/settings/api

2. Initialize Supabase Tables | Policies | Functions

1. Go to the Project Source File > schemas and
   

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

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

   We only use username and password for auth

3. You also need to enable realtime for the messages tables in your supabase project

/** @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 > supabase/db-generated-types.ts

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