Full Stack Chat Application Lecture Notes

Overview

• Building a full stack chat application using Node.js (backend) and React.js (frontend).
• Best looking chat app for this tech stack.

Application Demo

• Authentication Page: Users input their username to sign up or log in.
• Chat Functionality:
  • Real-time chat support (single and group chats).
  • Mobile and desktop compatibility.
  • Supports image and file sharing.
  • Features like read receipts.
• Scalable for 30,000 to 100,000 users.
• Code available online in the description.

Step 1: Set Up Project

• Create a new project in VS Code:
  • Navigate to desired directory (e.g., Desktop).
  • Create directory: node.js react.js chat and navigate into it.
  • Open in VS Code.

Backend Setup

1. Create a folder named backend for Node.js server.
2. Initialize Node.js project:
   • Run npm init and follow prompts.
3. Install necessary dependencies:
   • npm install express cors axios
   • npm install --save-dev nodemon
4. Modify package.json to include start script:
   • "start": "nodemon index.js"
5. Create index.js file and add boilerplate code:
   • Use Express to run an HTTP server on port 3001.
   • Create a POST endpoint for authentication.

Testing Backend

• Install REST client in VS Code.
• Test endpoint: POST http://localhost:3001/authenticate with JSON payload.
• Establish a basic user authentication flow with a fake user.

Step 2: Integrate Chat Engine

• Register at chatengine.io to create a chat project.
• Obtain project ID and private key for API calls.
• Modify authentication endpoint to interact with Chat Engine:
  • Use axios.put to get or create a user in Chat Engine.
• Handle API responses and errors appropriately.

Step 3: Frontend Setup with React

1. Navigate back to the project root and create React app:
   • npm create vite@latest and name it front end.
   • Install dependencies with npm install.
2. Modify main.js to disable React Strict Mode and remove index.css.
3. Update app.jsx to toggle between authentication and chat pages.
   • Create auth page and chats page components.

Authentication Page Logic

• Implement form to capture username and handle submission.
• Use Axios to call the Node.js server for authentication.

Step 4: Chat UI Implementation

• Install Chat Engine's UI components:
  • Use react-chat-engine-advanced for advanced chat functionalities or react-chat-engine-pretty for a prettier UI.
• Set up the chat logic using provided components:
  • Connect to chat socket and render multi-chat window.
  • Manage state and handle chat events.

Bonus Content

• Demonstration of using React Chat Engine Pretty for a more appealing UI:
  • Adjust components accordingly and retain functionality.

Final Notes

• Options to customize UI and enhance functionality further are available.
• Audience encouraged to leave comments for further questions.
• Chat engine framework is versatile for various back-end technologies.