Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README

        


Next Logo          
Node Logo         
Socket-io Logo

# 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 message

This 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