EPQ IRC Chat App Front-end

This project is the client-side companion to the Java 17 WebSockets and MySQL backend.
Copyright 2024-2025 Zhongheng Liu

Purpose

This repository stores code that partially comprises the IRC chat project. This is an A-Level Edexcel Level 3 Extended Project Qualification in the form of an Artifact. Its purpose is to create a convenient self-hosted IRC chat solution, with HTTPS encrypted text transfer and end-to-end SSH asymmetric key-exchange, encrypt-decrypt functions to ensure that the messages uploaded and downloaded are anomynous and untrackable.
It hopes to produce an aesthetically-pleasing and modern-looking interface through the use of a combination of HTML, JavaScript/TypeScript logic, and CSS formatting to create an interactible UI/UX for users of the application to communicate with each other through a server that acts as the message broker between 2 or more parties through the use of the STOMP library and the WebSockets protocol.

Explanation

Project initialisation

The skeleton code of the epq-web project is first generated by the command npx create-react-app <directory> --template typescript, by incorporating TypeScript support into the project, easy access to static type-checking is granted, providing for a more efficient debugging process, since common errors such as type mismatchs will be detected first instead of during the build-and-production cycle. which produced a directory tree structure similar to the following:

<directory root>
├── node_modules
│   ├── ...
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

3 directories, 17 files (ignored node_modules/*)

This part of the EPQ artifact creation process utilized predominantly 3 libraries. It involved ReactJS, TypeScript, @types/* type notation libraries, and most crucially the underlying Node.js application structure.
Of this newly created tree structure, most of the code encapsulated within the generated files are redundant and are immediately purged from the repository. The file /package.json auto-generated by npm documents the libraries that are imported throughout the project, tracking its dependencies. The actual development of the software required 1 more library called StompJS.

Project dependencies

StompJS and WebSockets

STOMP is the name of a protocol that allowed clients to talk to each other using JSON and WebSockets technology. It also provides an interface for WebSocket (aka. an abstraction from the functions provided by the SockJS library).

ReactJS

Lorem ipsum

TypeScript

Lorem ipsum

Node.js

Lorem ipsum

Project development

Initial project infrastructure

Lorem ipsum

License

This project is licensed under the MIT License, found under /LICENSE.