diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..86ef210
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/.gitignore b/.gitignore
index 7fcdd1c..35c6f17 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,15 @@
 /node_modules/
 build/
 env
+venv/
+
+# ignore compiled files
+
+frontend/static/
 
 #src
 *.sqlite*
 
+# json files
+webpack-stats.json
+
diff --git a/README.md b/README.md
index 022a79a..4d3955a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# [Django Core](https://github.com/app-generator/core-django)
+# [Django Core](https://github.com/app-generator/docs-django-react)
 
 Minimal **Django** project with `Docker` support - actively supported by [App Generator](https://app-generator.dev/) via `Email` and **[Discord](https://discord.gg/fZC6hup)**. 
 
@@ -19,8 +19,8 @@ Minimal **Django** project with `Docker` support - actively supported by [App Ge
 > 👉 **Step 1** - Download the code from the GH repository (using `GIT`) 
 
 ```bash
-$ git clone https://github.com/app-generator/core-django.git
-$ cd core-django
+$ git clone https://github.com/app-generator/docs-django-react.git
+$ cd docs-django-react
 ```
 
 <br />
@@ -40,8 +40,8 @@ Visit `http://localhost:5085` in your browser. The app should be up & running.
 > 👉 Download the code  
 
 ```bash
-$ git clone https://github.com/app-generator/core-django.git
-$ cd core-django
+$ git clone https://github.com/app-generator/docs-django-react.git
+$ cd docs-django-react
 ```
 
 <br />
@@ -65,6 +65,30 @@ $ python manage.py migrate
 
 <br />
 
+> 👉 Set Up React and Webpack
+
+Install JavaScript dependencies:
+
+```bash
+$ npm install
+```
+
+To build the React frontend, use the following commands:
+
+For development (watch mode):
+
+```bash
+$ npm run dev
+```
+
+For production build:
+
+```bash
+$ npm run build
+```
+
+<br />
+
 > 👉 Start the app
 
 ```bash
@@ -76,4 +100,4 @@ At this point, the app runs at `http://127.0.0.1:8000/`.
 <br />
 
 ---
-**[Django Core](https://github.com/app-generator/core-django)** - Minimal **Django** core provided by **[AppSeed](https://appseed.us/)**
+**[Django Core](https://github.com/app-generator/docs-django-react)** - Minimal **Django** core provided by **[AppSeed](https://appseed.us/)**
\ No newline at end of file
diff --git a/core/settings.py b/core/settings.py
index 0670085..c79c01b 100644
--- a/core/settings.py
+++ b/core/settings.py
@@ -26,22 +26,29 @@
 DEBUG = True
 
 # Hosts Settings
-ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.onrender.com', '0.0.0.0']
-CSRF_TRUSTED_ORIGINS = ['http://localhost:8000', 'http://localhost:5085', 'http://127.0.0.1:8000', 'http://127.0.0.1:5085', 'https://core-django.onrender.com']
+ALLOWED_HOSTS = ["localhost", "127.0.0.1", ".onrender.com", "0.0.0.0"]
+CSRF_TRUSTED_ORIGINS = [
+    "http://localhost:8000",
+    "http://localhost:5085",
+    "http://127.0.0.1:8000",
+    "http://127.0.0.1:5085",
+    "https://core-django.onrender.com",
+]
 
 # Application definition
 
 INSTALLED_APPS = [
+    "webpack_loader",
+    "frontend",
+    "admin_datta.apps.AdminDattaConfig",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-
     # APPS
     "home",
-
     # Util
     "debug_toolbar",
 ]
@@ -55,14 +62,13 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
-
     # Util
     "debug_toolbar.middleware.DebugToolbarMiddleware",
 ]
 
 ROOT_URLCONF = "core.urls"
 
-UI_TEMPLATES = os.path.join(BASE_DIR, 'templates') 
+UI_TEMPLATES = os.path.join(BASE_DIR, "templates")
 
 TEMPLATES = [
     {
@@ -130,13 +136,18 @@
 
 STATIC_URL = "static/"
 
-STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
 
-STATICFILES_DIRS = (
-    os.path.join(BASE_DIR, 'static'),
-)
+STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+WEBPACK_LOADER = {
+    "DEFAULT": {
+        "BUNDLE_DIR_NAME": "frontend/",
+        "STATS_FILE": os.path.join(BASE_DIR, "webpack-stats.json"),
+    }
+}
\ No newline at end of file
diff --git a/core/urls.py b/core/urls.py
index f6c25ec..353eb0f 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -19,5 +19,7 @@
 urlpatterns = [
     path("", include("home.urls")),
     path("admin/", admin.site.urls),
-    path("__debug__/", include("debug_toolbar.urls")),        
+    path("__debug__/", include("debug_toolbar.urls")),
+    
+    path("", include("admin_datta.urls")),
 ]
diff --git a/frontend/src/index.js b/frontend/src/index.js
new file mode 100644
index 0000000..c2a2a46
--- /dev/null
+++ b/frontend/src/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+export default function App() {
+  return (
+    <div>
+      <h1>This is a react Application</h1>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("app"));
+root.render(<App />);
\ No newline at end of file
diff --git a/gunicorn-cfg.py b/gunicorn-cfg.py
index 3acce75..886d65b 100644
--- a/gunicorn-cfg.py
+++ b/gunicorn-cfg.py
@@ -3,9 +3,9 @@
 Copyright (c) 2019 - present AppSeed.us
 """
 
-bind = '0.0.0.0:5005'
+bind = "0.0.0.0:5005"
 workers = 1
-accesslog = '-'
-loglevel = 'debug'
+accesslog = "-"
+loglevel = "debug"
 capture_output = True
 enable_stdio_inheritance = True
diff --git a/home/urls.py b/home/urls.py
index 5119061..8d5c8fd 100644
--- a/home/urls.py
+++ b/home/urls.py
@@ -4,4 +4,5 @@
 
 urlpatterns = [
     path("", views.index, name="index"),
+    path('frontend', views.frontend, name='frontend'),
 ]
diff --git a/home/views.py b/home/views.py
index 59e2134..4da55b8 100644
--- a/home/views.py
+++ b/home/views.py
@@ -6,9 +6,12 @@
 
 from .models import *
 
+
 def index(request):
+    context = {
+        "date": datetime.today().strftime("%Y-%m-%d %H:%M:%S"),
+    }
+    return HttpResponse("Hello DJANGO! time is: " + context["date"])
 
-  context = {
-    'date': datetime.today().strftime('%Y-%m-%d %H:%M:%S'),
-  }
-  return HttpResponse("Hello DJANGO! time is: " + context['date'])
+def frontend(request):
+    return render(request, 'frontend/index.html')
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c4b078d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+
+{
+  "name": "django-react-starter",
+  "version": "1.0.1",
+  "description": "Starter repo for serving a React SPA from Django",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack --config webpack.config.js --watch --mode development",
+    "build": "webpack --config webpack.config.js --mode production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "reactflow": "^11.7.0",
+    "recharts": "^2.5.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.3",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-tracker": "^1.8.0",
+    "webpack-cli": "^5.0.1"
+  }
+}
\ No newline at end of file
diff --git a/templates/frontend/index.html b/templates/frontend/index.html
new file mode 100644
index 0000000..2ee7862
--- /dev/null
+++ b/templates/frontend/index.html
@@ -0,0 +1,13 @@
+<!-- templates/frontend/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>React in Django</title>
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle 'frontend' %}
+</head>
+<body>
+    <div id="react-root">This is a React application in Django.</div>
+</body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..b33cb43
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require("path");
+const BundleTracker = require("webpack-bundle-tracker");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+  entry: {
+    frontend: "./frontend/src/index.js",
+  },
+  output: {
+    path: path.resolve("./frontend/static/frontend/"),
+    filename: "main.bundle.js",
+    publicPath: "/static/frontend/",
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new BundleTracker({
+      path: __dirname,
+      filename: "./webpack-stats.json",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};
\ No newline at end of file
