Git Product home page Git Product logo

rishibakshii / baatchit Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 0.0 626 KB

Baatchit is a modern real-time chat app designed for seamless and secure communication. Enjoy instant messaging, dynamic group chats, file sharing, typing indicators and more with Baatchit's robust feature set. Built with the latest tech, Baatchit ensures a smooth, user-friendly experience. Connect, chat, and share effortlessly with Baatchit!

Home Page: https://baatchit.online

TypeScript 98.40% JavaScript 0.53% HTML 0.88% CSS 0.19%
cloudinary framer-motion mern passport-js react-hook-form react-hot-toast redux-toolkit rtk-query socket-io tailwind

baatchit's Introduction

Baatchit ๐Ÿ—จ๏ธ

Launching Soon ๐Ÿš€

Baatchit is a modern real-time chat application designed to facilitate seamless communication between users. With Baatchit, users can engage in conversations, share files, see when others are typing, and more, all in real-time.

Features โœจ

  • ๐Ÿ”’ OAuth Integration: Sign in easily using social login options like GitHub and Google.
  • ๐Ÿ’ฌ Real-time Messaging: Instantly send and receive messages with other users.
  • ๐Ÿ‘ฅ Group Chats: Create and participate in group chats with multiple users.
  • ๐Ÿค Friends Feature: Connect with other users and engage in private chats or group conversations after adding them as friends.
  • ๐ŸŸข User Presence: See who's online and available for chat in real-time.
  • โŒจ๏ธ Typing Indicators: See when other users are typing to enhance communication flow.
  • โœ”๏ธ Message Seen Status: Know when your messages have been seen by other users.
  • ๐Ÿ“ File Sharing: Share files and documents securely within chats.
  • ๐ŸŽ‰ GIF Sending: Express yourself with animated GIFs using the integrated Tenor GIF library.

Technologies Used ๐Ÿ› ๏ธ

Frontend Technologies Used:

  • โš›๏ธ React: A JavaScript library for building user interfaces.
  • ๐Ÿ”— React Router: Declarative routing for React applications.
  • ๐Ÿ› ๏ธ Redux Toolkit: An opinionated, batteries-included toolset for efficient Redux development.
  • ๐Ÿ”„ Socket.IO Client: Real-time bidirectional event-based communication library for web applications.
  • ๐Ÿ“‘ React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.
  • ๐Ÿ“ Zod: A TypeScript-first schema declaration and validation library.
  • ๐ŸŽฅ Framer Motion: A production-ready motion library for React.
  • ๐ŸŽฌ Lottie React: Render After Effects animations on React-based web apps.
  • ๐Ÿ–ผ๏ธ Gif Picker React: Provides a simple and easy-to-use UI for selecting GIFs.
  • ๐Ÿ”” React Hot Toast: Toast notifications for React applications.

Backend Technologies Used:

  • ๐ŸŸข Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
  • ๐ŸŒ Express: Fast, unopinionated, minimalist web framework for Node.js.
  • ๐Ÿ”„ Socket.IO: Real-time bidirectional event-based communication library for Node.js.
  • ๐Ÿ“‚ MongoDB (with Mongoose): A NoSQL database for storing application data.
  • ๐Ÿ”’ Bcryptjs: Library for hashing passwords.
  • โ˜๏ธ Cloudinary: Cloud-based image and video management service.
  • ๐Ÿ”“ Cors: Middleware for handling Cross-Origin Resource Sharing (CORS).
  • ๐Ÿ”ง Dotenv: Module to load environment variables from a .env file.
  • ๐Ÿ›ก๏ธ Helmet: Middleware to secure Express apps by setting various HTTP headers.
  • ๐Ÿ” Jsonwebtoken: Library to create and verify JSON Web Tokens (JWTs).
  • ๐Ÿ“ˆ Morgan: HTTP request logger middleware for Node.js.
  • ๐Ÿ“ค Multer: Middleware for handling multipart/form-data, primarily used for file uploads.
  • ๐Ÿ“ง Nodemailer: Module for sending emails from Node.js applications.
  • ๐Ÿ”‘ Passport: Authentication middleware for Node.js.
  • ๐Ÿ™ Passport-Github2: Passport strategy for authenticating with GitHub using OAuth 2.0.
  • ๐Ÿ” Passport-Google-Oauth20: Passport strategy for authenticating with Google using OAuth 2.0.
  • ๐Ÿ”ข UUID: Library for generating universally unique identifiers (UUIDs).

Getting Started ๐Ÿš€

To get started with Baatchit, follow these steps:

  1. Clone the repository: git clone https://github.com/RishiBakshii/Baatchit
  2. Navigate to the project directory: cd Baatchit
  3. Install dependencies: npm install
  4. Start the development server: npm run dev
  5. Visit http://localhost:5173 in your browser to access the application.

Setting Up Environment Variables ๐ŸŒ

Backend

Before running the backend server, you need to set up the following environment variables. Create a .env file in the root directory of the backend folder and add the following variables:

NODE_ENV=DEVELOPMENT
PORT=8000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
JWT_TOKEN_EXPIRATION_DAYS=1
EMAIL=your_email_address
PASSWORD=your_email_password
OTP_EXPIRATION_MINUTES=5
PASSWORD_RESET_TOKEN_EXPIRATION_MINUTES=5
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Make sure to replace placeholder values with your actual credentials and secrets.

Frontend

For the frontend application, you need to set up the following environment variable. Create a .env file in the root directory of the frontend folder and add the following variable:

VITE_ENV=DEVELOPMENT
VITE_TENOR_API_KEY=your_tenor_api_key

Replace the VITE_TENOR_API_KEY value with your Tenor API key.

By setting up these environment variables, you ensure that your backend and frontend applications have access to the required configurations for seamless operation.

Contributing ๐Ÿค

Contributions are welcome! If you'd like to contribute to Baatchit, please follow these steps:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature-name
  3. Make your changes and commit them: git commit -am 'Add new feature'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request.

Contact ๐Ÿ“ง

For any inquiries or feedback, please contact me at [email protected].

baatchit's People

Contributors

rishibakshii avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.