Skip to content

Andrew-Beslogic/releaf-canopeum

This branch is 300 commits behind BesLogic/releaf-canopeum:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f088864 · Apr 18, 2024

History

89 Commits
Mar 24, 2024
Mar 23, 2024
Apr 2, 2024
Apr 18, 2024
Apr 18, 2024
Mar 23, 2024
Mar 22, 2024
Mar 22, 2024
Mar 23, 2024
Apr 2, 2024
Mar 23, 2024
Mar 23, 2024
Apr 5, 2024
Mar 23, 2024

Repository files navigation

Canopeum

Alt text

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:

For backend

Installation

  1. Fork the project:
    Fork

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

    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.
    Recommended Popup

    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":
    Recommended Extensions

  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 VSCode_select_venv

  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

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 71.1%
  • Python 22.7%
  • SCSS 5.7%
  • Other 0.5%