Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/utkarshahuja2003/chat
Web Chat App using Next, Node and Socket-io
https://github.com/utkarshahuja2003/chat
chat chat-application nextjs nodejs socket-io typescript
Last synced: about 7 hours ago
JSON representation
Web Chat App using Next, Node and Socket-io
- Host: GitHub
- URL: https://github.com/utkarshahuja2003/chat
- Owner: UtkarshAhuja2003
- License: mit
- Created: 2024-02-13T11:26:29.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-15T09:43:11.000Z (9 months ago)
- Last Synced: 2024-02-15T14:54:25.733Z (9 months ago)
- Topics: chat, chat-application, nextjs, nodejs, socket-io, typescript
- Language: TypeScript
- Homepage: https://chat.ahujautkarsh.me
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chat-App
This is a chat app made using Nextjs,TypeScript, Node and Socket.io
## Features
- User can join Chat Room by entering their name
- Multiple Users can join the chat room and start chatting
- Sender's username and timestamp visible with every messageThis project utilizes ESLint for code quality maintenance. Ensure coding standards by following the recommended formatting guidelines.
## Installation
Clone the repository:
```bash
git clone https://github.com/UtkarshAhuja2003/chat.git
```
Navigate to the project folder:
```bash
cd chat
```### Backend
1. Install dependencies in root folder
```bash
npm install
```
2. Copy sample env to .env
```bash
cp .env.sample .env
```
Change URL and port if changed in frontend
3. Start the server
```bash
npm start
```
4. Check lint errors
```bash
npm run lint
```### Frontend
1. Navigate to client directory
```bash
cd client
```
2. Install dependencies in client
```bash
npm install
```
2. Copy sample env to .env
```bash
cp .env.sample .env
```
3. Start the nextjs app in development
```bash
npm run dev
```
4. Check lint errors
```bash
npm run lint
```**Now your Project is ready to run.**
## File Structure
```bash
.
├──src # backend
├── controllers # route controller
├── routes # Custom routes
├── socket # Socket Initialisation
├── validators
├── utils # Misc tools and stuffs
│ ├── APIError
│ ├── Async Handler
│ └── APIResponse
├── app.js
├── index.js # entry file
└── constant.js
└── client # frontend directory
├── src
│ ├── api
│ ├── app
│ │ ├── chat #page
│ │ └── login #page
│ ├── components
│ │ ├── Connection
│ │ └── Message
│ ├── context
│ ├── interfaces
│ └── utils # Misc tools and stuffs
└── public
```## Screenshots
![image](https://github.com/UtkarshAhuja2003/chat/assets/70762626/53efc0ba-b0b9-409a-802a-d1609311bd93)
![image](https://github.com/UtkarshAhuja2003/chat/assets/70762626/6be188fe-1838-4f1c-a7d3-4e3bea927a9b)
![image](https://github.com/UtkarshAhuja2003/chat/assets/70762626/107167e7-0865-41ff-9db4-f0dce8b3ea94)
![image](https://github.com/UtkarshAhuja2003/chat/assets/70762626/759fbdc8-3197-4554-9305-45a20dceb689)## Demo Video
https://github.com/UtkarshAhuja2003/chat/assets/70762626/14b3816a-a77c-439e-a5a5-4eb04c2842c2