/support-chat-app

Primary LanguageTypeScript

Chat-app

Table of Contents

  • General info
  • Setup
  • Results
  • Improvements

General info

A chat-app, which fecthes data from a local db. User can type into the chat-app, which will update the local db and refetch the information, to be displayed. The app uses Next.js and TypeScript.

Setup

This is a Next.js project bootstrapped with create-next-app.

First install dependencies, run the following in the terminal:

yarn install

Second, run the development server:

yarn dev

To start the server (backend) on http://localhost:8000/messages. Run the following:

yarn json-server --watch data/db.json --port 8000

Open http://localhost:3000 with your browser to see the result.

Results

Chat message icon will be displayed in the bottomn right corner.

Closed state

Screenshot 2023-07-30 at 17 41 20

Open state

Screenshot 2023-07-30 at 17 41 11

Improvements

  • More robust test to be written
  • Investigate an issue with Tailwind css rendering
  • Improve scrollToBottom function
  • Timestamps could be added when a message is sent or received
  • Implement message status (sent, delivered, read)
  • Display user presence indicators (e.g., online, offline, typing) to show the status of the other user in the chat.
  • Implement a notification system to alert user of new messages