lineCode / chat-frontend

A web-based messaging application that delivers messages instantaneously. Built with React, Socket.io, Node.js, and MongoDB.

Realtime Chat App

A web-based messaging application that delivers messages instantaneously.

View Demo »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Implementation Pipeline
5. Contact

About The Project

Built With

• React
• Socket.io
• Typescript
• Node.js
• MongoDB

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Install latest version of npm

• npm

  npm install npm@latest -g

Installation

1. Clone the project

   git clone https://github.com/rosebilag/chat-frontend.git

2. Go to project directory and Install NPM packages

   npm install

3. Create .env file with the ff. content

   REACT_APP_SERVER_URL=https://rose-chat-backend.herokuapp.com

4. Start the application

   npm start

Usage

Creating an Account

1. In the login page, click 'Register here'.
2. Input the necessary fields. Don't worry. It won't take long.
3. You'll be redirected to the login page. Enter your newly created credentials.

Creating a Room

1. Click the message icon on the sidebar header.
2. Input the necessary fields and proceed.
3. Share the randomly-generated room code with people you want to invite in the room.

Joining a Room

1. Obtain the room code from the room creator.
2. Click the message icon on the sidebar header.
3. Click 'Join Room' tab option.
4. Input room code and proceed.

Implementation Pipeline

1. Upload Group Image
2. "User is typing" indicator
3. Emoticons

Contact

Rose Bilag - LinkedIn - [e-mail]

Project Link: https://github.com/rosebilag/chat-frontend