Full-stack real-time chat

• Data: @supabase_io (on top of PostgeSQL) for the real-time messages.
• Front-end: React (CRA)
• UI library: @chakra_ui

Install

npm install to setup dependencies

Supabase variables

Create a .env file for the Supapase URL and ANON KEY (see env.example)

Setup your Supabase project

The following database table is required:

Field	Type
id	BIGINT
username	VARCHAR
country	VARCHAR
text	TEXT

SQL query if not using the Supabase interface:

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  country VARCHAR,
  text TEXT NOT NULL
);

Dev

npm start to run server on port 3000

Build

npm run build to build the react client

Example