Dashboard is a hand-rolled content management system built with ReactJS. It allows for convenient client editing of all major components of the website: in this case, a blog, an interactive Visual Thesaurus (D3.js force graph of field-specific terms), a page of embedded videos, a page of external resources, and a carousel of quotes embedded in the website sidebar.
Views and calls to the api hook are managed by the resourceReducer, and flow of state is managed by the useDataStore hook, which returns a dataObject corresponding to the current view. Under the hood, useDataStore calls either useGenericStore (for overviews of a given resource) or useSpecificStore (for a specific entry of a resource). The useData hook provides a uniform set of methods to act on the dataObjects, regardless of their identity as specificStore or genericStore objects.
The server-side API is secured with JWT tokens. Given security concerns over storing JWT tokens in cookies or local storage and the amount of control a logged in user has over the database, JWT tokens are only stored in application state.
For convenience, in addition to the standard npm run build the application includes a npm run move command, which builds the production files and moves them into the backend Flask application, assuming that both applications are in the same parent folder. The index html page is renamed dashboard.html and is moved into the templates directory, while the .js files are moved into the static/dashboard/ directory.