Canopeum

This project integrates Django backend with React Vite frontend template to create a full-stack web application.

Backlog: https://github.com/orgs/BesLogic/projects/3/views/1?filterQuery=-status%3ADone
Figma: https://www.figma.com/design/iKVdInwWsIsxBFxeoGNb6h/Philanthropy-Canopeum

Getting Started

This project has been configured to run in VsCode dev container with all necessary tools to run the front-end and backend from within the environment or follow these instructions to get the project up and running on your local machine without dev container.

Note: If you choose to develop from within the dev container, you still need to have your mysql database available accessible from your app. We've pre-configured the dev container to try reaching the default mysql database container created with the docker-compose.yml from this repository.

Prerequisites

For frontend:

Node.js (includes npm)
Mockoon

For backend

Installation

Fork the project:
Clone the repository:
From your fork, copy the repo's URL
```
git clone <the_url_you_copied>
cd releaf-canopeum
```
Install recommended Editor Extensions (for VSCode):
When you first open the project in VSCode, you'll get a notification like this.

If you've already dismissed this notification, you can search for @recommended in your Extensions tab. Install everything under "WORKSPACE RECOMMENDATIONS", you can ignore "other recommendations":

Set up Django backend and Database: (Skip this section for Frontend only)

cd canopeum_backend
docker compose up
uv sync --locked --extra dev
uv run manage.py initialize_database
uv run manage.py runserver

Set up React frontend:

cd canopeum_frontend
npm install
npm run dev

Run mock data (For Frontend only)

# In another CLI
cd canopeum_frontend
npm run mockoon

Linting/Formatting:

For Frontend: (Dprint & Eslint)

cd canopeum_frontend
npm run lint:fix

For Backend: (Ruff, mypy, pyright)

cd canopeum_backend
uv run ./scripts/checkers.py

For both: (autofixers)

pre-commit run --all

Quickly running the application locally

We've made a start-local-env.ps1 helper script to ease starting up the application. Feel free to use and improve it. TODO: Setup Python debugging of running application to debug backend started by script.

Folder Architecture

project_name/
│
├── backend/                  # Django backend
│   ├── myproject/            # Django project directory
│   │   ├── myapp/            # Django app directory
│   │   │   ├── migrations/   # Database migrations
│   │   │   ├── models.py     # Django models
│   │   │   ├── views.py      # Django views
│   │   │   └── ...           # Other Django app files
│   │   ├── myproject/        # Django project settings
│   │   ├── manage.py         # Django management script
│   │   └── ...               # Other Django project files
│   └── pyproject.toml        # Python dependencies
│   └── docker-compose.yml    # File configuration container MySQL
│
├── frontend/                 # React frontend
│   ├── public/               # Public assets
│   │   ├── index.html        # HTML entry point
│   │   └── ...               # Other public files
│   ├── src/                  # Source code
│   │   ├── assets/           # React components
│   │   │   ├── icons/        # Custom icon bank
│   │   │   └── styles/       # Stylesheets / Bootstrap override / Theme variables
│   │   ├── components/       # React components
│   │   │   ├── Component1.js # Sample React component
│   │   │   └── ...           # Other React components
│   │   ├── pages/            # Pages
│   │   │   ├── Page1.js      # Sample page
│   │   │   └── ...           # Other pages
│   │   ├── hooks/            # Hooks
│   │   │   ├── useFetch.js   # Sample hook fetch
│   │   │   └── ...           # Other hooks
│   │   ├── services/         # Services
│   │   │   ├── api.js        # Sample service api
│   │   │   └── ...           # Other services
│   │   ├── App.js            # Main React component
│   │   ├── main.tsx         # React entry point
│   │   └── ...               # Other React source files
│   ├── package.json          # npm package configuration
│   ├── package-lock.json     # npm package lock
│   └── ...                   # Other React frontend files
│
└── README.md                 # Project documentation

Regenerating the API spec with NSwagStudio

Run npm run generate-api-client to generate and replace directly the openapi spec file (Hint: Don't forget to be in canopeum_frontend folder to run the command)