Buzzys is a dynamic web messaging application similar to WhatsApp, allowing users to connect and chat without needing phone numbers. Users can log in using their Google accounts and easily find and message other users through the Contacts section. The application supports real-time messaging with Socket.io, as well as features like blocking users, sending media, and message search functionality.
Screenshots are at the bottom of the readme.
- View and edit profile picture, username, and bio.
- See blocked users and manage the block list by unblocking users if desired.
- Displays a list of users the current user has previously messaged.
- Search and filter through conversations for easy access.
- View all registered users in the application.
- Search functionality to filter users by name or other criteria.
- Enable or disable notification sounds for incoming messages.
- Switch between different themes (e.g., dark/light mode).
- Log out of the application.
- Messages are sent in real-time using Socket.io.
- Users can see the online/offline status of others and whether they are currently in a chat.
-
-
-
- Blocked users cannot send or receive messages to/from the user who blocked them.
- Users can send text, audio messages, and images.
- Photos can be selected from the gallery or taken directly within the app.
- Audio messages can be played at 1x, 1.5x, or 2x speed.
- Search through conversations for specific messages.
- Messages are tracked with status indicators:
sent,delivered, andread.
- Next.js: Frontend framework
- MongoDB: Database to store user and message information
- Firebase: Used for storing images and audio files
- Socket.io: Enables real-time communication between users
- Recoil: State management for a seamless user experience
- TailwindCSS: Responsive and customizable styling
- Radix UI: UI component library for accessible and customizable interfaces
- React Hook Form: Form handling and validation
- WaveSurfer.js: Audio waveform visualization for voice messages
- Zod: Schema validation for API requests and responses
- Clone the repository:
git clone https://github.com/your-username/buzz-chat.git cd buzz-chat - Install dependencies:
npm install
- Set up environment variables: Create a .env file in the root directory and add the following:
MONGODB_URI=YOUR_MONGODB_URI
NEXT_PUBLIC_HOSTNAME=hostname
NEXT_PUBLIC_SECRET_KEY=yourjswebtoken
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id
- Run the development server:
npm run dev
