Svelte & Supabase Real-time Chat app 
Tags: supabase, svelte, beginners, tutorial
Published: 2022-02-20 01:43:36

Welcome, this tutorial shows how to build a simple chat app with [Svelte.js](https://svelte.dev/) and [supabase](https://supabase.com/).

### [Demo](https://svelte-supabase-chat-8f3nj2w66ws5gcqtsb.vercel.app/)


## Getting started

## Step 1: Create a new project 

```sh
$ yarn create vite my-svelte-app --template svelte-ts

$ cd my-svelte-app
$ yarn install
```

now, open your app with vscode & you should have a structure like this: 
![Application folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmmpjos4lxbwsh5vtnul.png)


## step 2: Go to [supabase](https://app.supabase.io/) & create an account 

- create a new project to get your app's credentials 

> supabaseUrl | supabaseKey 
once you have them, Create .env file and store the values
```env
VITE_PUBLIC_SUPABASE_URL="https://<your project id>.supabase.co"
VITE_PUBLIC_SUPABASE_KEY="your public anon key"

```
- we need to create the Messages table, you can do that by supabase UI or with a sql command
```sql
CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  text TEXT NOT NULL,
  timestamp timestamp default now() NOT NULL
);
```
![db msgs table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dhhb5z6elgs6vvvwupc.png)

## step 3: Create the store
### once you have your API keys, now let's create a store.  
[Store](https://svelte.dev/docs#run-time-svelte-store) in svelte is an object that holds you app's state

- First, we need to install one more package to connect to supabase 
```sh 
yarn add @supabase/supabase-js 
```
- create a store file *your_app_dir/src/store.ts* 
- next, we will initialize a supabase client & a writable store 

![supabase code initialization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0198cqd25sir20j5qqwi.png)

- supabase gives us a function that receive a notification every time an auth event happens. by default it stores the user auth token in the localStorage & this function with run when you refresh you app.

```js
supabase.auth.onAuthStateChange((event, session) => {
  if (event == 'SIGNED_IN') {
    store.update((oldStore) => { // updating the store if there is a token stored
      return {
        ...oldStore,
        user: session.user
      }
    })
  } else if (event == 'SIGNED_OUT') {
    store.set(defaultStore) // set the store to the default value
  }
})
```

- Finally, we export a default object with the functions that we will use in other parts of the app. 
![authentication & chat functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar5i6l9q2qlkssy5fqxe.png)

## Step 4: Last step 

Now, we can create the components that we need for our little chat app. There are two main components, a Chat component that will be rendered when a user login, else a Login component will take place.

one more thing, I'd like to explain the **Realtime** part. it's pretty straight forward. Supabase gives us a subscribe function that we can use to listen for database events like ['*','INSERT','UPDATE','DELETE']. 

![Listen for new msgs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99va800gzj7aqfq7jlmm.png)

I hope you find this easy & helpful, and maybe you can build on top of it for your next app. Enjoy!! :)

Repo: https://github.com/ahmdtalat/svelte-supabase-chat

you can check the docs here [Svelte](https://svelte.dev/docs) [Supabase](https://supabase.com/docs/reference/javascript/installing)



cover: https://undraw.co/