diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..f973c69
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6412781
--- /dev/null
+++ b/index.html
@@ -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>React App</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/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..180a31b
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,10 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6214612
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "vite-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": { "dev": "vite", "build": "vite build" },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.0"
+  }
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..195427f
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+const App = () => {
+  const n = "{{ $('Get Pending Requests').first().json.requests[0].app_name }}";
+  const d = "{{ $('Get Pending Requests').first().json.requests[0].description }}";
+  const f = "{{ $('Get Pending Requests').first().json.requests[0].features.join(', ') }}";
+  const s = "{{ $('Get Pending Requests').first().json.requests[0].style }}";
+  return (
+    <div style={{ padding: '40px', fontFamily: 'sans-serif', lineHeight: '1.6' }}>
+      <h1 style={{ borderBottom: '2px solid #33d' }}>{n}</h1>
+      <p><strong>Description: </strong>{d}</p>
+      <div style={{ background: '#f9effe', padding: '15px', borderRadius: '5px' }}>
+        <h3>Features</h3>
+        <ul>{f.split(',').map((item, i) => <li key={i}>{item.trim()}</li>)}</ul>
+      </div>
+      <div style={{ marginTop: '20px', padding: '10px', border: '1px dashed #ccc' }}>
+        <strong>Style Guide:</strong> {s}
+      </div>
+    </div>
+  )
+}
+export default App
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..6e9fa26
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..f37cf49
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({ plugins: [react()] })
\ No newline at end of file
