🚀 Buzzline

A modern real-time chat application built with Next.js, TypeScript, Socket.io, MongoDB, Mongoose, Shadcn UI, Tailwind CSS, and NextAuth.js.

Buzzline enables users to create accounts, choose unique usernames, discover other users, start conversations, exchange messages instantly, and track real-time online presence with live status updates.

🔗 Live Demo

Frontend: https://buzzline-seven.vercel.app

Backend: Railway Deployment

✨ Features

🔐 Authentication & Authorization

Google OAuth Authentication using NextAuth.js
Credentials-Based Signup & Login
JWT-Based Session Management
Protected Routes
Secure Password Hashing with bcrypt

👤 User Onboarding

Unique Username Selection Flow
Username Availability Validation
One-Time Username Setup for Google Users
Persistent User Profiles

🔍 User Search

Search Users by Username
Debounced Search Requests
Instant Search Results

💬 Real-Time Messaging

One-to-One Conversations
Instant Message Delivery using Socket.io
Automatic Conversation Creation
Real-Time Chat Updates
Socket Room-Based Messaging
Persistent Message History

🟢 Presence System

Real-Time Online Status
Last Active Tracking
Live Presence Updates Across Clients
Automatic Online/Offline Detection

🎨 Chat Experience

Latest Message Preview in Sidebar
Automatic Conversation Sorting
Auto Scroll to Latest Messages
Message Timestamps
Responsive Chat Interface
Clean Minimal Design

⚙️ Account Management

Secure Logout Flow
Session Persistence
Protected Chat Access

🌙 UI / UX

AMOLED Dark Theme
Responsive Layout
Mobile Friendly Design
Built with Shadcn UI
Smooth User Experience

🏗️ System Architecture

┌──────────────────────────────────────────────┐
│                Frontend (Next.js)            │
│                                              │
│  • Login / Signup                            │
│  • Google OAuth                              │
│  • Username Selection                        │
│  • User Search                               │
│  • Chat Interface                            │
│  • Presence UI                               │
└───────────────────┬──────────────────────────┘
                    │
                    │ REST API
                    ▼
┌──────────────────────────────────────────────┐
│            Next.js API Routes                │
│                                              │
│  /api/register                               │
│  /api/auth                                   │
│  /api/users                                  │
│  /api/conversations                          │
│  /api/messages                               │
└───────────────────┬──────────────────────────┘
                    │
                    │ Mongoose
                    ▼
┌──────────────────────────────────────────────┐
│               MongoDB Atlas                  │
│                                              │
│  Users                                       │
│  Conversations                               │
│  Messages                                    │
└──────────────────────────────────────────────┘


                    WebSocket
                         │
                         ▼

┌──────────────────────────────────────────────┐
│            Socket.io Server (3001)           │
│                                              │
│  Presence Management                         │
│  Room Management                             │
│  Real-Time Messaging                         │
│                                              │
│  user-connected                              │
│  user-online                                 │
│  user-offline                                │
│  join-conversation                           │
│  send-message                                │
│  receive-message                             │
└───────────────────┬──────────────────────────┘
                    │
                    ▼
           Conversation Rooms
                    │
        ┌───────────┴───────────┐
        ▼                       ▼
     User A                  User B

🔄 Message Flow

User A
  │
  │ Send Message
  ▼
Next.js API Route
  │
  │ Save Message
  ▼
MongoDB Atlas
  │
  │ Return Saved Message
  ▼
Socket.io Server
  │
  │ socket.to(conversationId)
  ▼
Conversation Room
  │
  ▼
User B Receives Message Instantly

🛠️ Tech Stack

Frontend

Next.js
React
TypeScript
Tailwind CSS
Shadcn UI

Backend

Next.js API Routes
Node.js
Socket.io

Database

MongoDB Atlas
Mongoose

Authentication

NextAuth.js
Google OAuth
JWT

📸 Screenshots

Signup

Login

Choose Username

User Search

Chat Interface

Online Status

Last Seen

Logout Confirmation

📂 Project Structure

Buzzline
│
├── src
│   ├── app
│   ├── components
│   ├── lib
│   ├── models
│   ├── schemas
│   └── types
│
├── public
│
├── screenshots
│
├── socket-server
│   ├── server.js
│   └── User.js
│
├── .env.local
│
└── README.md

⚙️ Environment Variables

Create a .env.local file in the root directory:

# MongoDB connection string from MongoDB Atlas
MONGODB_URI=your_mongodb_connection_string

# Random secret string used to sign JWT sessions (use: openssl rand -base64 32)
NEXTAUTH_SECRET=your_nextauth_secret

# Base URL of your app (use http://localhost:3000 for local dev)
NEXTAUTH_URL=http://localhost:3000

# From Google Cloud Console → APIs & Services → Credentials → OAuth 2.0 Client
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# URL where your Socket.io server is running
NEXT_PUBLIC_SOCKET_URL=http://localhost:3001

🚀 Getting Started

Clone Repository

git clone https://github.com/Czar-16/BuzzLine.git

cd BuzzLine

Install Frontend Dependencies

npm install

Install Socket Server Dependencies

cd socket-server

npm install

Run Frontend

npm run dev

Application will be available at:

http://localhost:3000

Run Socket Server

Open another terminal:

cd socket-server

node server.js

Socket server runs at:

http://localhost:3001

📈 Key Highlights

Built a production-style real-time chat platform using Socket.io
Implemented conversation-based WebSocket room architecture
Developed a real-time online presence system with last-active tracking
Integrated Google OAuth and Credentials Authentication
Built username-based user discovery and onboarding flow
Designed normalized MongoDB schemas for Users, Conversations, and Messages
Created a responsive AMOLED dark-themed user interface
Implemented automatic conversation management and message persistence

🌐 Deployment

Frontend

Deploy using:

Vercel

Socket Server

Deploy using:

Railway

Database

MongoDB Atlas

🔗 Live Demo

https://buzzline-seven.vercel.app

👨‍💻 Author

Anoop Jha (Czar16)

GitHub: https://github.com/Czar-16
Twitter/X: https://x.com/itsCzar16

⭐ If you found this project useful, consider giving it a star.

Name		Name	Last commit message	Last commit date
Latest commit History 45 Commits
public		public
socket-server		socket-server
src		src
.example.env		.example.env
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🚀 Buzzline

🔗 Live Demo

✨ Features

🔐 Authentication & Authorization

👤 User Onboarding

🔍 User Search

💬 Real-Time Messaging

🟢 Presence System

🎨 Chat Experience

⚙️ Account Management

🌙 UI / UX

🏗️ System Architecture

🔄 Message Flow

🛠️ Tech Stack

Frontend

Backend

Database

Authentication

📸 Screenshots

Signup

Login

Choose Username

User Search

Chat Interface

Online Status

Last Seen

Logout Confirmation

📂 Project Structure

⚙️ Environment Variables

🚀 Getting Started

Clone Repository

Install Frontend Dependencies

Install Socket Server Dependencies

Run Frontend

Run Socket Server

📈 Key Highlights

🌐 Deployment

Frontend

Socket Server

Database

🔗 Live Demo

👨‍💻 Author

Anoop Jha (Czar16)

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages