BOBLE

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

Key features:

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

Table of contents

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

🧑‍💻 Tech Stack

React - JavaScript library for building user interfaces

Typescript - Strongly typed JavaScript

TailwindCSS - Utility-first CSS framework

Supabase - Open source backend as a service

🔧 Tools / Dependencies

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

📡 External API's

GIF Integration: GIPHY

🚀 Installation

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

⚡ Supabase Setup

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

💬 Environment Variables

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

💻 Run locally

  npm run dev

🔬 Test application

  npm run test