kayaayberk / real-time-translation-chat-app

Chat Up is a web app that provides built-in real-time translation that helps people to chat in any supported language. It's built for both experimental purposes and to make life easier for small friend groups that have a language barrier and is currently being used by ~15 people for fun.

Chat Up

Chat Up is a web app that provides built-in real-time translation that helps people to chat in any supported language. It can easily translate multiple languages in both single and group chats allowing everyone to easily communicate. It's built for both experimental purposes and to make life easier for small friend groups that have a language barrier and is currently being used by ~15 people for fun.


View LIVE ~ Report Bug

⚙️ Installation & Setup

Clone the repository

## HTTPS
git clone https://github.com/kayaayberk/real-time-translation-chat-app.git
## SSH
git clone [e-mail]:kayaayberk/real-time-translation-chat-app.git

Install packages and dependencies

npm install

Run on your localhost

npm run dev

In your .env.local file

// For database interactions and configurations
FIREBASE_PROJECT_ID='YOUR FIREBASE_PROJECT_ID'
FIREBASE_CLIENT_EMAIL='YOUR FIREBASE_CLIENT_EMAIL'
FIREBASE_PRIVATE_KEY='YOUR FIREBASE_PRIVATE_KEY'

// For Auth purposes
GOOGLE_CLIENT_ID='YOUR GOOGLE_CLIENT_ID'
GOOGLE_CLIENT_SECRET='YOUR GOOGLE_CLIENT_SECRET'

// For Stripe payments & Subcription bill generation
STRIPE_SECRET_KEY='YOUR STRIPE_SECRET_KEY'

🔑 For credentials, refer to

• Firebase
• Google Cloud
• Stripe
• Next.js deployment documentation

🤝 For Test Purposes

To test out Stripe payments and billing, use:

## Test credit card
4242 4242 4242 4242
## DATE:
24/42
## CVV:
424
## Rest:
Random

🧱 Tech Stack & Features

Frameworks & Libraries & Languages

• Next.js
• React
• Typescript
• NextAuth.js
• Zustand
• Zod

Platforms

• Vercel
• Firebase
  • Firebase Rules
  • Firebase Functions
  • Firebase Extensions
• Google Cloud
  • Google Auth Provider
• Stripe
  • Stripe Webhooks
  • Stripe Portal Link

UI

• Tailwind CSS
• Shadcn/ui
• Lucide

Other Technologies and Methods

• Custom hooks
• Server Actions
• Protected Routes