https://github.com/mian-ali/mern-webchat-app

Real-Time Chat Website with MERN Stack, Socket.io, with Styled Components
https://github.com/mian-ali/mern-webchat-app

chat-app chat-application mern-chatapp nodejs socket-io

Last synced: about 9 hours ago
JSON representation

Real-Time Chat Website with MERN Stack, Socket.io, with Styled Components

• Host: GitHub
• URL: https://github.com/mian-ali/mern-webchat-app
• Owner: mian-ali
• Created: 2023-12-26T17:27:18.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2023-12-26T19:06:06.000Z (11 months ago)
• Last Synced: 2023-12-27T20:45:32.894Z (11 months ago)
• Topics: chat-app, chat-application, mern-chatapp, nodejs, socket-io
• Language: JavaScript
• Homepage: https://web-chat-app-blush.vercel.app/
• Size: 133 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Real-Time Chat webApp with MERN Stack, Socket.io, with Styled Components

### Technologies Used

- MERN stack (MongoDB, Express.js, React.js, and Node.js)

- Socket.io

- Multiavatar API (Avatar Generator API)

- Styled Components (For UI)

### Configuration and Local Setup project

`In the first terminal`

- cd client and create a .env file in the root of your client directory.

- Supply the following credentials

```

VITE_AVATAR_KEY=AVATAR_API_KEY

VITE_SERVER_URL=http://localhost:5000

```

```

$ cd frontend

$ npm install (to install client-side dependencies)

$ npm run dev (to start the client)

```

`In the second terminal`

- cd server and create a .env file in the root of your server directory.

- Supply the following credentials

```

PORT=5000

MONGO_URI=YOUR_MONGO_URI

CLIENT_URL=http://localhost:3000

ACCESS_TOKEN_SECRET=ADD_YOUR_RANDOM_TOKEN

REFRESH_TOKEN_SECERT=ADD_YOUR_RANDOM_TOKEN

COOKIE_SIGNATURE=ADD_YOUR_RANDOM_SIGNATURE

```

```

$ cd backend

$ npm install (to install server-side dependencies)

& npm run dev (to start the server)

```