Added the frontend project

README.md

@@ -1,6 +1,4 @@
-# backend
-
-My Django Cookiecutter Template
+# Django Geoapp + Vue.js 3
 
 [![Built with Cookiecutter Django](https://img.shields.io/badge/built%20with-Cookiecutter%20Django-ff69b4.svg?logo=cookiecutter)](https://github.com/cookiecutter/cookiecutter-django/)
 [![Black code style](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/ambv/black)
@@ -20,16 +18,22 @@ License: MIT
 
 * 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
 
 * [Youtube](https://www.youtube.com/watch?v=dqDSYeppbGI)
 
-* [GIF](./geoapp.gif)
+* [Backend GIF](./geoapp-backend.gif)
+
+* [Frontend GIF](./geoapp-frontend.gif)
 
 
 
 ### 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
@@ -52,13 +56,23 @@ License: MIT
 
 ``` docker-compose -f local.yml up ```
 
-
 * Open the web browser and go to ` http://localhost:8000/ ` to see the results.
 
 
-For more information about the available commands in this project check the Cookiecutter Django [Documentation](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html#build-the-stack)
+##### 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](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html#build-the-stack)
 
 
 

backend/README.md

@@ -0,0 +1,63 @@
+# backend
+
+My Django Cookiecutter Template
+
+[![Built with Cookiecutter Django](https://img.shields.io/badge/built%20with-Cookiecutter%20Django-ff69b4.svg?logo=cookiecutter)](https://github.com/cookiecutter/cookiecutter-django/)
+[![Black code style](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/ambv/black)
+
+License: MIT
+
+## Settings
+
+Moved to [settings](http://cookiecutter-django.readthedocs.io/en/latest/settings.html).
+
+
+###  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.
+
+* Authenticated users can import or export data using django forms.
+
+
+
+### To get started with this project
+
+* Make sure that Docker and docker-compose are installed in your system.
+
+* Clone the repository: git clone https://github.com/MoustafaShaaban/Advanced_Django_Blog.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.
+
+
+For more information about the available commands in this project check the Cookiecutter Django [Documentation](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html#build-the-stack)
+
+
+
+
+
+### Docker
+
+See detailed [cookiecutter-django Docker documentation](http://cookiecutter-django.readthedocs.io/en/latest/deployment-with-docker.html).

backend/config/api_router.py

@@ -2,13 +2,15 @@
 from rest_framework.routers import DefaultRouter, SimpleRouter
 
 from backend.users.api.views import UserViewSet
+from geoapp.api.views import FeatureViewSet
 
 if settings.DEBUG:
     router = DefaultRouter()
 else:
     router = SimpleRouter()
 
 router.register("users", UserViewSet)
+router.register("geoapp", FeatureViewSet)
 
 
 app_name = "api"

backend/config/settings/base.py

@@ -282,6 +282,7 @@
 # django-rest-framework - https://www.django-rest-framework.org/api-guide/settings/
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": (
+        'rest_framework.authentication.BasicAuthentication',
         "rest_framework.authentication.SessionAuthentication",
         "rest_framework.authentication.TokenAuthentication",
     ),
@@ -292,6 +293,11 @@
 # django-cors-headers - https://github.com/adamchainz/django-cors-headers#setup
 CORS_URLS_REGEX = r"^/api/.*$"
 
+CORS_ALLOWED_ORIGINS = [
+    "http://127.0.0.1:5173",
+    "http://localhost:5173",
+]
+
 # By Default swagger ui is available only to admin user(s). You can change permission classes to change that
 # See more configuration options at https://drf-spectacular.readthedocs.io/en/latest/settings.html#settings
 SPECTACULAR_SETTINGS = {

backend/config/urls.py

@@ -25,6 +25,7 @@
 urlpatterns += [
     # API base url
     path("api/", include("config.api_router")),
+    path('api-auth/', include('rest_framework.urls')),
     # DRF auth token
     path("auth-token/", obtain_auth_token),
     path("api/schema/", SpectacularAPIView.as_view(), name="api-schema"),

backend/geoapp/api/serializers.py

@@ -0,0 +1,13 @@
+from rest_framework import serializers
+
+from geoapp.models import Feature
+
+
+class FeatureSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Feature
+        fields = ["name", "type", "description", "latitude", "longitude", "url"]
+
+        extra_kwargs = {
+            "url": {"view_name": "api:feature-detail", "lookup_field": "id"}
+        }

backend/geoapp/api/views.py

@@ -0,0 +1,17 @@
+from django.contrib.auth import get_user_model
+from rest_framework import status
+from rest_framework.decorators import action
+from rest_framework.mixins import ListModelMixin, RetrieveModelMixin, UpdateModelMixin
+from rest_framework.response import Response
+from rest_framework.viewsets import GenericViewSet
+
+from .serializers import FeatureSerializer
+from geoapp.models import Feature
+
+User = get_user_model()
+
+
+class FeatureViewSet(RetrieveModelMixin, ListModelMixin, UpdateModelMixin, GenericViewSet):
+    serializer_class = FeatureSerializer
+    queryset = Feature.objects.all()
+    lookup_field = "id"

backend/geoapp/views.py

@@ -54,7 +54,7 @@ class CreateFeature(LoginRequiredMixin, generic.CreateView):
     def get_context_data(self, **kwargs):
         map = folium.Map(
         tiles='cartodbdark_matter',
-        attr= 'Public Schools in Seattle'
+        attr= 'Geoapp built with Django and Folium'
     )
 
         folium.TileLayer('cartodbpositron').add_to(map)

frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>