alessaloisio / websocket-chat

Create a online chat with websocket and react

websocket-chat

Create an online chat with websocket and react

Prerequisite

• Knowledge of Javascript/React.Js & MongoDb
• Node.Js & npm/yarn on your computer

Tree structure

The project is separated in two parts :

• ROOT DIRECTORY

  • src/

    • server.js => is the entrypoint of the project (server)

  • client/

    • public/ => directory where you paste your assets
    • src/
      • index.js => is the entrypoint for the Front-End (react.js)
      • App.js => the main component of your application

Installation

1. First thing you have to do, is to clone this repo
2. You have to install dependencies for the two parts, so 'npm install' on ROOT DIRECTORY AND on client
3. You are now ready to start hacking !

(For the auto build in development mode, you have just to tap this command already twice : 'npm run wacth')

Step-by-step

1. Create the user interface

1.1 Create React Containers and Components for the chat app

2. Create the Node.js Server

2.1 Features and Interactions we want for this online chat

2.2 Visualize the minimal database

2.3 Pseudo Code for the Server instructions

2.4 Create your database access on MongoDB Atlas

2.5 Regiter a new application at Github

Cheatsheet / Documents

• Emit Socket.io
• Rooms/Namespaces
• Avatar Faker
• Picsum