Skip to content

Prathamm-sahu/Talkative

Repository files navigation


💬 Talkative - Real-time Chatting Application

Talkative is a cutting-edge web application designed for seamless, real-time communication. Built with modern technologies like Next.js, React.js, WebSockets, and Redis, it offers a secure and smooth chatting experience. Whether it's sending friend requests or engaging in one-on-one conversations, Talkative makes it simple and efficient.

🚀 Explore it live at Talkative on Vercel.


Screenshots

  1. Chat Page

  1. Recent Chat Page

Want to more about it then visit - Talkative

🛠 Features

  • Real-time Messaging: Enjoy instant message delivery for smooth, real-time conversations.
  • Friend Management: Send and accept friend requests to build a personalized chat network.
  • One-on-One Private Chats: Converse privately with friends in secure, real-time chat rooms.
  • Google Authentication: Secure and quick authentication with Google via NextAuth.
  • Push Notifications: Stay updated with push notifications for new messages and friend requests.
  • Optimized Performance: Built with WebSockets for real-time communication and Redis as a database for fast, scalable operations.

💻 Tech Stack

Frontend Backend Authentication Real-time Database Libraries
Next.js Next.js API NextAuth WebSockets Redis React Query
React.js TypeScript Google Auth

Additional Technologies:

  • Redis: Used as the primary database and for caching sessions and messages.
  • React Query: Efficient state management for API requests and caching.

🚀 Getting Started

To set up Talkative locally, follow the steps below:

Prerequisites

  • Node.js (v20 or later)
  • Redis: Ensure Redis is installed and running on your machine for real-time data handling.
  • Google OAuth Credentials: Set up Google OAuth in your Google Developer Console and get your clientId and clientSecret.

Installation Steps

  1. Clone the Repository:

    git clone https://github.com/Prathamm-sahu/talkative.git
    cd talkative
  2. Install Dependencies:

    npm install
  3. Set Up Environment Variables:

    • Rename .env.example to .env.

    • Add your Google OAuth credentials and Redis configuration:

      GOOGLE_CLIENT_ID=<your-client-id>
      GOOGLE_CLIENT_SECRET=<your-client-secret>
      NEXTAUTH_SECRET=<your-next-auth-secret>
      REDIS_URL=<your-redis-url>
      
  4. Run the Development Server:

    npm run dev

    Now, open http://localhost:3000 in your browser to explore the app.


🔧 Project Structure

src/components     # UI and Reusable components like chat boxes, friend requests, etc.
src/app          # Pages for login, signup, and chat interface
src/app/api            # API routes for authentication, friend requests, and messages
src/utils          # Helper functions and utilities
/public         # Static assets (icons, images, etc.)
src/styles         # Global CSS and styling for the application

🗃 Database

Talkative uses Redis as the primary database to store session data, manage friend requests, and facilitate real-time message delivery. Redis helps to ensure ultra-low latency and high scalability.


🌐 Google Auth

Google authentication is powered by NextAuth. Users can securely log in using their Google account, which also provides seamless session management and security. To enable Google OAuth in your local environment, you'll need to:

  1. Set up a new project in the Google Developer Console.
  2. Enable the OAuth 2.0 API and create credentials.
  3. Add your clientId and clientSecret to the .env file.

📲 Real-time Chat with WebSockets

For real-time interaction, Talkative uses WebSockets, enabling instant message exchange between users. Once connected, users can send and receive messages instantly without reloading the page.


📄 License

This project is licensed under the MIT License.


🎯 Contributing

We welcome contributions! Feel free to fork the repo and submit pull requests. For major changes, open an issue to discuss improvements or features you'd like to see.

Releases

No releases published

Packages

No packages published