Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/codersuresh/real-time-chat

Real time chat app using socket.io
https://github.com/codersuresh/real-time-chat

cors express nextjs socket-io tailwindcss vercel websocket

Last synced: about 1 month ago
JSON representation

Real time chat app using socket.io

Awesome Lists containing this project

README

        

# Real Time Chat Application

This is a simple real time chat application built using Next.js, Tailwindcss, Express, and Socket.io. Frontend is deployed on Vercel and backend is deployed on Render.com.

## Demo

You can test it out here:
[https://chat-codersuresh.vercel.app/](https://chat-codersuresh.vercel.app/)

## Table of Contents

- [Purpose](#purpose)
- [Screenshots](#screenshots)
- [Features](#features)
- [Links](#links)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)

## Purpose

The purpose of this project was to learn how to use Socket.io to build a real time chat application.

## Screenshots

![Real time chat web app](/public/screenshot.png)

## Features

- Auto scroll to bottom when new message is received
- Enter username to join chat
- Real time chat with other users
- See who has joined the chat

## Links

- [Live Site](https://chat-codersuresh.vercel.app/)
- [Source Code](https://github.com/codersuresh/real-time-chat)

## What I Learned

- To use Socket.io to build a real time chat application
- How to use Socket.io with Next.js and Express
- How to deploy Next.js frontend on Vercel and Express backend on Render.com

## Continued Development

Eventhough the sole purpose of this project was to learn how to use Socket.io, I plan to continue to work on this project. Some of the features I plan to add are:

- Show who is online
- Show who left the chat
- Add ability to send images
- Add real time typing indicator
- Add ability to create multiple chat rooms
- Add ability to send private messages