This is the repository for the front-end for the mentalmodelsbox.com website. It's a basic next.js app deployed using Zeit Now. Data for the models is served using S3.
A seperate data repository is used to manage the actual mental model data. Please use the data repo if you'd like to contribute new models or update existing ones.
After cloning, install dependencies using:
$ yarn install
Then, run the app using:
$ yarn dev
Then, visit http://localhost:3000 in your browser.
Changes to the model data (e.g. adding new models, modifing existing ones) can be tested by using local data instead of the production S3 file. To do this:
- Install the
mentalmodelsbox-datasubmodule.
$ git submodule update --init
- Generate the local
data.jsonfile.
$ yarn generate-data
- Update the prod data flag in
api/modelsAPI.jsonto false to use the local file.
const USE_PROD_DATA = false;
Anytime you make changes to model YAML files, re-run the generate-data script.
Model data is stored in YAML files using Markdown. The generate-data script is used to convert these files to a single JSON file. The upload-data script is used to upload this file to S3.
This repo uses Prettier with the following settings:
- Indentation: 2 Spaces
- Line Width: 100
- Semicolons
- Single Quotes
' - JSX Bracket Same Line
I built this as a quick project to learn more about frontend development using React and next.js as well as about mental models. After posting this on Hacker News, a few folks had asked about APIs for the model data or about building additional features. While I don't see myself updating this app on a regular cadence, hopefully the source and model data is useful for folks who were interested. Please feel free to contribute or fork for your own projects!