Chat Application

An open source example application build using the Astro Framework in combination with UI Libraries like React, Vue, Svelte and realtime technologies like Pusher.

About

The Idea behind this project was to showcase how a fully interactive Web Application can be build while having the benefits of server rendered content.

Structure

Anything but the package folder follows the project structure of a Astro project.

#package

The package folder hosts the logic for our frontend and backend.
Every package hosts their own subpackages that can be consumed but the backend package is treated differently here. It's subpackages can be consumed through the AppContainer found at package/backend/backend.ts. This ensures that the Consumer (in this case the Astro Framework) has only one way of gaining access to the business logic and does not have to implement the interfaces itself.

Features

Authentication backed by secured cookies
Realtime knowledge of new entities backed by Pusher
Persistence backed by PlantScale's MySQL Instance
Fully typed data access backed by Kysely
UI Framework agnostic through Astro's adapters
- Vue
- Svelte
- Solid
DTO and Parameter Validation backed by Zod
Fast and easily extensible styling through TailwindCSS
Typesafe through TypeScript
Pessimistic handling of requests. Nearly every return is treated as an Optional backed by typescript-optional

Running Locally

Clone the Repository

git clone https://github.com/adnanbrq/astro-chat-example.git

Install dependencies using via pnpm:

pnpm i

Copy .env.example to .env and update the variables.

cp .env.example .env

Create a App on Pusher. You need to have an Account
Start the MySQL Database using the provided docker-compose config

docker compose up db

Start the Application

pnpm run dev

Once the Application is running you are able to Sign Up or Sign In and create a Channel by giving it a Name in the Left side Textfield and hitting Enter