I have an idea for a new project and wanted a place to store all the things that have served as inspiration.
Mind enables storing image and video references used as inspiration for the new project.
Frontend
- Typescript
- React
- React Query
- React context (no Redux for this one)
- Material UI
- Styled Components (could have used only Material UI but wanted to use it)
- React Router
- Formik (form library)
- Yup (form validation)
- Storybook
- React Testing Library
- msw
Backend
Infrastructure
mind_showcase.mov
All environments
(Optional) Update permissions to all shell scripts in the scripts
directory
chmod +rwx scripts/**/*
Local dev
- Install dependencies with
./scripts/setup-local.sh
- (Optional) It is highly recommended to setup a python virtual environment locally.
<python version> -m venv .venv && source .venv/bin/activate
# For example
python3 -m venv .venv && source .venv/bin/activate
3a. Start UI, Python Flask API, and PostgreSQL containers with docker-compose --profile api-python up --build
3b. Start UI and JSON Server API containers with docker-compose --profile api-json-server up
"Production Python Flask API"
- Use
docker-compose
to build images and run containers for the UI, Python Flask API, and PostgeSQL with./scripts/prod/api-python/start-docker-compose.sh
- Use
./scripts/prod/api-python/stop-docker-compose.sh
to stop and remove the running containers
"Production JSON Server"
- Build images and run containers for the UI and JSON Server API with
./scripts/prod/api-json-server/start.sh
- Alternatively, use
docker-compose
with./scripts/prod/api-json-server/start-docker-compose.sh
. Use./scripts/prod/api-json-server/stop-docker-compose.sh
to stop and remove the running containers.
Other
If interested, the UI and JSON Server API can be run locally using npm run dev
scripts.
npm run dev --prefix ./mind-api-json-server
npm run dev --prefix ./mind
Run npm run storybook --prefix ./mind
to start storybook for isolated component development or viewing a component gallery. Storybook has been configured to make requests to a mock service worker instead of a live API to fetch data.
Looking for what each npm script does? While in the mind
or mind-api-json-server
directory, try npm run ntl
to select a script to run from a list of commands and their descriptions.