Skip to content

End to end chat app. React, node, socket.io, material-ui

Notifications You must be signed in to change notification settings

okozolin/chat-app-react-node

Repository files navigation

Chat App - React, Node, MySql

Chat app preview

Created by: Orit Kozolin


App Functional requirenments

Basic functionality

A public chat room where users log in with a nickname and go straight to the chat. They will:

● send messages to the public chat room

● receive new messages in the public chat room while connected

● each user would have an random colored avatar by his message in the chat.

UX/UI

● The design should be responsive and fill the available screen space (i.e. stretched layout not boxed layout).

● Use Material/Bootstrap

Future implementation

● see the last 10 messages (prior to the connection / entering the public chat room)

● Connect to MySql DB

● Deploy to production server

Flow Design

Take a closer look here

Chat app UX flow Chat app socket flow

Tech Stack

  • Client: React + Material UI
  • Server: Express (Node)
  • DB: MySql with ORM (Sequelize)

Getting Started

Development mode

cd server-chat-app
npm run dev

The script above will automaticly run both client and server, using the 'concurrently' package. Alternatively you can run them seperatly by the following scripts:

  • For the Client
npm run client
  • For the Server
npm start