Added MIT License

Added README as basis for EPQ explanation
Added PAPERWORK as basis for Project Proposal Form

5 files changed, 113 insertions, 50 deletions

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..c7fde2d
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Zhongheng Liu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/PAPERWORK.md b/PAPERWORK.md
new file mode 100644
index 0000000..6063d98
--- /dev/null
+++ b/PAPERWORK.md
@@ -0,0 +1,25 @@
+# Paperwork related to EPQ
+## P304 - Project Proposal Form
+### Section 1
+#### Metadata
+Learner Name: Zhongheng Liu
+Centre Name: Byron College?
+Teacher Assessor: Mr Charis Dedousis
+Proposed project title: Designing and implementing an open-source, privacy-oriented Internet Relay Chat (IRC) application with modern programming paradigms.  
+Title or working title of project: ibid.
+#### Project objectives
+I would like to find out how enterprise-level text chatting applications such as WhatsApp and Telegam operate on the code infrastructure level by designing a similar application myself using open-source technologies.  
+I would also like to learn, in the creation of this artifact, how several programming paradigms like object-oriented programming, functional programming, and annotation-based programming interact with each other to achieve best results.  
+I would also like to find out to what extent can unit testing and integration testing coverage contribute to test-driven development (TDD) as a practice in enterprise-level software design.
+#### Role or responsibility in a group project
+Not a group project.
+### Section 2
+#### Reasons for choosing the project
+The development of this IRC chat application directly links to the field of computer science and similarly software engineering, both fields which I have a large interest in and would like to pursue in the future.  
+In the past, I have taken less care than desirable into the security of my software and the usage of test-driven development through unit, integration, and penetration testing. Additionally, I would like to make use of, in the construction of my Java backend API, the principles defined in Erich Gamma et. al.'s book Design Patterns to create clean and maintainable software that can be refactored easily in the future through the construction of sufficient and robust data structures and paradigms. 
+### Section 3 
+#### Activities to be carried out during the project
+|Activities|Duration|
+|-|-|
+|Research into the use of the technologies employed in the project| idk|
+|||
\ No newline at end of file
diff --git a/README.md b/README.md
index b87cb00..25c123f 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,53 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+# 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`.
\ No newline at end of file
diff --git a/src/Chat/Chat.tsx b/src/Chat/Chat.tsx
index 538f308..c2e92ba 100644
--- a/src/Chat/Chat.tsx
+++ b/src/Chat/Chat.tsx
@@ -33,7 +33,7 @@ const ChatWrapper = (
         stompClient.subscribe(endpoints.subscription, (message) => {
             console.log(`Collected new message: ${message.body}`);
             const messageBody = JSON.parse(message.body) as Message
-            if (messageBody.type === MessageType.MESSAGE) {return;}
+            // if (messageBody.type !== MessageType.MESSAGE) {return;}
             const messageElement = <MessageContainer {...messageBody} />
             console.log(messageElement);
 
@@ -46,6 +46,7 @@ const ChatWrapper = (
         });
         stompClient.publish({
             body: JSON.stringify({
+                type: MessageType.HELLO,
                 fromUserId: user,
                 toUserId: "everyone",
                 content: `${user} has joined the server!`,
@@ -74,7 +75,7 @@ const ChatWrapper = (
         if (!entryElement.value) {alert("Message cannot be empty!"); return;}
         const messageData: Message = 
         {
-            type: MessageType.HELLO,
+            type: MessageType.MESSAGE,
             fromUserId: user,
             toUserId: "everyone",
             content: entryElement.value,
diff --git a/src/Chat/MessageContainer.tsx b/src/Chat/MessageContainer.tsx
index dc3d613..dd75fc2 100644
--- a/src/Chat/MessageContainer.tsx
+++ b/src/Chat/MessageContainer.tsx
@@ -9,7 +9,16 @@ export const MessageContainer = (
         content,
         timeMillis,
     }: Message
-): React.ReactElement<{ sender: string; text: string; }> => {
+): React.ReactElement<Message> => {
     const dateTime: Date = new Date(timeMillis);
-    return (<p>[{dateTime.toLocaleString(Intl.DateTimeFormat().resolvedOptions().timeZone)}] Message from {fromUserId}: {content}</p>);
+    /*  FIXED funny error
+    *   DESCRIPTION
+    *   The line below was
+    *   return (<p>[{dateTime.toLocaleString(Intl.DateTimeFormat().resolvedOptions().timeZone)}]...</p>)
+    *   The line incorrectly generated a value of "UTC" as the parameter to toLocaleString()
+    *   While "UTC" is an accepted string value, in EEST, aka. "Europe/Athens" timezone string is not an acceptable parameter.
+    *   This caused the return statement to fail, and the message fails to render, despite it being correctly committed to the db.
+    *   Funny clown moment 🤡
+    */  
+    return (<p>[{dateTime.toLocaleString()}] Message from {fromUserId}: {content}</p>);
 };