Skip to content

MoustafaShaaban/Django-Geoapp

Repository files navigation

Django Geoapp + Vue.js 3

Built with Cookiecutter Django Black code style

License: MIT

Project Goals

  • Use Django admin site to import data from different sources (CSV, JSON, ...) into the database.

  • Use the power of Folium to visualize data generated from Django Database on a Leaflet JS map.

  • Visualize data using Folium's Simple Markers.

  • Users can register for an account, login, and update their information (handled by Cookiecutter Django)

  • Authenticated users can add, import, or export data using django forms.

  • Use Vue.js 3 (using Vite ) and axios to fetch the data from the backend and display it in a Bootstrap Table.

Project Preview

To get started with this project

Backend
  • Make sure that both Docker and docker-compose are installed in your system.

  • Clone the repository: git clone https://github.com/MoustafaShaaban/Django-Geoapp.git

  • Change directory to backend directory cd backend

  • Build the docker image to develop the project locally using docker-compose:

docker-compose -f local.yml build

  • Create the database by running the following commands:

docker-compose -f local.yml run --rm django python manage.py migrate

  • Create a super user:

docker-compose -f local.yml run --rm django python manage.py createsuperuser

  • Now run the project:

docker-compose -f local.yml up

  • Open the web browser and go to http://localhost:8000/ to see the results.
Frontend
  • Keep the backend server running. and open a new terminal.

  • Change directory to frontend directory cd frontend

  • Create a .env file inside the frontend directory and add the following line to it VITE_API_ENDPOINT=http://127.0.0.1:8000/api/geoapp/

  • Install the dependencies npm install

  • Run the development server npm run dev

For more information about the available commands in this project check the Cookiecutter Django Documentation

Docker

See detailed cookiecutter-django Docker documentation.