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
);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
