• Introduction
• Features
• Screenshots
• Technologies Used
• Getting Started
  • Prerequisites
  • Frontend Setup
  • Backend Setup
  • Running the App
• Firebase Setup
• Clerk Authentication Setup
• ngrok Setup
• Contributing
• License
• Footer

Chat-Cat is a real-time chat application built with React and Firebase. The application supports user authentication via Clerk and enables real-time messaging between users. The backend is powered by Firebase, which handles data storage, user authentication, and real-time updates.

• User authentication with Clerk
• Real-time messaging with Firebase
• Search for users
• Add and remove users from the chat list
• Responsive design

• React
• Firebase (Firestore)
• Clerk (Authentication)
• CSS
• React Icons

• Node.js and npm installed
• Firebase account and project setup
• Clerk account
• ngrok account

import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; const firebaseConfig = { apiKey: import.meta.env.VITE_API_KEY, authDomain: "chat.firebaseapp.com", projectId: "chatcat-id", storageBucket: "chat.appspot.com", messagingSenderId: "98491654651", appId: "2:98491654651:web:9c5c460f8582ff5fa1c752", }; // Initialize Firebase const app = initializeApp(firebaseConfig); export const auth = getAuth(); export const db = getFirestore(); export const storage = getStorage();

const admin = require("firebase-admin"); admin.initializeApp({ credential: admin.credential.cert( require(process.env.GOOGLE_APPLICATION_CREDENTIALS) ), }); const db = admin.firestore();

1. Create an account on Clerk.
2. Create a local environment file and add your Firebase and Clerk API keys:

   VITE_CLERK_PUBLISHABLE_KEY=CLERK_API_KEY_HERE VITE_API_KEY=FIREBASE_API_KEY_HERE

3. Go to the Clerk dashboard, navigate to webhooks, and create an endpoint with the ngrok URL.

1. Visit ngrok.
2. Install ngrok according to your operating system and open it.
3. Run the following script:

   ngrok http --domain=yak-included-currently.ngrok-free PORT

1. Clone the repository:

   git clone https://github.com/AdityaKumar41/Chat-Cat.git cd Chat-Cat

2. Install dependencies:

   npm install

1. Install backend dependencies:

   cd ./backend npm install

1. Start the frontend server:

   npm run dev

2. Start the backend server:

   cd ./backend npm start

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License. See the LICENSE file for details.

For more information, you can follow me on Twitter.

© 2024 Chat-Cat. All rights reserved.