misbah4064 / chatbase

A minimal chat web-based application built upon Supabase

ChatBase

A minimal web chat application built upon Typescript with Supabase and Vercel.

Features

• User authentication
• User profile
• Search users and rooms
• Create personal message room
• Realtime chat
• Send text messages
• Send attachment messages
• WebAuthn as 2FA
• Delete conversation rooms
• Edit messages
• Delete messages
• Rich media attachment messages
• Video call
• Audio call

Setup Guide

Prerequisites

• Node.js (v16.15.0 or higher)

• Yarn (v1.22.10 or higher)

• Vercel CLI (v28.1.3 or higher)

• Clone the repository:

  git clone https://github.com/mgilangjanuar/chatbase.git

• Install dependencies:

  yarn install

Supabase Project Setup

Login and create a project at supabase.com

Supabase Auth (with Google)

Go to the Settings page and select Authentication

• Allow new users to sign up

• Fill in the site URL, eg (http://localhost:3000, etc)

• Add your site URL to the redirect URLs, eg (http://localhost:3000, https://chatbase.vercel.app, etc)

• Enable Google as an auth provider:

  • Create OAuth client ID in Google Cloud Console

    Add your redirect URL from Supabase to the redirect URL of Google auth console, look like: https://{your_project_id}.supabase.co/auth/v1/callback

  • Save client ID and secret in the Supabase auth settings

  • Click save

Supabase Database

• Go to the SQL editor and create the New query

• Run the scripts from:

  • sql/schema.sql
  • sql/storage.sql

Deployment on Vercel

Install Vercel CLI and login with command: vercel login

• Local

  • Fill in the environment variables in .env file (see .env.example for reference)
  • Run: vercel dev or yarn start

• Production

  • Fill in the environment variables in the Vercel settings page
  • Run: vercel --prod or yarn run deploy

License

ChatBase is licensed under the MIT License