added useAPI for backend communication

.env.example

@@ -4,4 +4,7 @@ DATABASE_PASSWORD=
 DATABASE_HOST=postgres
 DATABASE_PORT=5432
 
-DJANGO_ENV=
+DJANGO_ENV=
+
+BACKEND_URL=localhost:8000
+FRONTEND_URL=localhost:3000

services/backend/backend/settings.py

@@ -62,11 +62,13 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    "debug_toolbar",
+    'debug_toolbar',
     'rest_framework',
+    'corsheaders',
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -74,7 +76,7 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-    "debug_toolbar.middleware.DebugToolbarMiddleware",
+    'debug_toolbar.middleware.DebugToolbarMiddleware',
 ]
 
 ROOT_URLCONF = 'backend.urls'
@@ -153,3 +155,7 @@ STATIC_URL = 'static/'
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+CORS_ALLOWED_ORIGINS = [
+    env.str("FRONTEND_URL", "http://localhost:3000"),
+]

services/backend/pyproject.toml

@@ -14,6 +14,7 @@ dependencies = [
     "django-debug-toolbar>=5.0.1",
     "django-environ>=0.12.0",
     "wait-for-it>=2.3.0",
+    "django-cors-headers>=4.7.0",
 ]
 
 [tool.uv]

services/backend/uv.lock

@@ -30,6 +30,7 @@ version = "0.1.0"
 source = { virtual = "." }
 dependencies = [
     { name = "django" },
+    { name = "django-cors-headers" },
     { name = "django-debug-toolbar" },
     { name = "django-environ" },
     { name = "djangorestframework" },
@@ -41,6 +42,7 @@ dependencies = [
 [package.metadata]
 requires-dist = [
     { name = "django", specifier = ">=5.1.5" },
+    { name = "django-cors-headers", specifier = ">=4.7.0" },
     { name = "django-debug-toolbar", specifier = ">=5.0.1" },
     { name = "django-environ", specifier = ">=0.12.0" },
     { name = "djangorestframework", specifier = ">=3.15.2" },
@@ -84,6 +86,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/11/e6/e92c8c788b83d109f34d933c5e817095d85722719cb4483472abc135f44e/Django-5.1.5-py3-none-any.whl", hash = "sha256:c46eb936111fffe6ec4bc9930035524a8be98ec2f74d8a0ff351226a3e52f459", size = 8276957 },
 ]
 
+[[package]]
+name = "django-cors-headers"
+version = "4.7.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "asgiref" },
+    { name = "django" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/93/6c/16f6cb6064c63074fd5b2bd494eb319afd846236d9c1a6c765946df2c289/django_cors_headers-4.7.0.tar.gz", hash = "sha256:6fdf31bf9c6d6448ba09ef57157db2268d515d94fc5c89a0a1028e1fc03ee52b", size = 21037 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7e/a2/7bcfff86314bd9dd698180e31ba00604001606efb518a06cca6833a54285/django_cors_headers-4.7.0-py3-none-any.whl", hash = "sha256:f1c125dcd58479fe7a67fe2499c16ee38b81b397463cf025f0e2c42937421070", size = 12794 },
+]
+
 [[package]]
 name = "django-debug-toolbar"
 version = "5.0.1"

services/frontend/composables/useAPI.ts

@@ -0,0 +1,19 @@
+import type { UseFetchOptions } from "nuxt/app";
+
+export function useAPI<T>(
+    endpoint: string,
+    options?: UseFetchOptions<T>,
+) {
+    if (!endpoint.startsWith("/")) {
+        endpoint = `/${endpoint}`
+    }
+
+    const cfg = useRuntimeConfig()
+
+    const fullUrl = `${cfg.public.backendUrl}${endpoint}`
+
+    return useFetch(
+        fullUrl,
+        {...options}
+    )
+}

services/frontend/nuxt.config.ts

@@ -8,6 +8,11 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vuetify'],
   },
+  runtimeConfig: {
+    public: {
+      backendUrl: process.env.BACKEND_URL ?? "http://localhost:8000"
+    },
+  },
   modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {

services/frontend/pages/index.vue

@@ -1,3 +1,3 @@
 <template>
-Index file
-</template>
+  Index file
+</template>