Online Free Web Chat. Live at chat.marioph.com

If you want to start your first conversation and have no other users to chat with, follow my invite code.

📸 Screenshots

• Private chats 👥
• Groups with unlimited participants 📢
• Share text messages, images, GIFs, and audio recordings in real-time 📡
• All your data is stored in the cloud and protected through your account 🔒
• Create and delete chats and messages, and manage your groups ✏️
• Access from all your devices, since you only need a browser 💫
• Only requires a verified email address, no phone number, payment or other personal information 😇
• Translated into different languages (currently English, Spanish and French) 🌎

This project was made to learn about some tools.

This is not a professional or for-profit project.

If you want to make a similar project with some of this tools, this could be a reference example (that's why I share it), but don't expect everything to be as correct as it could be.

If you have any suggestions or encounter any problems, feel free to report them.

• Tech Stack
• Tools / Dependencies
• External API's
• Installation
• Supabase Setup
• Environment Variables
• Run locally
• Test application
• Build for production

React - JavaScript library for building user interfaces

Typescript - Strongly typed JavaScript

TailwindCSS - Utility-first CSS framework

Supabase - Open source backend as a service

Bundler: Vite

Routing: Wouter

Server state management: TanStack Query

Testing: Vitest

Linting: ESLint

Integration with Supabase: Supabase-js

Translation: React-i18next

QR Code: React-qr-code

Resize Observer: Use-resize-observer

GIF Integration: GIPHY

git clone https://github.com/marioperezhurtado/Boble.git
cd Boble
npm install

https://supabase.com/docs

You can find the SQL queries and policies of this project here, or you might create your own.

Resulting database schema: (Generated w/ supabase-schema )

• Create an account on Supabase.

• Create a new project in the Supabase dashboard.

• Get the URL and the anon key of your project, and set them in your .env file

  https://app.supabase.com/project/^your-proyect^/settings/api

• Run "User Management Starter" SQL query.

• Enable and configure authentication providers (google, github).

  https://app.supabase.com/project/^your-proyect^/auth/providers

• Create tables and setup its RLS (Row Level Security) policies.

  https://app.supabase.com/project/^your-proyect^/auth/policies

• Enable realtime updates.

• Enable storage, create buckets and setup its policies.

  https://app.supabase.com/project/^your-proyect^/storage/buckets

To run this project, you will need to add the following environment variables to your .env file

VITE_APP_URL='https://your-url.com'

VITE_APP_GIPHY_API_KEY='your-giphy-api-key'

VITE_APP_SUPABASE_URL='your-supabase-url'

VITE_APP_SUPABASE_ANON_KEY='your-anon-key'

Supabase env variables can be found at https://app.supabase.com/project/^your-proyect^/settings/api

  npm run dev

  npm run test