The "chat-room-history" is a .NET Core + React solution for displaying the log history of a chat room.
Published version: https://nice-dune-0aebbed10.2.azurestaticapps.net
Open the root folder on a terminal and install the packages via NPM with the following command:
npm install
This will install the Azure Static Web App CLI in the root folder, necessary for running both the API and the React client together, as well as all the necessary packages for the web client project.
To run the API and the client locally together, execute the following Azure Static Web App CLI command in the root folder:
swa start
Wait for the terminal to notify that the Azure Static Web Apps emulator is started.
You can then access the project at:
If you only want to access the web client, you can do it by opening:
If you only want to access the API, you can do it by opening:
Note:
It may be that your local machine throws an error when executing the swa start command regarding a digital signature. You can solve this by running the following command first:
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
The solution has three .NET projects, one React project and a .github/workflows folder, which contains the pipeline for continous integration.
The API is an Azure Functions project. It has a data/chatEntry.json file, which is the file used as a data source for the whole application. This file is included in the project's assembly as an embedded resource and it's preloaded when the project starts (at Startup.cs). The preloaded data is injected as a dependency to the solution so the data access can access it without the need of explicitly receiving it from the API.
This project exposes functions that can be called by HTTP requests (made by the web client). These functions calls the data access methods to process the preloaded data source and returns the processed data to the request caller.
A React app for displaying the chat events. It makes HTTP requests to the API and displays it accordingly.
The user is able to switch the granularity of the data. For example, if the granularity "minute by minute" is selected, the data shown looks like this:
- 5pm: Bob enters the room
- 5:05pm: Kate enters the room
- 5:15pm: Bob comments: "Hey, Kate"
- 6pm: Kate comments: "Hey, Bob"
If the granularity is "hourly", the data is agreggated accordingly and is shown like this:
- 5pm:
- 2 people entered the room
- 1 comment
- 6pm:
- 1 comment
The DataAccess is a basic .NET class library project responsible for executing logic in a given data source, returning it in the correct order, agreggation or any other processing required.
There are four types of messages:
- User entered the chat room (enter-the-room);
- User commented something (comment);
- User high fived another user in the same room (high-five-another-user);
- User left the chat room (leave-the-room).