+ {/* Progress Steps */}
+
+
+ {[1, 2, 3, 4].map((s) => (
+
+
= s
+ ? 'bg-blue-500 text-white'
+ : 'bg-gray-200 text-gray-500'
+ }`}
+ >
+ {s}
+
+ {s < 4 && (
+
s ? 'bg-blue-500' : 'bg-gray-200'
+ }`}
+ />
+ )}
+
+ ))}
+
+
+ Domain Info
+ Verify
+ Preview
+ Complete
+
+
+
+ {/* Error Alert */}
+ {error && (
+
+ Error: {error}
+
+ )}
+
+ {/* Success Alert */}
+ {success && (
+
+ Success! {success}
+
+ )}
+
+ {/* Step 1: Domain & Token */}
+ {step === 1 && (
+
+
+ Step 1: Enter Domain & Cloudflare Token
+
+
+
+ )}
+
+ {/* Step 2: Zone Info */}
+ {step === 2 && zoneInfo && (
+
+
+ Step 2: Verify Zone Information
+
+
+
+
✓ Token validated successfully!
+
+
+
+
+
+
{zoneInfo.zone_name}
+
+
+
+
+
{zoneInfo.zone_id}
+
+
+
+
+
{zoneInfo.zone_status}
+
+
+
+
+
+ {zoneInfo.nameservers?.map((ns, i) => (
+ - {ns}
+ ))}
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Step 3: Preview Changes */}
+ {step === 3 && preview && (
+
+
+ Step 3: Preview DNS Changes
+
+
+
+
+ New IP: {preview.new_ip}
+
+
+
+
+
Changes to be applied:
+
+ {preview.changes?.map((change, i) => (
+
+
+
+ {change.record_type} Record: {change.name}
+
+
+ {change.action.toUpperCase()}
+
+
+
+ {change.current && (
+
+ Current: {change.current.value} (Proxied: {change.current.proxied ? 'Yes' : 'No'})
+
+ )}
+
+
+ New: {change.new.value} (Proxied: {change.new.proxied ? 'Yes' : 'No'})
+
+
+ ))}
+
+
+
+
+
+
+
+ )}
+
+ {/* Step 4: Success */}
+ {step === 4 && (
+
+
+
+
+ Domain Configured Successfully!
+
+
+
+ Your domain {domain} has been configured with DNS and SSL settings.
+
+
+
+
What's Next?
+
+ - DNS changes may take a few minutes to propagate
+ - SSL certificate will be automatically provisioned by Cloudflare
+ - Your site will be accessible via HTTPS within 15 minutes
+
+
+
+
+
+ )}
+
+ )
+}
+
+export default DomainSetup
+
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
new file mode 100644
index 0000000..59c773f
--- /dev/null
+++ b/frontend/src/services/api.js
@@ -0,0 +1,53 @@
+import axios from 'axios'
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://176.96.129.77:5000'
+
+const api = axios.create({
+ baseURL: API_BASE_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+})
+
+export const dnsAPI = {
+ // Health check
+ health: () => api.get('/health'),
+
+ // Validate Cloudflare token
+ validateToken: (domain, cfToken) =>
+ api.post('/api/dns/validate-token', {
+ domain,
+ cf_token: cfToken,
+ }),
+
+ // Preview DNS changes
+ previewChanges: (domain, zoneId, cfToken) =>
+ api.post('/api/dns/preview-changes', {
+ domain,
+ zone_id: zoneId,
+ cf_token: cfToken,
+ }),
+
+ // Apply DNS changes
+ applyChanges: (domain, zoneId, cfToken, preview, proxyEnabled = true) =>
+ api.post('/api/dns/apply-changes', {
+ domain,
+ zone_id: zoneId,
+ cf_token: cfToken,
+ preview,
+ proxy_enabled: proxyEnabled,
+ customer_id: 1, // TODO: Get from auth
+ }),
+
+ // Get domains
+ getDomains: (customerId = 1) =>
+ api.get('/api/domains', {
+ params: { customer_id: customerId },
+ }),
+
+ // Get domain by ID
+ getDomain: (domainId) => api.get(`/api/domains/${domainId}`),
+}
+
+export default api
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..d37737f
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..1572bfa
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ host: '0.0.0.0',
+ port: 3001,
+ proxy: {
+ '/api': {
+ target: 'http://176.96.129.77:5000',
+ changeOrigin: true,
+ }
+ }
+ }
+})
+