Bubble Chat

Live and secure chat strongly inspired on WhatsApp. Powered by Twilio Conversations API.
Created to participate in a hackathon hosted by midudev.

🚀 Preview

App preview before deadline and project review:

• Demo

  Screenshots provided by webmobilefirst.

✨ Features

• Login with GitHub
• Ability to create multiple chats
• Ability to delete chats
• Ability to leave a chat
• Invitation link with expiration of an hour
• Dynamic routes for chats

• Encrypted messages

  

👨‍💻 Hackathon Info

• The hackathon goal was build a live and secure text chat (mobile-first or mobile-only) using Twilio Conversations API.
• Announced at 2022/07/01.
• Deadline: 2022/07/20.

🛠️ Technologies

• Twilio Conversations API
• TypeScript
• NextJS
• ChakraUI
• Zustand
• tRPC
• zod
• Supabase
• Prisma
• next-auth

🧰 Requirements

• NodeJS
• A Twilio account
• Twilio Token Service

✨ Getting Started

1. Create a Twilio Token Service.

This is a service to generate a Twilio Access Token, using Twilio Functions (serverless functions). The token provides the required permissions. Created using Twilio official guide.

2. Create a Supabase project.

3. Create a GitHub App.

4. Clone this project using one of these ways:

• Forking the repository
• Cloning the repository locally

  git clone https://github.com/marsidev/bubble
  cd bubble

5. Set environment variables

Create an .env file in the root of your project and add the following values:

TWILIO_TOKEN_SERVICE_URL=
DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000
GITHUB_ID=
GITHUB_SECRET=
CRYPTO_SECRET=

Fill the TWILIO_TOKEN_SERVICE_URL with the token service URL generated in step 1.

Fill the DATABASE_URL with the URL of your Supabase Database, under Settings > Database > Connection string > Nodejs.

Fill the NEXTAUTH_SECRET with a secret string. This is used to sign the JWT tokens.

Fill the GITHUB_ID and GITHUB_SECRET with the GitHub App credentials generated in step 3.

Fill the CRYPTO_SECRET with a secret string. This is used to encrypt/decrypt chat messages and invitation links.

6. Install dependencies

pnpm install

7. Run the project

npx prisma migrate dev
npx prisma generate
pnpm dev

Open http://localhost:3000 with your browser to see the result.

ℹ️ Credits

Logo icon by Icons8

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.