A React app created with Create React App.
- GET request to the backend
- adding a history page accessible through a click on a miner in the miner list on the result of the GET /history?minerId=
- display a list according to the design
- connection to the websocket and live updating of the list
- adding a menu to switch between pages
- adding an asteroid page list based on the result of the GET /asteroids
- adding a button "Create a miner" to be displayed on a miner whenever it got sufficient ressources
- adding a form to create a miner and send the result as a PUSH /miner + Implementation of a form validation
- add a live rendering of the planets, miners and asteroids
make sure you have pnpm installed, and node.js v18.16.0 or higher on your machine.
pnpm install
The prepare
script will automatically run after installation, it uses husky
to add git hooks, the hook scripts are under .husky
directory.
- pre-commit: run lintstaged scripts
- commit-msg: add commit lint
TODO
pnpm run start
pnpm run build
pnpm run test
TODO
- Generally follows the Airbnb JavaScript Style Guide. See: https://juejin.cn/post/6844903620648026120
- Naming conventions prefer camelCase (propertyName).
- Type names use PascalCase (MediaObjectType).
- Prefer using ES6 syntax.
- Use let and const instead of var.
- Avoid using export default.
- Use literal syntax for object creation.
- For exported functions, use function declarations export function fnName() {}, not function expressions export const fnName = () => {}.
- For naming static constants (strings, numbers, RegExp, object literals, etc.), use UPPER_CASED_NAMING.
-
Style naming follows the BEM convention:
- (-) Hyphen: Used only as a hyphen to connect multi-word blocks or elements.
- (__) Double underscore: Used to connect a block and its child elements.
- (_) Single underscore: Used to describe a state of a block or an element within a block.
-
Example:
.block {
}
.block__element {
}
.block--modifier {
}
- Suggested order of properties: Flex properties --> Layout and positioning properties --> Self properties --> Text properties --> Other properties.
- The outermost tag of a component should not have margins by default; margins should be defined by the page/component that includes it.