steven/epq-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added MIT License

Browse source 
Added README as basis for EPQ explanation
Added PAPERWORK as basis for Project Proposal Form
This commit is contained in:
Zhongheng Liu 2024-01-03 18:19:45 +02:00
commit e7a64d07f4
No known key found for this signature in database
5 changed files with 111 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

95
README.md
View file

@ -1,46 +1,53 @@
# Getting Started with Create React App
# 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
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### 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
## 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/).
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`.