denoland / showcase_chat

showcase_chat

A minimal chat platform template. It uses Fresh + Supabase + twind + BroadcastChannel API on Deno Deploy.

To get started, setup your .env with Supabase and Github OAuth credentials:

• cp .env.example .env

To setup a Github OAuth App

• Go to https://github.com/settings/applications/new
• Set Application name to Deploy Chat Example
• Set Homepage URL to your Deno Deploy project URL. (eg: chat-app-example.deno.dev)
• Set Authorization callback URL to http://chat-app-example.deno.dev or localhost for development.
• Add Client ID and Client Secret in the .env file.

Create a Supabase project

• Go to app.supabase.io
• Click on "New Project".
• Enter project details and wait for the database to launch.
• Grab the URL and anon key and DB from and add them to the .env file.

and fire up the server:

deno task start

showcase_chat's Issues

logout endpoint does not work

Hello - I'm using this repo to learn Fresh and I've noticed a few issues

1. there isn't a way to log users out easily
2. going directly to /api/logout does not actually remove my access token from the cookies

Presence list

Add a sidebar that shows users currently online and present in the current room.
During the meeting we decided not to show people that had visited the room in the past and are currently offline.

need to referesh page for message by people from other country

Each time a person from another country sends a message I have to refresh the website to check out the new message.
This issue was not present in earlier version of the website. Kindly look it into it.For example while communicating with a person from my country I can see their messages immediately without the need to referesh my page but on the other hand while chatting with a person from another country we need to referesh it each time to check out the recent message

Add deno.json so we can use "deno task"

showcase-chat.deno.dev is broken

That's all I see.

Suggestion: Update project to use Preact `signals`

Fresh 1.1 was released a few weeks ago and one of the main changes is the support for Preact's signals as seen here https://deno.com/blog/fresh-1.1 and demoed here https://fresh-with-signals.deno.dev//.

Since this is one of the main demos/templates of Fresh I think it makes sense to show off the improvements of signals over other hooks.

Link to source code in chat view

it would be good to have a link to the github repo in the corner - in case people feel like contributing

Bad words list room name

Add screenshot to readme

Not with "shit room" in it, please.

Depends on #39

Abstraction for storage/broadcast backend

So we show other integrations (e.g. Google pub/sub).

Add instructions for setting up github client

Right now it says:

To get started, setup your .env with Supabase and Github OAuth credentials:

But this is not very descriptive.

BroadcastChannel is not defined

Getting the following error when running locally:

An error occured during route handling or page rendering. ReferenceError: BroadcastChannel is not defined
at new RoomChannel (communication/channel.ts:12:25)

Create supabase team

Make private repo public

Try octokit from skypack

The esm.sh version does not work.
If the skypack version works, maybe @ije can fix esm.sh? 🙏

Can not send message when `Enter` pressed

The background stretches on a non-desktop ratio

Go to the deployed website and try unproportionately shrinking the window.

Set up locally with your own github app and database

new message notifications

Using the web notification API.

Document why @jsx / @jsxFragment pragmas are necessary

Also, the defaults for jsx / jsxFragment pragmas should be made the same across CLI and Deploy.

Don't show "is typing" for myself

redirect_url is not passed to github correctly

Markdown support for messages

Splash page that shows rooms

Rooms with most recent activity on top.
Depends on #5.

Add instructions for setting up supabase

Automatically create tables on first run

Show room name in UI

Limit number of messages

So the browser does not crash

Refreshing page after signing in causes a crash

Logout is broken

It sends me here:

bug: loading chat history is flaky

Utility for loading resource with retry should be externalized

Import bad word list as JSON

Show indicator when someone is currently writing a message

"Bert is typing..."

Remove concept of rooms - users should sign in and go directly into global room

This makes it more fun (more people chatting in one place), the demo simpler (fewer pages - less to grok - simpler code)

add CI

Update fresh

To get rid of fresh.gen.ts

Load times are not optimal

The chat service does not lazily download all the icons, and icons are repeated due to numerical assignment.

avoid `tw` template things

Use className="asd" instead of className={tw``asd``}

Question regarding handler

Hi!

I can't seem to find an example in fresh docs regarding the handler used in routes/index.tsx:

export async function handler(
  req: Request,
  ctx: HandlerContext,
): Promise<Response> {
....
}

What type of handler is this? Handlers explained in the docs (data fetching, API, middleware) look a bit different.

Thanks in advance!

With best regards,
Arthur

Github oauth2 redirect url not working

"create room" feature

Discussion: Why Not Websockets?

Apologies in advance if this is the wrong place to put this, I dont see a discussion section in this repo.

Is there a reason this app was implemented with server sent events instead of Websockets?

edit: I think I see why now. The browser will automatically try to reconnect to SSE streams if they are disconnected, whereas Websockets can just close. Since Deno Deploy can terminate idle instances; SSE has a more simple client side implementation because the browser will attempt to restart the EventSource. It would be perfectly viable to build this application with web sockets on Deno Deploy but the client implementation would be slightly more complex. Is my assumption correct?

feat: propogate request errors on UI

For example the one caused in #1

Document supabase table structure

Remove rooms with bad words in them / clear the database

Related #38

Polish UI

Must-have:

• Enter key should submit message
• When a new message arrives, the page should scroll to the bottom

Nice to have:

• Toast notifications

Moderate bad words

Based on a public bad word list that we can load with fetch().

Exit create room modal

Modal should close when clicked outside of it

Update / regen fresh

So it generates the deno.json file.