Skip to content

Vue.js + Supabase. Realtime chat website. Pet project for beginner, Full stack project, Vercel deploy

License

Notifications You must be signed in to change notification settings

LevinIgor/vue-supabase-chat

Full-stack real-time chat

  • Data: PostgeSQL managed by Supabase @supabase_io (awesome real-time API).
  • Front-end: Vue.js + Vite
  • UI library: Tailwind
  • Hosting: Vercel
  • Country flags from vue-country-flag-next

Install

npm install to setup dependencies

Supabase

Create Supabase project https://supabase.com/dashboard/projects URL and KEY take from Project -> "Project Settings" ->> "API"

image

Supabase variables

Create a .env or .env.local (git not init this file) file with

  • VITE_SUPABASE_URL
  • VITE_SUPABASE_KEY

If you use VITE, Use only VITE_*** prefix !

image

Setup your Supabase project

The following database table is required:

image

Turn on realtime mode on message table:

image

Create two policy:

  • All users can insert in table
  • All users can read from table

image image

Create two function:

  • get_country_count
  • get_counts
create or replace function get_country_count ()
  returns table (country text, name text, record_count bigint) as $$
BEGIN
  RETURN QUERY
select
  location -> 'country' ->> 'iso_code' as country,
  location -> 'country' ->> 'name' as name,
  count(*) as record_count
from
  users
group by
  country, name;
END;
$$ language plpgsql;
create or replace function get_counts ()
  returns table (viewers bigint, message_count bigint) as $$
BEGIN
  RETURN QUERY
SELECT
  COUNT(DISTINCT location->>'ip') AS viewers, COUNT(*) AS message_count
FROM public.message;
END;
$$ language plpgsql;

image

Follow instruction here

Dev

npm run dev to run server on port 3000

Build

npm run build to build the react client

Demo

https://vue-chat-lovat.vercel.app/

image