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

- HomePage + Home Page

- Services

-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 Messages -

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

Group -

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 Group -

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?