Skip to content

Home

Jump to bottom
Albert edited this page May 29, 2024 · 90 revisions

Welcome to the chat-react-semantic wiki!

Abstract

The integration of the AWS backend with the ReactJS frontend with WebSockets forms a cohesive and efficient web application framework.

image

Code iterations

Project Version Commit Code Version Commit
project v0.0 Create Vite React project, add dependencies, layout and CSS
create Vite React project GitHub code v0.0.0 a4ef7
add layout and dependencies GitHub code v0.0.1 8fc147
add semantic css placeholder chat GitHub code v0.0.2 d389c3
project v0.1 Components and SocketProvider.js
ChatSandBox new domain and SocketProvider.js GitHub code v0.1.0 3da95a
SocketProvider.js and tree component chat by component GitHub code v0.1.1 20b2d7
SocketProvider.js and implementation of fake-login with socket actions GitHub code v0.1.2 81be514
SocketProvider.js and implementation of chatInfo with userId GitHub code v0.1.3 32ad18
SocketProvider.js and implementation of coupled conversation with socket actions GitHub code v0.1.4 b688b95
SocketProvider.js and implementation of decoupled conversation & Semantic with socket actions GitHub code v0.1.5 29390c
project v0.2 Fetch, display and select contacts & groups, chatMenu.jsx
Fetch logged in message & create user literal Object on ChatRoom.jsx GitHub code v0.2.0 59ffd
Fetch & display chats on ChatMenu.jsx GitHub code v0.2.1 cb06c
Select chat from chats, selectChat & user on ContactsList.jsx GitHub code v0.2.2 dcaa8
Set chat on sever AWS connections table activeConnectionsPool by login websocket GitHub code v0.2.3 82059
Saving Conversation to Local Storage GitHub code v0.2.4 6f71ae
project v0.3 Create chat in ChatMenu.jsx & CreateChat.jsx
Create chat and add contact placeholders in ChatMenu.jsx GitHub code v0.3.0 03523f
Create chat: <Form /> in CreateChat.jsx GitHub code v0.3.1.1 b243d0
Create chat: <Form /> with CSS in CreateChat.jsx GitHub code v0.3.1.2 d7240
Create chat <Form /> with CSS in CreateChat.jsx GitHub code v0.3.1.3 cd461d
Create chat: Avatar in CreateChat.jsx with S3 AWS (API Rest or SDK) GitHub code v0.3.2 6bc5f
Create chat: reducer CREATE_CHAT operation ChatMenu.jsx with send websocket GitHub code v0.3.3 todo

New features

We are going to use this Lab#RE05-1 as a camp base from where develop new features:

Before this new four features we should populate the DynamoDB with fake contacts and fake conversations.

image

How to execute

First at all, clone:

git clone AlbertProfe/chat

Then, install all dependencies:

npm install

Summary

Note

This project is a React application created using Vite, with dependencies including:

  • Websockets to connect with AWS Server
  • Hooks: useReducer, useState, useContext
  • Semantic CSS

Test

image

AWS

AWS, Amazon Web Services, architecture as a server-side:

WebSockets

Note

WebSockets is a communication protocol that enables real-time, bidirectional communication between a client (usually a web browser) and a server. It provides a persistent connection that allows for efficient data exchange without the need for repeated HTTP requests.

WebSockets are particularly useful for applications that require instant updates, such as real-time chat applications, collaborative editing tools, and live data streaming.

In React, you can leverage the power of WebSockets by using libraries like Socket.IO or the native WebSocket API. These libraries enable you to establish a WebSocket connection, send and receive messages, and handle events for seamless real-time communication in your React applications.

CSS

Semantic UI React

Principles:

  • No animation dependencies
  • Simple declarative component APIs vs brittle HTML markup
  • Complete keyboard support
  • Complete SUI component definition support
  • Completely documented
  • Completely tested
  • Accessible
npm i semantic-ui-react

shadcn UI

image

mongoDB

React- AWS - WebSockets - Semantic

Clone this wiki locally