React Starter
Starter project for React built using Typescript, MobX, Ant Design, and FuseBox.
This project uses a custom MobX router implemented from this great example hacker-routing-mobx-router5
Running the project
npm install
npm build
to compile the source code into the build dir, i.e. to create a production build.npm start
to run the application in dev mode.npm run prettier
to prettify the code.
Docker
This project includes a multi-stage Dockerfile, to build an image you can execute: docker build . --tag react-kraken-client:1.0
Captcha
Captcha codes have been integrated using Reaptcha. Register for v2 reCaptcha codes here, then change the site keys in the .env
files accordingly.
REACT_APP_RECAPTCHA_SITE_KEY=<YOUR-SITE-KEY>
REACT_APP_RECAPTCHA_INVISIBLE_SITE_KEY=<YOUR-INVISIBLE-SITE-KEY>
Themes and generated output
This project uses a Git Kraken
theme, feel free to swop it out with your flavour!
The styles are applied at build time, any changes that are made to your theme will automatically be applied during development via HMR (Hot Module Reloading). Additionally a JSON file containing the palette is generated from the less file -> src/utils/raw/palette.json
, the JSON file is used to read any less variables from our typescript classes, see src/utils/PaletteUtils
.
API
If you need an API for this frontend, it has been integrated with this project: node.api.gateway
Directory structure
The src
directory layout can be seen below:
src
├── assets
│ └── images
│ ├── png
│ └── theme
├── components
│ ├── boundary
│ │ ├── DashboardErrorBoundary
│ │ └── ErrorBoundary
│ ├── functional
│ │ ├── HtmlHead
│ │ └── RouterLink
│ ├── icon
│ │ ├── AntDesign
│ │ ├── Hamburger
│ │ ├── Logo
│ │ ├── Plus
│ │ └── ReactOfficial
│ ├── structural
│ │ ├── DashboardPage
│ │ ├── Footer
│ │ ├── Head
│ │ ├── Header
│ │ ├── Loader
│ │ ├── Nav
│ │ ├── Page
│ │ └── SiteNav
│ └── ui
│ ├── ContactUsForm
│ ├── EarlyAccessButton
│ ├── NumberCard
│ ├── Palette
│ ├── Recaptcha
│ └── RoundButton
├── containers
│ ├── App
│ └── DashboardLayout
├── enums
├── logger
├── models
├── pages
│ ├── Dashboard
│ │ ├── Calendar
│ │ ├── Overview
│ │ └── Theme
│ ├── Landing
│ ├── Login
│ └── SignUp
├── router
├── store
│ └── api
├── theme
│ └── styles
│ ├── ant
│ └── kraken
├── types
└── utils
└── raw -- Generated
Dependencies used:
The dependency list below is not exhaustive, it is simply used to highlight the major dependencies of this web app.
Runtime
Build time
Contribution guidelines
- Code reviews are done via pull requests