64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
# Full-stack real-time chat
|
|
|
|
[](https://app.netlify.com/sites/random-chat/deploys)
|
|
|
|
- **Data:** PostgeSQL managed by [Supabase](https://supabase.io/) [@supabase_io](https://twitter.com/supabase_io) (awsome real-time API).
|
|
- **Front-end**: React + Vite
|
|
- **UI library**: [chakra-ui](https://chakra-ui.com/) [@chakra_ui](https://twitter.com/chakra_ui)
|
|
- **Hosting**: [Netlify](https://www.netlify.com/)
|
|
- Country flags from [Flagpedia](https://flagpedia.net)
|
|
|
|
## 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:
|
|
|
|
```sql
|
|
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](https://supabase.io/docs/guides/auth/auth-github)
|
|
|
|
## 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](https://random-chat.netlify.app/)
|
|
|
|
|