Mind

Overview

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.

Technology Stack

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

• Python
• Flask
• Flask-RESTful
• Flask-SQLAlchemy
• PostgreSQL
• JSON Server

Infrastructure

• Docker
• Docker compose
• Apache web server

Example

mind_showcase.mov

Setup

All environments

(Optional) Update permissions to all shell scripts in the scripts directory

chmod +rwx scripts/**/*

Local dev

1. Install dependencies with ./scripts/setup-local.sh
2. (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

Mind Component Library

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.

Available NPM Scripts

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.

Useful Links

• How to setup a simple Apache Web Server in a docker container