diff --git a/src/djinit/templates/config/settings/base.py-tpl b/src/djinit/templates/config/settings/base.py-tpl
index 15a5da0..2230e57 100644
--- a/src/djinit/templates/config/settings/base.py-tpl
+++ b/src/djinit/templates/config/settings/base.py-tpl
@@ -28,6 +28,7 @@ THIRD_PARTY_APPS = [
     "drf_spectacular",
     "django_tailwind_cli", # @IF use_tailwind
     "django_htmx", # @IF use_htmx
+    "django_vite", # @IF use_vite
 ]
 
 USER_DEFINED_APPS = [
@@ -225,3 +226,12 @@ TAILWIND_CLI_CONFIG = {
     },
 }
 # @ENDIF
+
+# @IF use_vite
+# for django-vite
+DJANGO_VITE_ASSET_SRC = "frontend"
+DJANGO_VITE_DEV_SERVER_URL = "http://localhost:5173"
+STATIC_URL = "/static/"
+STATIC_ROOT = BASE_DIR / "staticfiles"
+STATICFILES_DIRS = [BASE_DIR / "static"]
+# @ENDIF
diff --git a/src/djinit/templates/project/docker-compose.yml-tpl b/src/djinit/templates/project/docker-compose.yml-tpl
index 5ff1e29..f5c76a8 100644
--- a/src/djinit/templates/project/docker-compose.yml-tpl
+++ b/src/djinit/templates/project/docker-compose.yml-tpl
@@ -13,7 +13,11 @@ services:
     environment:
       - DEBUG=1
       # @IF use_database_url
-      - DATABASE_URL= # @IF database_type == 'postgresql' postgresql://postgres:postgres@db:5432/[[ project_name ]] # @IF database_type == 'mysql' mysql://root:root@db:3306/[[ project_name ]]
+      # @IF database_type == 'postgresql'
+      - DATABASE_URL=postgresql://postgres:postgres@db:5432/[[ project_name ]]
+      # @ELSE
+      - DATABASE_URL=mysql://root:root@db:3306/[[ project_name ]]
+      # @ENDIF
       # @ENDIF
     depends_on:
       - db
diff --git a/src/djinit/templates/project/frontend/index.html-tpl b/src/djinit/templates/project/frontend/index.html-tpl
new file mode 100644
index 0000000..061c342
--- /dev/null
+++ b/src/djinit/templates/project/frontend/index.html-tpl
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>[[ project_name ]]</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/djinit/templates/project/frontend/src/App.jsx-tpl b/src/djinit/templates/project/frontend/src/App.jsx-tpl
new file mode 100644
index 0000000..ca1351e
--- /dev/null
+++ b/src/djinit/templates/project/frontend/src/App.jsx-tpl
@@ -0,0 +1,11 @@
+function App() {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>Welcome to [[ project_name ]]</h1>
+      <p>This is your React frontend powered by Vite.</p>
+      <p>Edit <code>frontend/src/App.jsx</code> to get started!</p>
+    </div>
+  )
+}
+
+export default App
\ No newline at end of file
diff --git a/src/djinit/templates/project/frontend/src/index.css-tpl b/src/djinit/templates/project/frontend/src/index.css-tpl
new file mode 100644
index 0000000..285bf63
--- /dev/null
+++ b/src/djinit/templates/project/frontend/src/index.css-tpl
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+}
+
+#root {
+  min-height: 100vh;
+}
\ No newline at end of file
diff --git a/src/djinit/templates/project/frontend/src/main.jsx-tpl b/src/djinit/templates/project/frontend/src/main.jsx-tpl
new file mode 100644
index 0000000..0291fe5
--- /dev/null
+++ b/src/djinit/templates/project/frontend/src/main.jsx-tpl
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
\ No newline at end of file
diff --git a/src/djinit/templates/project/package.json-tpl b/src/djinit/templates/project/package.json-tpl
new file mode 100644
index 0000000..bffd678
--- /dev/null
+++ b/src/djinit/templates/project/package.json-tpl
@@ -0,0 +1,23 @@
+#--------------------------------------------------#
+# The following was generated by djinit: #
+#--------------------------------------------------#
+
+{
+  "name": "[[ project_name ]]-frontend",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.3.5"
+  }
+}
\ No newline at end of file
diff --git a/src/djinit/templates/project/requirements-tpl b/src/djinit/templates/project/requirements-tpl
index bfefe12..9dbb655 100644
--- a/src/djinit/templates/project/requirements-tpl
+++ b/src/djinit/templates/project/requirements-tpl
@@ -12,6 +12,7 @@ django-cors-headers
 whitenoise
 django-tailwind-cli # @IF use_tailwind
 django-htmx # @IF use_htmx
+django-vite # @IF use_vite
 # @IF database_type == 'mysql'
 mysqlclient
 # @ELSE
diff --git a/src/djinit/templates/project/vite.config.js-tpl b/src/djinit/templates/project/vite.config.js-tpl
new file mode 100644
index 0000000..5d5a63b
--- /dev/null
+++ b/src/djinit/templates/project/vite.config.js-tpl
@@ -0,0 +1,25 @@
+#--------------------------------------------------#
+# The following was generated by djinit: #
+#--------------------------------------------------#
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  root: 'frontend',
+  build: {
+    outDir: '../static/dist',
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'frontend/src'),
+    },
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+})
\ No newline at end of file