From f12e151fb545ddbc2294194ca75bf2ce9b94a25e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0lyas=20Keskin?=
<86023697+IlyasKeskinn@users.noreply.github.com>
Date: Mon, 9 Sep 2024 22:33:03 +0300
Subject: [PATCH] Update README.md
---
README.md | 142 +++++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 119 insertions(+), 23 deletions(-)
diff --git a/README.md b/README.md
index 0dc9ea2..874fca0 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,132 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Buzzys - Dive into the Hive of Lively Chats and Make New Connections!
-## Getting Started
+**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.
-First, run the development server:
+
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+---
+[Watch the demo on YouTube](https://youtube.com/link-to-your-video)
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+Screenshots are at the bottom of the readme.
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Features
-## Learn More
+### 1. Profile Section
+- View and edit profile picture, username, and bio.
+- See blocked users and manage the block list by unblocking users if desired.
-To learn more about Next.js, take a look at the following resources:
+### 2. Chat List
+- Displays a list of users the current user has previously messaged.
+- Search and filter through conversations for easy access.
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### 3. Contacts Section
+- View all registered users in the application.
+- Search functionality to filter users by name or other criteria.
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+### 4. Settings
+- Enable or disable notification sounds for incoming messages.
+- Switch between different themes (e.g., dark/light mode).
+- Log out of the application.
+
+### 5. Real-Time Messaging
+- 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.
+-
+
+### 6. Media Support
+- 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.
+
+### 7. Message Search and Status
+- Search through conversations for specific messages.
+- Messages are tracked with status indicators: `sent`, `delivered`, and `read`.
+
+---
+
+## Tech Stack
+
+- **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
+
+---
+
+## Installation
+
+1. Clone the repository:
+ ```bash
+ git clone https://github.com/your-username/buzz-chat.git
+
+ cd buzz-chat
+ ```
+2. Install dependencies:
+
+ ```
+ npm install
+ ```
+3. 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
+ ```
+4. Run the development server:
+ ```
+ npm run dev
+ ```
+
+# ScreenShots
+
+
+
+
+
+## Light Mode Mobile
+
+
+
+
+
+
+
+
+
+## Light Mode Desktop
+
+
+
+
+
+
+
+## Dark Mode Desktop
+
+
+
+
+
-## Deploy on Vercel
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.