sam9291 / releaf-canopeum

Canopeum

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

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

• Python 3.12
• Docker

Installation

1. Fork the project:
   

2. Clone the repository:
   From your fork, copy the repo's URL
   

   git clone <the_url_you_copied>
   cd releaf-canopeum

3. 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":
   

4. Set up a Python 3.12 virtual environment

   cd canopeum_backend
   python3.12 -m venv .venv

   or on Windows if "python3.12" is not a recognized command:

   cd canopeum_backend
   py -3.12 -m venv .venv

   Then activate the environemnt (you need to do this everytime if your editor isn't configured to do so):

   source .venv/scripts/activate

   and on Windows:

   .venv/scripts/activate

   In VSCode (Windows): CTRL+Shift+P (Open Command Palette) > Python: Select Interpreter

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

   docker compose up
   cd canopeum_backend
   python -m pip install -r requirements-dev.txt
   python manage.py initialize_database
   python manage.py runserver

6. 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

7. Linting/Formatting: For Frontend: (Dprint & Eslint)

   cd canopeum_frontend
   npm run lint:fix

   For Backend: (Ruff, mypy, pyright)

   cd canopeum_backend
   python ./scripts/checkers.py

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
│   └── requirements.txt      # 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