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.
- 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
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