React app powering the Kegbot dashboard.
🚧 Current status: Experimental. Hackers welcome! 🚧
This is a TypeScript + ReactJS app, using Parcel to compile and bundle assets.
The long term goal is for it to replace the old and unmaintained dashboard that is built into kegbot-server. A shorter-term goal is make it more fun and easier for frontend developers to contribute to that frontend!
Currently, the frontend only runs from a developer environment. It will eventually be bundled into kegbot-server when it is ready.
Install the various javascript dependencies:
yarn install
Run this command while hacking on the frontend:
yarn start
This command will:
- Activate
parceland start watching source - Launch a hot-reloading devserver on
http://localhost:1234 - Run a proxy to
http://localhost:8008/for accessing thekegbot-server(backend)
We use pre-commit to automatically run prettier and similar tools on commit.
Install it upon first checkout:
pre-commit install
If you update this readme, run this command
yarn toc
Code is organized as follows:
App.tsx: The main application entry point. All routes are defined here.view/: React components corresponding to main pages of the application, such as<HomeView />.component/: Other reusable React components, such as the<TopNav />navbar.lib/: Everything else, like the TypeScript client for thekegbot-serverAPI.
A hierarchy of React ContextProviders is installed in App, which performs various setup functions and provides global-like utilities to other components:
ApiProvider: Provides an instance ofApiClientto any component needing one.CurrentUserProvider: Provides the current logged-in user, ornull, as well aslogin()andlogout()methods.SystemStatusProvider: Provides summarized status of the backend system, and forces the user to log in if the site is in private move.
Component file names use CamelCase, and should be consistent with the symbol names they export.
File an issue to discuss, open a PR, or pop into the Kegbot Slack and say hello.