Full-stack real-time chat
- Data: PostgeSQL managed by Supabase @supabase_io (awsome real-time API).
- Front-end: React + Vite
- UI library: chakra-ui @chakra_ui
- Hosting: Netlify
- Country flags from Flagpedia
Install
npm install to setup dependencies
Supabase variables
Create a .env file with VITE_SUPABASE_URL and VITE_SUPABASE_KEY (see env.example)
Setup your Supabase project
The following database table is required:
| Field | Type |
|---|---|
| id | BIGINT |
| username | VARCHAR |
| text | TEXT |
| country | VARCHAR |
| is_authenticated | BOOLEAN |
| timestamp | timestamp |
SQL query if not using the Supabase interface:
CREATE TABLE messages (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
username VARCHAR NOT NULL,
text TEXT NOT NULL,
country VARCHAR,
is_authenticated BOOLEAN DEFAULT FALSE,
timestamp timestamp default now() NOT NULL
);
Note: If you're using Supabase interface, don't forget to tick Enable Realtime setting after you created the table.
Setup GitHub authentication (optional)
Follow instrunction here
Dev
npm run dev to run server on port 3000
Build
npm run build to build the react client
Demo
https://random-chat.netlify.app
