Welcome to our SaaS chat app developed using Next.js and TypeScript, bringing global communication to the next level with real-time translation powered by Google Cloud Artificial Intelligence services. The app operates on a tiered subscription model, providing both free and pro plans tailored to users' needs. Stripe integration is employed for seamless subscription handling.

There are over 7,000 languages spoken today but despite the diversity of languages, communication barriers continue to limit our ability to connect and understand each other.This is especially true in a globalized world where people are constantly travelling and connecting with others from different parts of the world.In fact, language barriers are often cited as a major hindrance to international trade and diplomacy.

Problems like this gave birth to GLOCAL - A TRANSLATION and also a CHAT app.

Glocal is a translation and chat app that helps you translate your native language into any other language in the world with relative ease.It also helps to communicate with anyone, anywhere in the world with a different language. When you receive a message in any language, it automatically translates to your chosen language. Similarly, when you send a message in any language to another person, it is converted to their preferred language. This two-way translation not only ensures seamless conversation but also eliminates the need for a common medium language.

• Next.js - The React framework for building web applications.
• React.js - A JavaScript library for building user interfaces.
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
• Framer Motion - A library for creating smooth animations in React applications.
• Google Cloud Platform - A suite of cloud computing services provided by Google.
• Artificial Intelligence - Google Cloud AI for language translation
• Firebase & Firestore - Firebase is a mobile and web application development platform. Firestore is a NoSQL cloud database.
• Stripe - A platform for online payment processing.
• Zustand - A small, fast, and scalable state management library for React.

Upon registering or logging in, users are assigned unique identifiers by Firebase Authentication, ensuring secure access to their account information. This user data, encompassing details like display names and profile pictures, is stored in Firebase Realtime Database or Firestore, maintaining a personalized experience for each user. The app offers flexibility with a choice between a free plan and a paid plan. The free plan, while providing access to essential features, may impose constraints on factors like message limits or storage capacity. Firebase's pricing plans, tailored to usage, enable users to seamlessly transition to a paid plan for enhanced scalability and access to additional functionalities. This strategic approach to user plans not only allows users to tailor their experience based on their needs but also provides a scalable infrastructure, making the chat app adaptable to varying usage patterns. The seamless integration of Firebase services facilitates a smooth user journey while ensuring the app's sustainability and growth.

Test Card Number: 4242 4242 4242 4242
Expiry Date: Any future date
CVC: Any 3-digit number

Note: Please note that this is a test card number provided by Stripe for testing purposes. It will simulate a successful payment. In the current development phase, our Stripe integration is in test mode. In this mode, Stripe accepts payments for addresses outside India for testing purposes. You can use the below given test address or any other address outside India

Test Address: Country: Switzerland
PinCode: 8010
City: Zurich

Set the env variables

GOOGLE_CLIENT_ID=

GOOGLE_CLIENT_SECRET=

NEXTAUTH_SECRET=

FIREBASE_PROJECT_ID=

FIREBASE_CLIENT_EMAIL=

STRIPE_SECRET_KEY=

STRIPE_PRICE_KEY=

STRIPE_WEBHOOK_SECRET=

NEXTAUTH_URL=http://localhost:3000

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!