diff --git a/README.md b/README.md
index b8eebdf..52fbefa 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-
+
# ChatBox-Web App🌟
@@ -17,7 +17,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
- [Features and Interfaces](#features)
- [Home](#home)
- - [Login and Authentication](#auth)
+ - [Login/Signup](#auth)
- [Chats](#chats)
- [Messages](#messages)
- [Groups](#group)
@@ -34,22 +34,21 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
- [Links](#links)
- [Contact](#contact)
-
+
## Features and Interfaces
-1. Home Page
+1. Home Page
- [Landing Page](https://chat-box-samarthkadam.vercel.app/) which lists all the features of the app
-
+
-
-2. Login/Signup Page (Authentication)
+2. Login/Signup
- Fast and secure authentication
- JWT tokens used to persist the authentication state
@@ -59,7 +58,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
-3. Chats
+3. Chats
- Conversation History: View a comprehensive list of all your past chats, including details about whom you've chatted with and the timestamps of each conversation.
@@ -69,7 +68,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
-4. Messages
+4. Messages
- Effortless Chatting: Easily communicate with others through Socket.IO's seamless functionality.
@@ -79,7 +78,8 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
-
5. Groups
+
+5. Groups
- Group Creation: Effortlessly create group chats with the people you need.
@@ -87,7 +87,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
-
6. Search
+
6. Search
- Robust Search Functionality: Powerful search feature to easily find people within the application.
@@ -95,7 +95,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
-
7. Settings
+
7. Settings
- Credential Updates: Easily modify your credentials such as email, name like information.
@@ -112,7 +112,7 @@ The illustration above showcases a conversation between two separate tabs opened
## Tech stack
-
+
#### Frontend
@@ -122,7 +122,7 @@ The illustration above showcases a conversation between two separate tabs opened
- MaterialUI
- TailWindCSS
-
+
#### Backend
@@ -130,7 +130,7 @@ The illustration above showcases a conversation between two separate tabs opened
- Express
- MongoDB
-
+
#### Other Tools
@@ -143,21 +143,33 @@ The illustration above showcases a conversation between two separate tabs opened
1. Clone the project:
- - Firstly, clone the project using the command: https://github.com/SamarthKadam/ChatBox
+ - Firstly, clone the project using the command:
+ ```bash
+ git clone https://github.com/SamarthKadam/ChatBox.git
+ ```
2. Install Packages:
- - Install the required packages by navigating to the backend directory: cd backend and then run npm install.
- - Similarly, move to the frontend directory: cd frontend and execute npm install.
+ - Install the required packages by navigating to the backend directory: `cd backend` and then run `npm install`.
+ ```
+ cd backend
+ npm start
+ ```
+ - Similarly, move to the frontend directory: `cd frontend` and execute `npm install`.
+ ```
+ cd frontend
+ npm start
+ ```
3. To set up the frontend
- Create a `.env` file in the frontend directory.
- Add the following values to the `.env` file:
+ ```
REACT_APP_API_URL=http://127.0.0.1:4000
REACT_APP_SOCKET_URL=http://127.0.0.1:4000
-
+ ```
4. For configuring the backend:
- Establish your applications connection with MongoDB using following environment variables as key with your own values.
@@ -176,11 +188,19 @@ The illustration above showcases a conversation between two separate tabs opened
5. Start Backend Server:
- - Start the backend server using the command: cd backend and then npm start.
+ - Start the backend server using the command: `cd backend` and then `npm start`.
+ ```
+ cd backend
+ npm start
+ ```
6. Start Frontend:
- - Finally, initiate the frontend with the command: cd frontend and then npm start.
+ - Finally, initiate the frontend with the command: `cd frontend` and then `npm start`.
+ ```
+ cd frontend
+ npm start
+ ```
7. Open `http://localhost:3000` with your browser to see the app
@@ -194,13 +214,13 @@ REACT_APP_SOCKET_URL=https://chatbox-api-bj21.onrender.com
-
+
## Useful Links
- [Project Demo](https://chat-box-samarthkadam.vercel.app/)
-
+
## Need help?