Added docker-compose to docs

Author: mbsantiago

back/docs/developer_guide/code_style.md

@@ -0,0 +1,27 @@
+## Our Standards
+
+At Whombat, we emphasize code quality and employ various tools to streamline development.
+
+### Code Formatting
+
+We follow the black style for Python to maintain consistent formatting throughout the project.
+Additionally, we use isort to organize imports neatly.
+For the Typescript project, prettier serves as the primary code formatter.
+
+### Linting
+
+We utilize the following tools for linting and error checking:
+
+1. Python:
+
+   - **Ruff** for fast overall error checking
+   - **Pyright** for type checking
+
+2. Typescript:
+   - **Eslint** for linting
+   - **Tsc** for checking Typescript code
+
+### Documentation
+
+We adhere to the Numpy docstring format for documenting Python code.
+Our documentation is built using mkdocs, providing a clear and organized structure for users and contributors.

back/docs/developer_guide/quickstart.md

@@ -1,10 +1,29 @@
 # Quickstart
 
-## Pre-requisites
+While developing, it's often helpful to run development servers that host different parts of the application, or provide specific views, such as the UI components or documentation.
+
+These development servers include:
+
+- **FastAPI Backend Server**: Hosts the Python API.
+- **Next.js Frontend Server**: Builds and serves the user interface.
+- **Storybook Server**: Allows you to browse and visually inspect all UI components.
+- **MkDocs Server**: Renders and serves the project documentation.
+
+This guide will show you how to start these servers, allowing you to see how your code changes are reflected in the app in real time.
+
+This guide provides two ways to set up your _Whombat_ development environment:
+
+**Manual Setup**: Ideal if you prefer direct control over your development environment and are comfortable managing dependencies.
+
+**Docker Compose**: Streamlines setup and provides a consistent environment.
+
+## Option 1: Manual Setup
+
+### Pre-requisites
 
 Before setting up your Whombat development environment, ensure you have the following tools installed:
 
-1. **Python 3.12**: We developed Whombat using this version, but any newer version should be compatible.
+1. **Python 3.12**: We developed Whombat using this version, but any version greater or equal to 3.11 should be compatible.
       Download Python 3.12 [here](https://www.python.org/downloads/release/python-3117/).
 
 2. **uv**: UV is a Python package dependency manager that we use to manage dependencies for the Python part of Whombat.
@@ -13,7 +32,7 @@ Before setting up your Whombat development environment, ensure you have the foll
 3. **Node.js**: We use Node.js to develop and bundle the final JavaScript code for the Whombat frontend.
       Download the latest version [here](https://nodejs.org/dist/v20.11.0/node-v20.11.0-linux-x64.tar.xz).
 
-## Set Up a Development Environment
+### Set Up
 
 After confirming that you have all the prerequisites ready, follow these steps to set up a development environment on your machine.
 
@@ -27,7 +46,7 @@ git clone https://github.com/mbsantiago/whombat.git
 
 ```bash
 cd whombat/back
-uv sync
+uv sync --dev
 ```
 
 3. Move to the frontend directory and install all dependencies:
@@ -39,47 +58,87 @@ npm install
 
 These instructions ensure you have the necessary tools and dependencies to kickstart Whombat development on your local machine.
 
-## Running the Development Server
+### Running the Development Servers
 
-Once installed, you can start the backend server by navigating to the `back` directory and running:
+- **Backend**: To initiate the backend server, run the following command from the project's root directory:
 
 ```bash
-make serve-dev
+make serve-back
 ```
 
-You can also start the frontend development server by navigating to the `front` directory and running:
+- **Frontend**: To start the frontend development server, run:
+
+```bash
+make serve-front
+```
+
+Once both servers are running, navigate to [http://localhost:3000](http://localhost:3000) in your web browser to access the Whombat development environment.
+
+- **Storybook:**
+
+  ```bash
+  make storybook
+  ```
+
+  Access Storybook at http://localhost:6006.
+
+- **Documentation Server:**
+
+  ```bash
+  make dev-docs
+  ```
+
+  View the documentation at http://localhost:8000.
+
+## Option 2: Docker Compose
+
+### Pre-requisites
+
+- **Docker** and **Docker Compose**: Install them by following the instructions for your operating system on the official Docker [website](https://docs.docker.com/compose/install/).
+
+### Set Up
+
+Once you have Docker Compose installed, follow these steps:
+
+1. Clone the Repository
 
 ```bash
-npm run dev
+git clone https://github.com/mbsantiago/whombat.git
 ```
 
-These commands initiate the development servers for both the backend and frontend components of Whombat.
-Navigate to [localhost:3000](localhost:3000) to access the development front end.
+2. Navigate to the Project Directory
+
+```bash
+cd whombat
+```
 
-## Our Standards
+### Run Services
 
-At Whombat, we emphasize code quality and employ various tools to streamline development.
+- **Backend and Frontend:**
 
-### Code Formatting
+  ```bash
+  docker-compose -f compose-dev.yaml up backend frontend
+  ```
 
-We follow the black style for Python to maintain consistent formatting throughout the project.
-Additionally, we use isort to organize imports neatly.
-For the Typescript project, prettier serves as the primary code formatter.
+  Access the Whombat development environment at http://localhost:3000
 
-### Linting
+- **Storybook:**
 
-We utilize the following tools for linting and error checking:
+  ```bash
+  docker-compose -f compose-dev.yaml up storybook
+  ```
 
-1. Python:
+  Access Storybook at http://localhost:6006.
 
-   - **Ruff** for fast overall error checking
-   - **Pyright** for type checking
+- **Documentation Server:**
 
-2. Typescript:
-   - **Eslint** for linting
-   - **Tsc** for checking Typescript code
+  ```bash
+  docker-compose -f compose-dev.yaml up docs
+  ```
 
-### Documentation
+  View the documentation at http://localhost:8000.
 
-We adhere to the Numpy docstring format for documenting Python code.
-Our documentation is built using mkdocs, providing a clear and organized structure for users and contributors.
+- **All Services:**
+  ```bash
+  docker-compose -f compose-dev.yaml up
+  ```

back/mkdocs.yml

@@ -14,12 +14,12 @@ nav:
   - Developer Guide:
       - developer_guide/index.md
       - Quickstart: developer_guide/quickstart.md
-      - Architecture: developer_guide/architecture.md
-      - Database Layer: developer_guide/database.md
-      - Python API: developer_guide/api.md
-      - HTTP REST API: developer_guide/rest_api.md
-      - Front End: developer_guide/front_end.md
-      - Plugins: developer_guide/plugins.md
+      # - Architecture: developer_guide/architecture.md
+      # - Database Layer: developer_guide/database.md
+      # - Python API: developer_guide/api.md
+      # - HTTP REST API: developer_guide/rest_api.md
+      # - Front End: developer_guide/front_end.md
+      # - Plugins: developer_guide/plugins.md
       - Contributing: CONTRIBUTING.md
       - Code of Conduct: CODE_OF_CONDUCT.md
   - Reference:

compose-dev.yaml

@@ -68,6 +68,9 @@ services:
         - action: sync
           path: back/docs
           target: /code/docs
+        - action: sync
+          path: back/mkdocs.yml
+          target: /code/mkdocs.yml
 
 networks:
   public: