An Rome legion organizational chart in react
Each components has parent communication event and each parent has child communication by props values.
The data communication is doing by the boundedContext Organization Chart.
This allow us follow the flux pattern with a unidirectional data flow and have components dummy as posible to reuse in some different boundedContexts.
All Organization Chart state is managed by the react Organization Context API by our own provider and our own hook useOrganization.
This allow us manipulare the state of the Organization Chart in a single centralize place and our hook takes the glue role to do this job in the view.
Take into account that all business chart organization logic is split in some different layer of services, models and context api pieces that we can consume in our application.
We could customize what kinds of titles a level has.
we only need to change the level enum configuration in ./src/organization/levels.model.ts
const Levels = [
[Title.imperatorAugustus],
[Title.proefectusCastrorum, Title.legatus],
[Title.tribunus],
[Title.centurio],
[Title.decurio],
[Title.legionnaire],
];In the project directory, you can run:
Install all dependencies, you need yarn to run this command.
Install yarn whit the official getting started.
Runs the app in the development mode.\
Open 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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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!
- An Image component to allow progressive blur loading and lazy loading.
- Apply lazy loading in our members list view with react suspense.
- Add a member picture field in member model.
- Review css breakpoints, set customVariables to use it and apply when dark mode exist.