bubble

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

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.