Skip to content

Resolved inconsistent formatting on README.md file #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Resolved inconsistent formatting on README.md file #197

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d367c7
Markdown Syntax edited
Zoha-Waheed May 26, 2024
0f62315
Formatted all inconsistencies
Zoha-Waheed May 26, 2024
157c832
Reduncy in "Quick setup" edited
Zoha-Waheed May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 44 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<a id="about"> </a>
<a id="about"></a>

# ChatBox-Web App🌟

Expand All @@ -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)
Expand All @@ -34,22 +34,21 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation
- [Links](#links)
- [Contact](#contact)

<a id="features"> </a>
<a id="features"></a>

## Features and Interfaces

1. Home Page <a id="home"> </a>
1. Home Page <a id="home"></a>

- [Landing Page](https://chat-box-samarthkadam.vercel.app/) which lists all the features of the app
<br/><br/>

<img width="1835" alt="HomePage" src="./backend/public/screenshots/Home.png">
<img width="1835" alt="Home Page" src="./backend/public/screenshots/Home.png">
<br/><br/>
<img width="1835" alt="Services" src="./backend/public/screenshots/Home2.png"

<img width="1835" alt="Services" src="./backend/public/screenshots/Home2.png">
<br/><br/>

2. Login/Signup Page (Authentication) <a id="auth"> </a>
2. Login/Signup <a id="auth"> </a>

- Fast and secure authentication
- JWT tokens used to persist the authentication state
Expand All @@ -59,7 +58,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation

<br/><br/>

3. Chats <a id="chats"> </a>
3. Chats <a id="chats"></a>

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

Expand All @@ -69,7 +68,7 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation

<br/><br/>

4. Messages <a id="messages"> </a>
4. Messages <a id="messages"></a>

- Effortless Chatting: Easily communicate with others through Socket.IO's seamless functionality.

Expand All @@ -79,23 +78,24 @@ Welcome to Chatbox, your go-to platform for effortless and engaging conversation

<img width="1835" alt="Messages" src="./backend/public/screenshots/Messages.png">

<br/><br/> 5. Groups <a id="group"> </a>
<br/><br/>
5. Groups <a id="group"></a>

- Group Creation: Effortlessly create group chats with the people you need.

- Admin Control: Admin privileges allow for group updates, including changing the group's name or managing user additions and deletions.
<br/><br/>
<img width="1835" alt="Group" src="./backend/public/screenshots/Group.png">

<br/><br/> 6. Search <a id="search"> </a>
<br/><br/> 6. Search <a id="search"></a>

- Robust Search Functionality: Powerful search feature to easily find people within the application.

- Selection Capability: Select individuals from the search results to initiate conversations seamlessly.

<img width="1835" alt="Group" src="./backend/public/screenshots/Search.png">

<br/><br/> 7. Settings <a id="settings"> </a>
<br/><br/> 7. Settings <a id="settings"></a>

- Credential Updates: Easily modify your credentials such as email, name like information.

Expand All @@ -112,7 +112,7 @@ The illustration above showcases a conversation between two separate tabs opened

## Tech stack

<a id="frontend"> </a>
<a id="frontend"></a>

#### Frontend

Expand All @@ -122,15 +122,15 @@ The illustration above showcases a conversation between two separate tabs opened
- MaterialUI
- TailWindCSS

<a id="backend"> </a>
<a id="backend"></a>

#### Backend

- Nodejs
- Express
- MongoDB

<a id="other"> </a>
<a id="other"></a>

#### Other Tools

Expand All @@ -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.
Expand All @@ -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

Expand All @@ -194,13 +214,13 @@ REACT_APP_SOCKET_URL=https://chatbox-api-bj21.onrender.com



<a id="links"> </a>
<a id="links"></a>

## Useful Links

- [Project Demo](https://chat-box-samarthkadam.vercel.app/)

<a id="contact"> </a>
<a id="contact"></a>

## Need help?

Expand Down