diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..bffe909
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+# React Client Development Environment
+VITE_API_URL=http://localhost:8000
+VITE_ARCHITECTURE=client-server
+VITE_CLIENT=react
+VITE_SERVER=python-flask
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ca8ea59
--- /dev/null
+++ b/README.md
@@ -0,0 +1,31 @@
+# Universal Migrator Frontend
+
+A beautiful React frontend for the Universal Database Migrator tool.
+
+## Features
+
+- PostgreSQL to PostgreSQL migration
+- PostgreSQL to S3 backup/restore
+- S3 to S3 migration
+- MySQL to MySQL migration
+- Modern Material-UI interface
+- Real-time progress tracking
+
+## Getting Started
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Start development server:
+```bash
+npm run dev
+```
+
+3. Open http://localhost:5173 in your browser
+
+## Build for Production
+
+```bash
+npm run build
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..20013f8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Universal Migrator
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ad004cd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "postgres-migration-frontend",
+ "version": "1.0.0",
+ "private": true,
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "axios": "^1.4.0",
+ "react-icons": "^4.10.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "devDependencies": {
+ "react-scripts": "5.0.1"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..43f93e5
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// Client-Server Architecture Configuration
+export default defineConfig({
+ plugins: [react()],
+
+ // Client-side configuration
+ server: {
+ port: 5173,
+ host: true,
+
+ // Development proxy to Python server
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8000', // Python Flask server
+ changeOrigin: true,
+ secure: false,
+ rewrite: (path) => path.replace(/^\/api/, '/api')
+ }
+ }
+ },
+
+ // Build configuration for production
+ build: {
+ outDir: '../dist',
+ emptyOutDir: true,
+ sourcemap: false
+ },
+
+ // Define environment variables
+ define: {
+ 'import.meta.env.ARCHITECTURE': JSON.stringify('client-server'),
+ 'import.meta.env.CLIENT': JSON.stringify('react'),
+ 'import.meta.env.SERVER': JSON.stringify('python-flask')
+ }
+})
\ No newline at end of file