Skip to content

An525ish/Whisper-wave

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 

Repository files navigation

Whisper Wave

Whisper Wave is a real-time chat application built with the MERN (MongoDB, Express.js, React, Node.js) stack. It offers a seamless and interactive messaging experience with advanced features.

Whisper Wave Demo

Features

  • Real-time messaging using Socket.IO
  • User authentication with JWT
  • Friend request system
  • Emoji reactions
  • File uploads
  • Real-time notifications for new messages and friend requests
  • Responsive design for mobile and desktop

Tech Stack

  • Frontend: React, Redux Toolkit, React Router
  • Backend: Node.js, Express.js
  • Database: MongoDB
  • Real-time Communication: Socket.IO
  • Authentication: JSON Web Tokens, bcrypt
  • File Processing: Jimp, FFmpeg
  • Styling: TailwindCSS

Screenshots

Chat Interface

Chat Interface

Friend Requests

Friend Requests

Notifications

Notifications

Installation Guide

Requirements

Both should be installed and make sure mongodb is running.

Installation

git clone https://github.com/An525ish/Whisper-wave.git
cd Whisper-wave

Set up environment variables: Create a .env file in the server directory and add necessary variables (MongoDB URI, JWT secret, etc.)

Now install the dependencies

cd client
npm install
cd ..
cd server
npm install

We are almost done, Now just start the development server.

For Frontend.

cd client
npm run dev

For Backend.

Open another terminal in folder, Also make sure mongodb is running in background.

cd server
npm run server
Done! Now open localhost:5173 in your browser.