Realtime Chat App with MERN stack (Frontend)

Introduction

This repo consists of the Frontend part of a Realtime Chat Application built with the MERN stack. I built it when I was trying to learn React and the stack for the first time. You can find the backend repo here.

Feature

JWT Authentication
One-on-one Private Chat where users can chat with others privately.
Create a room and start a Room Chat for users who want to broadcast messages to a specific group of users.
Real-time updates to conversation messages, user online/ offline, read/ unread status, user join/leave room to notify, etc.
Support both RWD and different themes with light and dark mode

Technologies

database - MongoDB
backend - Express.js & Node.js
frontend - React.js (with styled-components)
Real-time messages - Socket.io

Deploy

database: MongoDB Atlas
backend: Render
frontend: Netlify

Live Demo

https://sweet-bombolone-176d6a.netlify.app

Testing Account

username: Lenny Connolly
password: 12345678

username: Rachael Holloway
password: 12345678

Screenshots

Chat (Light mode)

Chat (Dark mode)

Chat (Mobile)

Create Room (Light mode)

Create Room (Dark mode)

Create Room (Mobile)

How to use

Clone the repo

git clone https://github.com/tsengm6h6/chat-app-client-v2.git

Enter the directory
```
cd chat-app-client-v2
```
Install dependencies
```
yarn install
```
Change .env.example file
- change file name to .env
- go to https://multiavatar.com to create an account and get your avatar api key
- change the VITE_SERVER_URL to your local server port (ex. http://localhost:5000 for server listening to port 5000)
Run the app
-> Please make sure the server for this app is running before running the client, check here to setup for the server.
```
yarn dev
```
The app will be automatically opened in your web browser and you can try it out.