# Full-stack real-time chat

[![Netlify Status](https://api.netlify.com/api/v1/badges/38b6f457-50d2-42ac-b9a8-9ca962febebd/deploy-status)](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/)

!['demo'](https://random-chat.netlify.app/demo.png "demo")