ChitChat

Live version Note that it may take a while for it to start working because the app might be dormant

Server repository

Chitchat is a chatting webapp. This client is written using TypeScript, Redux, React, Socket.IO and TailwindCSS.

Install and Run

Clone and install its dependencies:

[email protected]:arturjzapater/chitchat-client.git
cd chitchat-client
npm i

To run the client in development mode, use:

npm start

To buid the project for production, use:

npm run build

Test

This project uses mocha as its testing library.

To run unit tests, use:

npm t

The end-to-end tests are located in the server repository. See the instructions here to run them.

Project Structure

Most of the project's code is in the src folder, which contains the following folders:

• app: contains the application's main component(App) as well as the Header component and the store and reducer logic.
• common: contains the application's utility functions and custom hooks.
• css: contains the application's stylesheet.
• features: contains the application's components organised by feature.
• types: contains type declarations.

The application's index is located at the root of the src folder.

The public folder contains the html template. The config folder contains configuration files for webpack and babel. It also contains the file app.js, which exports an object with the following poperties:

• debounceTiming, which sets the number of milliseconds that the socket connection should wait after sending user typing event before it sends a new one.
• server, which is the url where the server is deployed.

Considerations on the Structure

Following Redux's recommendation, this project has been structured following the "feature folders" approach. All the files necessary to implement a feature are in the same folder. The goal is to have all the files that are closely related to one part of the application together to increase maintainability and readability.

Considerations on Sockets

I created the custom hook useSocket to handle the logic pertaining to the socket connection. The hook returns a reference to the socket itself and the methods necessary to communicate with the server. The goal was to have all the logic pertaining to the socket connection in one place, so that it would be easy to maintain and integrate with new parts of the application if it grows to be more complex.

Screenshots