fix: Resolve API connection issues and add Quick Start features

- Fix API URL configuration to use relative paths (fixes localhost:8080 error)
- Add Quick Start Wizard to dashboard for guided bucket/user setup
- Create bash scripts for automated bucket and user creation
- Add quickstart.sh for interactive setup experience
- Update documentation with correct ports and new features
- Improve user onboarding with step-by-step wizard

This addresses:
- Connection refused errors when creating users/policies
- WebSocket connection issues
- Need for easy one-step setup process
- Port configuration clarity in documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

README.md

@@ -4,6 +4,12 @@ A secure, user-friendly web interface for managing MinIO storage infrastructure.
 
 ## Features
 
+- **🚀 Quick Start Wizard**
+  - One-click setup for bucket, user, and policy
+  - Step-by-step guided configuration
+  - Automatic credential generation
+  - Built-in best practices
+
 - **🪣 Bucket Management**
   - Create buckets with automatic user creation
   - List and monitor bucket sizes
@@ -44,7 +50,21 @@ A secure, user-friendly web interface for managing MinIO storage infrastructure.
 
 ## Quick Start
 
-### 1. Clone the Repository
+### Option 1: Interactive Quick Start Script
+
+```bash
+./scripts/quickstart.sh
+```
+
+This will:
+- Check and start all services
+- Guide you through initial setup
+- Create your first bucket and user
+- Provide connection details
+
+### Option 2: Manual Setup
+
+#### 1. Clone the Repository
 
 ```bash
 git clone <repository-url>
@@ -105,8 +125,16 @@ All configuration is managed through the `.env` file:
 ### Port Configuration
 
 Default ports:
-- Backend API: 7510
+- Backend API: 7510 (not 8080)
-- Frontend UI: 7511
+- Frontend UI: 7511 (development) or 3000 (React default)
+- MinIO: 9000
+
+**Important**: The frontend is configured to use relative API URLs. If you're running the backend on a different port or host, set the `REACT_APP_API_URL` environment variable:
+
+```bash
+# For development with custom backend URL
+REACT_APP_API_URL=http://localhost:7510 npm start
+```
 
 To use different ports, see [Port Configuration Guide](docs/PORT_CONFIGURATION.md).
 
@@ -342,7 +370,45 @@ REPORT_RECIPIENT=info@example.com
 
 ## Usage Guide
 
-### Creating a Bucket with User
+### Command-Line Tools
+
+#### Create Bucket with User Script
+
+```bash
+./scripts/create-bucket-with-user.sh -b my-bucket -u my-user -p readwrite
+```
+
+Options:
+- `-b, --bucket <name>`: Bucket name (auto-generated if not specified)
+- `-u, --user <name>`: User name (auto-generated if not specified)
+- `-p, --policy <type>`: Policy type: `readonly`, `writeonly`, `readwrite` (default)
+- `-a, --api-url <url>`: API URL (default: http://localhost:7510)
+- `--admin-user <user>`: Admin username for authentication
+- `--admin-pass <pass>`: Admin password for authentication
+
+#### Quick Start Script
+
+```bash
+./scripts/quickstart.sh
+```
+
+This interactive script will:
+1. Check if services are running
+2. Optionally start services using docker-compose
+3. Guide you through creating an initial bucket and user
+4. Provide MinIO CLI commands for testing
+
+### Web Interface
+
+#### Quick Start Wizard
+
+Click the "Quick Start" button on the dashboard for a guided setup that will:
+- Create a bucket
+- Set up a user with secure password
+- Configure appropriate access policies
+- Provide ready-to-use credentials
+
+#### Creating a Bucket with User
 
 1. Navigate to **Buckets** page
 2. Click **Create Bucket**

frontend/src/components/Dashboard/Dashboard.tsx

@@ -8,14 +8,17 @@ import {
   LinearProgress,
   Alert,
   Paper,
+  Button,
 } from '@mui/material';
 import {
   Storage as StorageIcon,
   People as PeopleIcon,
   Folder as FolderIcon,
   Speed as SpeedIcon,
+  Rocket as RocketIcon,
 } from '@mui/icons-material';
 import api, { handleApiError } from '../../services/api';
+import QuickStartWizard from './QuickStartWizard';
 
 interface DashboardStats {
   totalBuckets: number;
@@ -65,6 +68,7 @@ const Dashboard: React.FC = () => {
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [wizardOpen, setWizardOpen] = useState(false);
 
   useEffect(() => {
     loadDashboardData();
@@ -111,6 +115,8 @@ const Dashboard: React.FC = () => {
   }
 
   return (
+    <Box>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
         <Box>
           <Typography variant="h4" gutterBottom>
             Dashboard
@@ -118,6 +124,17 @@ const Dashboard: React.FC = () => {
           <Typography variant="body1" color="text.secondary" paragraph>
             Welcome to MinIO WebUI. Monitor your storage infrastructure at a glance.
           </Typography>
+        </Box>
+        <Button
+          variant="contained"
+          color="primary"
+          startIcon={<RocketIcon />}
+          onClick={() => setWizardOpen(true)}
+          size="large"
+        >
+          Quick Start
+        </Button>
+      </Box>
 
       <Grid container spacing={3}>
         <Grid item xs={12} sm={6} md={3}>
@@ -189,6 +206,15 @@ const Dashboard: React.FC = () => {
           </Grid>
         </Grid>
       </Box>
+
+      <QuickStartWizard
+        open={wizardOpen}
+        onClose={() => setWizardOpen(false)}
+        onComplete={() => {
+          setWizardOpen(false);
+          loadDashboardData();
+        }}
+      />
     </Box>
   );
 };

frontend/src/components/Dashboard/QuickStartWizard.tsx

@@ -0,0 +1,490 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Stepper,
+  Step,
+  StepLabel,
+  TextField,
+  Box,
+  Typography,
+  Alert,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Paper,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  IconButton,
+  InputAdornment,
+  Chip,
+  LinearProgress,
+} from '@mui/material';
+import {
+  Storage,
+  Person,
+  Security,
+  Check,
+  ContentCopy,
+  Visibility,
+  VisibilityOff,
+  Folder,
+  VpnKey,
+  Assignment,
+} from '@mui/icons-material';
+import userService from '../../services/userService';
+import policyService from '../../services/policyService';
+import api from '../../services/api';
+
+interface QuickStartWizardProps {
+  open: boolean;
+  onClose: () => void;
+  onComplete: () => void;
+}
+
+interface SetupData {
+  bucketName: string;
+  userName: string;
+  userPassword: string;
+  policyType: 'readonly' | 'readwrite' | 'writeonly';
+}
+
+const QuickStartWizard: React.FC<QuickStartWizardProps> = ({
+  open,
+  onClose,
+  onComplete,
+}) => {
+  const [activeStep, setActiveStep] = useState(0);
+  const [setupData, setSetupData] = useState<SetupData>({
+    bucketName: '',
+    userName: '',
+    userPassword: '',
+    policyType: 'readwrite',
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [completedSetup, setCompletedSetup] = useState<any>(null);
+
+  const steps = ['Create Bucket', 'Create User', 'Set Permissions', 'Review & Complete'];
+
+  const generatePassword = () => {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
+    let password = '';
+    for (let i = 0; i < 16; i++) {
+      password += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    setSetupData({ ...setupData, userPassword: password });
+  };
+
+  const handleNext = () => {
+    setError('');
+    if (activeStep === 0 && !setupData.bucketName) {
+      setError('Please enter a bucket name');
+      return;
+    }
+    if (activeStep === 1) {
+      if (!setupData.userName) {
+        setError('Please enter a username');
+        return;
+      }
+      if (!setupData.userPassword) {
+        setError('Please enter or generate a password');
+        return;
+      }
+      const validation = userService.validatePassword(setupData.userPassword);
+      if (!validation.valid) {
+        setError(validation.errors[0]);
+        return;
+      }
+    }
+    
+    if (activeStep === steps.length - 1) {
+      handleComplete();
+    } else {
+      setActiveStep((prevStep) => prevStep + 1);
+    }
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevStep) => prevStep - 1);
+    setError('');
+  };
+
+  const handleComplete = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      // Step 1: Create bucket
+      await api.post('/buckets', { name: setupData.bucketName });
+
+      // Step 2: Create user
+      await userService.createUser({
+        accessKey: setupData.userName,
+        secretKey: setupData.userPassword,
+      });
+
+      // Step 3: Create policy
+      const policyName = `${setupData.bucketName}-${setupData.policyType}-policy`;
+      const policyJson = policyService.generatePolicyFromTemplate(
+        `bucket${setupData.policyType.charAt(0).toUpperCase() + setupData.policyType.slice(1).replace('only', 'Only')}`,
+        setupData.bucketName
+      );
+      
+      await policyService.createPolicy({
+        name: policyName,
+        policy: policyJson,
+      });
+
+      // Step 4: Attach policy to user
+      await policyService.attachPolicy({
+        policyName: policyName,
+        userName: setupData.userName,
+      });
+
+      setCompletedSetup({
+        bucket: setupData.bucketName,
+        user: setupData.userName,
+        password: setupData.userPassword,
+        policy: policyName,
+      });
+
+      setActiveStep(steps.length);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to complete setup');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopyCredentials = () => {
+    const credentials = `MinIO Credentials\n\nBucket: ${completedSetup.bucket}\nUsername: ${completedSetup.user}\nPassword: ${completedSetup.password}\nPolicy: ${completedSetup.policy}`;
+    navigator.clipboard.writeText(credentials);
+  };
+
+  const handleClose = () => {
+    if (!loading) {
+      onClose();
+      // Reset wizard state
+      setActiveStep(0);
+      setSetupData({
+        bucketName: '',
+        userName: '',
+        userPassword: '',
+        policyType: 'readwrite',
+      });
+      setError('');
+      setCompletedSetup(null);
+    }
+  };
+
+  const getStepContent = (step: number) => {
+    switch (step) {
+      case 0:
+        return (
+          <Box>
+            <Typography variant="body1" gutterBottom>
+              Let's start by creating a bucket to store your objects.
+            </Typography>
+            <TextField
+              autoFocus
+              margin="normal"
+              label="Bucket Name"
+              fullWidth
+              value={setupData.bucketName}
+              onChange={(e) => setSetupData({ ...setupData, bucketName: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') })}
+              helperText="Use lowercase letters, numbers, and hyphens only"
+              error={!!error && activeStep === 0}
+            />
+            <Alert severity="info" sx={{ mt: 2 }}>
+              A bucket is a container for storing your files and objects in MinIO.
+            </Alert>
+          </Box>
+        );
+
+      case 1:
+        return (
+          <Box>
+            <Typography variant="body1" gutterBottom>
+              Create a user who will have access to this bucket.
+            </Typography>
+            <TextField
+              autoFocus
+              margin="normal"
+              label="Username"
+              fullWidth
+              value={setupData.userName}
+              onChange={(e) => setSetupData({ ...setupData, userName: e.target.value })}
+              error={!!error && activeStep === 1}
+            />
+            <TextField
+              margin="normal"
+              label="Password"
+              type={showPassword ? 'text' : 'password'}
+              fullWidth
+              value={setupData.userPassword}
+              onChange={(e) => setSetupData({ ...setupData, userPassword: e.target.value })}
+              error={!!error && activeStep === 1}
+              helperText={error || "Min 8 chars, uppercase, lowercase, and number required"}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <Button
+              variant="outlined"
+              onClick={generatePassword}
+              sx={{ mt: 1 }}
+              fullWidth
+            >
+              Generate Secure Password
+            </Button>
+          </Box>
+        );
+
+      case 2:
+        return (
+          <Box>
+            <Typography variant="body1" gutterBottom>
+              Choose what permissions this user should have for the bucket.
+            </Typography>
+            <FormControl fullWidth margin="normal">
+              <InputLabel>Access Level</InputLabel>
+              <Select
+                value={setupData.policyType}
+                onChange={(e) => setSetupData({ ...setupData, policyType: e.target.value as any })}
+                label="Access Level"
+              >
+                <MenuItem value="readonly">
+                  <Box display="flex" alignItems="center" gap={1}>
+                    <Security color="info" fontSize="small" />
+                    Read Only - Can view and download files
+                  </Box>
+                </MenuItem>
+                <MenuItem value="writeonly">
+                  <Box display="flex" alignItems="center" gap={1}>
+                    <Security color="warning" fontSize="small" />
+                    Write Only - Can upload and delete files
+                  </Box>
+                </MenuItem>
+                <MenuItem value="readwrite">
+                  <Box display="flex" alignItems="center" gap={1}>
+                    <Security color="success" fontSize="small" />
+                    Read & Write - Full access to the bucket
+                  </Box>
+                </MenuItem>
+              </Select>
+            </FormControl>
+            <Alert severity="info" sx={{ mt: 2 }}>
+              Policies control what actions users can perform on buckets and objects.
+            </Alert>
+          </Box>
+        );
+
+      case 3:
+        return (
+          <Box>
+            <Typography variant="body1" gutterBottom>
+              Review your configuration before creating:
+            </Typography>
+            <Paper variant="outlined" sx={{ p: 2, mt: 2 }}>
+              <List>
+                <ListItem>
+                  <ListItemIcon>
+                    <Folder color="primary" />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Bucket"
+                    secondary={setupData.bucketName}
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>
+                    <Person color="primary" />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="User"
+                    secondary={setupData.userName}
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>
+                    <VpnKey color="primary" />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Password"
+                    secondary="••••••••••••••••"
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>
+                    <Security color="primary" />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Access Level"
+                    secondary={
+                      <Chip
+                        label={setupData.policyType}
+                        size="small"
+                        color={
+                          setupData.policyType === 'readwrite' ? 'success' :
+                          setupData.policyType === 'readonly' ? 'info' : 'warning'
+                        }
+                      />
+                    }
+                  />
+                </ListItem>
+              </List>
+            </Paper>
+          </Box>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const renderCompletionScreen = () => (
+    <Box>
+      <Box textAlign="center" py={3}>
+        <Check sx={{ fontSize: 64, color: 'success.main' }} />
+        <Typography variant="h5" gutterBottom>
+          Setup Complete!
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          Your bucket and user have been created successfully.
+        </Typography>
+      </Box>
+
+      <Paper variant="outlined" sx={{ p: 3, mt: 2, bgcolor: 'grey.50' }}>
+        <Typography variant="h6" gutterBottom>
+          <Assignment sx={{ verticalAlign: 'middle', mr: 1 }} />
+          Your Credentials
+        </Typography>
+        <Box sx={{ fontFamily: 'monospace', mt: 2 }}>
+          <Typography variant="body2">
+            <strong>Bucket:</strong> {completedSetup.bucket}
+          </Typography>
+          <Typography variant="body2">
+            <strong>Username:</strong> {completedSetup.user}
+          </Typography>
+          <Typography variant="body2">
+            <strong>Password:</strong> {completedSetup.password}
+          </Typography>
+          <Typography variant="body2">
+            <strong>Policy:</strong> {completedSetup.policy}
+          </Typography>
+        </Box>
+        <Button
+          variant="outlined"
+          startIcon={<ContentCopy />}
+          onClick={handleCopyCredentials}
+          fullWidth
+          sx={{ mt: 2 }}
+        >
+          Copy Credentials
+        </Button>
+      </Paper>
+
+      <Alert severity="warning" sx={{ mt: 2 }}>
+        Save these credentials securely. The password cannot be retrieved later.
+      </Alert>
+
+      <Typography variant="h6" sx={{ mt: 3, mb: 1 }}>
+        Next Steps:
+      </Typography>
+      <List dense>
+        <ListItem>
+          <ListItemText primary="1. Use MinIO CLI or SDK to connect with these credentials" />
+        </ListItem>
+        <ListItem>
+          <ListItemText primary="2. Start uploading files to your bucket" />
+        </ListItem>
+        <ListItem>
+          <ListItemText primary="3. Configure additional users or policies as needed" />
+        </ListItem>
+      </List>
+    </Box>
+  );
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        <Box display="flex" alignItems="center" gap={1}>
+          <Storage color="primary" />
+          Quick Start Wizard
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        {error && activeStep < steps.length && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        {activeStep < steps.length ? (
+          <>
+            <Stepper activeStep={activeStep} sx={{ mb: 3 }}>
+              {steps.map((label) => (
+                <Step key={label}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+            {getStepContent(activeStep)}
+          </>
+        ) : (
+          renderCompletionScreen()
+        )}
+
+        {loading && <LinearProgress sx={{ mt: 2 }} />}
+      </DialogContent>
+      <DialogActions>
+        {activeStep < steps.length ? (
+          <>
+            <Button onClick={handleClose} disabled={loading}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleBack}
+              disabled={activeStep === 0 || loading}
+            >
+              Back
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleNext}
+              disabled={loading}
+            >
+              {activeStep === steps.length - 1 ? 'Complete Setup' : 'Next'}
+            </Button>
+          </>
+        ) : (
+          <Button
+            variant="contained"
+            onClick={() => {
+              onComplete();
+              handleClose();
+            }}
+          >
+            Done
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default QuickStartWizard;

frontend/src/services/policyService.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { getAuthHeaders } from '../utils/auth';
 
-const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080';
+const API_BASE_URL = process.env.REACT_APP_API_URL || '';
 
 export interface Policy {
   name: string;

frontend/src/services/userService.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { getAuthHeaders } from '../utils/auth';
 
-const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080';
+const API_BASE_URL = process.env.REACT_APP_API_URL || '';
 
 export interface User {
   accessKey: string;

scripts/create-bucket-with-user.sh

@@ -0,0 +1,386 @@
+#!/bin/bash
+
+# MinIO WebUI - Create Bucket with User Script
+# This script creates a MinIO bucket and a user with appropriate access policies
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Default values
+API_URL="${API_URL:-http://localhost:7510}"
+BUCKET_PREFIX="bucket"
+USER_PREFIX="user"
+POLICY_TYPE="readwrite"
+
+# Function to print colored output
+print_status() {
+    echo -e "${GREEN}[✓]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[✗]${NC} $1"
+}
+
+print_info() {
+    echo -e "${YELLOW}[i]${NC} $1"
+}
+
+# Function to generate secure password
+generate_password() {
+    # Generate a 16-character password with letters, numbers, and special characters
+    openssl rand -base64 16 | tr -d "=/" | cut -c1-16
+}
+
+# Function to check if jq is installed
+check_dependencies() {
+    if ! command -v jq &> /dev/null; then
+        print_error "jq is required but not installed. Please install it first."
+        exit 1
+    fi
+    
+    if ! command -v curl &> /dev/null; then
+        print_error "curl is required but not installed. Please install it first."
+        exit 1
+    fi
+}
+
+# Function to get auth token
+get_auth_token() {
+    local username=$1
+    local password=$2
+    
+    response=$(curl -s -X POST "${API_URL}/api/auth/login" \
+        -H "Content-Type: application/json" \
+        -d "{\"username\":\"${username}\",\"password\":\"${password}\"}" \
+        -w "\n%{http_code}")
+    
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" != "200" ]; then
+        print_error "Failed to authenticate. HTTP Code: $http_code"
+        echo "$body" | jq -r '.error // .message // .' 2>/dev/null || echo "$body"
+        return 1
+    fi
+    
+    token=$(echo "$body" | jq -r '.token // .access_token // .' 2>/dev/null)
+    if [ -z "$token" ] || [ "$token" == "null" ]; then
+        print_error "Failed to extract token from response"
+        return 1
+    fi
+    
+    echo "$token"
+}
+
+# Function to create bucket
+create_bucket() {
+    local token=$1
+    local bucket_name=$2
+    
+    response=$(curl -s -X POST "${API_URL}/api/buckets" \
+        -H "Authorization: Bearer ${token}" \
+        -H "Content-Type: application/json" \
+        -d "{\"name\":\"${bucket_name}\"}" \
+        -w "\n%{http_code}")
+    
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" != "200" ] && [ "$http_code" != "201" ]; then
+        print_error "Failed to create bucket. HTTP Code: $http_code"
+        echo "$body" | jq -r '.error // .message // .' 2>/dev/null || echo "$body"
+        return 1
+    fi
+    
+    print_status "Bucket '${bucket_name}' created successfully"
+}
+
+# Function to create user
+create_user() {
+    local token=$1
+    local username=$2
+    local password=$3
+    
+    response=$(curl -s -X POST "${API_URL}/api/users" \
+        -H "Authorization: Bearer ${token}" \
+        -H "Content-Type: application/json" \
+        -d "{\"accessKey\":\"${username}\",\"secretKey\":\"${password}\"}" \
+        -w "\n%{http_code}")
+    
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" != "200" ] && [ "$http_code" != "201" ]; then
+        print_error "Failed to create user. HTTP Code: $http_code"
+        echo "$body" | jq -r '.error // .message // .' 2>/dev/null || echo "$body"
+        return 1
+    fi
+    
+    print_status "User '${username}' created successfully"
+}
+
+# Function to create policy
+create_policy() {
+    local token=$1
+    local policy_name=$2
+    local bucket_name=$3
+    local policy_type=$4
+    
+    # Generate policy based on type
+    case "$policy_type" in
+        "readonly")
+            policy_json=$(cat <<EOF
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": [
+        "s3:GetObject",
+        "s3:ListBucket",
+        "s3:GetBucketLocation"
+      ],
+      "Resource": [
+        "arn:aws:s3:::${bucket_name}",
+        "arn:aws:s3:::${bucket_name}/*"
+      ]
+    }
+  ]
+}
+EOF
+            )
+            ;;
+        "writeonly")
+            policy_json=$(cat <<EOF
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": [
+        "s3:PutObject",
+        "s3:DeleteObject",
+        "s3:ListBucket"
+      ],
+      "Resource": [
+        "arn:aws:s3:::${bucket_name}",
+        "arn:aws:s3:::${bucket_name}/*"
+      ]
+    }
+  ]
+}
+EOF
+            )
+            ;;
+        *)
+            # Default to readwrite
+            policy_json=$(cat <<EOF
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": ["s3:*"],
+      "Resource": [
+        "arn:aws:s3:::${bucket_name}",
+        "arn:aws:s3:::${bucket_name}/*"
+      ]
+    }
+  ]
+}
+EOF
+            )
+            ;;
+    esac
+    
+    # Escape the JSON for the curl command
+    escaped_policy=$(echo "$policy_json" | jq -c .)
+    
+    response=$(curl -s -X POST "${API_URL}/api/policies" \
+        -H "Authorization: Bearer ${token}" \
+        -H "Content-Type: application/json" \
+        -d "{\"name\":\"${policy_name}\",\"policy\":${escaped_policy}}" \
+        -w "\n%{http_code}")
+    
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" != "200" ] && [ "$http_code" != "201" ]; then
+        print_error "Failed to create policy. HTTP Code: $http_code"
+        echo "$body" | jq -r '.error // .message // .' 2>/dev/null || echo "$body"
+        return 1
+    fi
+    
+    print_status "Policy '${policy_name}' created successfully"
+}
+
+# Function to attach policy to user
+attach_policy() {
+    local token=$1
+    local policy_name=$2
+    local username=$3
+    
+    response=$(curl -s -X POST "${API_URL}/api/policies/attach" \
+        -H "Authorization: Bearer ${token}" \
+        -H "Content-Type: application/json" \
+        -d "{\"policyName\":\"${policy_name}\",\"userName\":\"${username}\"}" \
+        -w "\n%{http_code}")
+    
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" != "200" ] && [ "$http_code" != "201" ]; then
+        print_error "Failed to attach policy. HTTP Code: $http_code"
+        echo "$body" | jq -r '.error // .message // .' 2>/dev/null || echo "$body"
+        return 1
+    fi
+    
+    print_status "Policy '${policy_name}' attached to user '${username}'"
+}
+
+# Main function
+main() {
+    echo "MinIO WebUI - Create Bucket with User"
+    echo "====================================="
+    echo
+    
+    # Check dependencies
+    check_dependencies
+    
+    # Parse command line arguments
+    while [[ $# -gt 0 ]]; do
+        case $1 in
+            -b|--bucket)
+                BUCKET_NAME="$2"
+                shift 2
+                ;;
+            -u|--user)
+                USER_NAME="$2"
+                shift 2
+                ;;
+            -p|--policy)
+                POLICY_TYPE="$2"
+                shift 2
+                ;;
+            -a|--api-url)
+                API_URL="$2"
+                shift 2
+                ;;
+            --admin-user)
+                ADMIN_USER="$2"
+                shift 2
+                ;;
+            --admin-pass)
+                ADMIN_PASS="$2"
+                shift 2
+                ;;
+            -h|--help)
+                echo "Usage: $0 [options]"
+                echo
+                echo "Options:"
+                echo "  -b, --bucket <name>     Bucket name (default: auto-generated)"
+                echo "  -u, --user <name>       User name (default: auto-generated)"
+                echo "  -p, --policy <type>     Policy type: readonly, writeonly, readwrite (default: readwrite)"
+                echo "  -a, --api-url <url>     API URL (default: http://localhost:7510)"
+                echo "  --admin-user <user>     Admin username for authentication"
+                echo "  --admin-pass <pass>     Admin password for authentication"
+                echo "  -h, --help              Show this help message"
+                echo
+                echo "Example:"
+                echo "  $0 -b my-bucket -u my-user -p readwrite"
+                echo
+                exit 0
+                ;;
+            *)
+                print_error "Unknown option: $1"
+                exit 1
+                ;;
+        esac
+    done
+    
+    # Generate names if not provided
+    TIMESTAMP=$(date +%Y%m%d%H%M%S)
+    BUCKET_NAME=${BUCKET_NAME:-"${BUCKET_PREFIX}-${TIMESTAMP}"}
+    USER_NAME=${USER_NAME:-"${USER_PREFIX}-${TIMESTAMP}"}
+    POLICY_NAME="policy-${BUCKET_NAME}"
+    
+    # Generate password for new user
+    USER_PASSWORD=$(generate_password)
+    
+    # Get admin credentials
+    if [ -z "$ADMIN_USER" ] || [ -z "$ADMIN_PASS" ]; then
+        print_info "Please enter admin credentials"
+        read -p "Admin username: " ADMIN_USER
+        read -s -p "Admin password: " ADMIN_PASS
+        echo
+    fi
+    
+    print_info "Starting setup process..."
+    echo
+    
+    # Authenticate
+    print_info "Authenticating..."
+    TOKEN=$(get_auth_token "$ADMIN_USER" "$ADMIN_PASS")
+    if [ $? -ne 0 ]; then
+        print_error "Authentication failed"
+        exit 1
+    fi
+    print_status "Authentication successful"
+    
+    # Create bucket
+    print_info "Creating bucket '${BUCKET_NAME}'..."
+    create_bucket "$TOKEN" "$BUCKET_NAME"
+    if [ $? -ne 0 ]; then
+        print_error "Failed to create bucket"
+        exit 1
+    fi
+    
+    # Create user
+    print_info "Creating user '${USER_NAME}'..."
+    create_user "$TOKEN" "$USER_NAME" "$USER_PASSWORD"
+    if [ $? -ne 0 ]; then
+        print_error "Failed to create user"
+        exit 1
+    fi
+    
+    # Create policy
+    print_info "Creating ${POLICY_TYPE} policy '${POLICY_NAME}'..."
+    create_policy "$TOKEN" "$POLICY_NAME" "$BUCKET_NAME" "$POLICY_TYPE"
+    if [ $? -ne 0 ]; then
+        print_error "Failed to create policy"
+        exit 1
+    fi
+    
+    # Attach policy to user
+    print_info "Attaching policy to user..."
+    attach_policy "$TOKEN" "$POLICY_NAME" "$USER_NAME"
+    if [ $? -ne 0 ]; then
+        print_error "Failed to attach policy"
+        exit 1
+    fi
+    
+    echo
+    echo "====================================="
+    echo -e "${GREEN}Setup completed successfully!${NC}"
+    echo "====================================="
+    echo
+    echo "Bucket Name: ${BUCKET_NAME}"
+    echo "User Name: ${USER_NAME}"
+    echo "Password: ${USER_PASSWORD}"
+    echo "Policy: ${POLICY_NAME} (${POLICY_TYPE})"
+    echo
+    echo "You can now use these credentials to access the bucket."
+    echo
+    echo "Example MinIO CLI commands:"
+    echo "  mc alias set myminio http://localhost:9000 ${USER_NAME} ${USER_PASSWORD}"
+    echo "  mc ls myminio/${BUCKET_NAME}"
+    echo
+}
+
+# Run main function
+main "$@"

scripts/quickstart.sh

@@ -0,0 +1,232 @@
+#!/bin/bash
+
+# MinIO WebUI Quickstart Script
+# This script helps you quickly set up MinIO WebUI with an initial bucket and user
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Default values
+MINIO_URL="${MINIO_URL:-http://localhost:9000}"
+WEBUI_URL="${WEBUI_URL:-http://localhost:7510}"
+FRONTEND_URL="${FRONTEND_URL:-http://localhost:3000}"
+
+# Function to print colored output
+print_header() {
+    echo -e "\n${BLUE}===================================================${NC}"
+    echo -e "${BLUE}$1${NC}"
+    echo -e "${BLUE}===================================================${NC}"
+}
+
+print_status() {
+    echo -e "${GREEN}[✓]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[✗]${NC} $1"
+}
+
+print_info() {
+    echo -e "${YELLOW}[i]${NC} $1"
+}
+
+# Function to check if a service is running
+check_service() {
+    local name=$1
+    local url=$2
+    
+    if curl -s -o /dev/null -w "%{http_code}" "$url" | grep -q "200\|401\|403"; then
+        print_status "$name is running at $url"
+        return 0
+    else
+        print_error "$name is not accessible at $url"
+        return 1
+    fi
+}
+
+# Function to wait for service
+wait_for_service() {
+    local name=$1
+    local url=$2
+    local max_attempts=30
+    local attempt=0
+    
+    print_info "Waiting for $name to start..."
+    
+    while [ $attempt -lt $max_attempts ]; do
+        if curl -s -o /dev/null -w "%{http_code}" "$url" | grep -q "200\|401\|403"; then
+            print_status "$name is ready!"
+            return 0
+        fi
+        
+        sleep 2
+        attempt=$((attempt + 1))
+        echo -n "."
+    done
+    
+    echo
+    print_error "$name failed to start within 60 seconds"
+    return 1
+}
+
+# Main quickstart function
+quickstart() {
+    print_header "MinIO WebUI Quickstart"
+    echo "This script will help you set up MinIO WebUI with initial data"
+    echo
+    
+    # Check if docker-compose is available
+    if command -v docker-compose &> /dev/null; then
+        print_info "Docker Compose detected"
+        
+        # Ask if user wants to start services
+        read -p "Do you want to start MinIO WebUI services? (y/n): " -n 1 -r
+        echo
+        if [[ $REPLY =~ ^[Yy]$ ]]; then
+            print_info "Starting services with docker-compose..."
+            docker-compose up -d
+            
+            # Wait for services to start
+            wait_for_service "MinIO" "$MINIO_URL"
+            wait_for_service "Backend API" "$WEBUI_URL"
+            wait_for_service "Frontend" "$FRONTEND_URL"
+        fi
+    else
+        # Check if services are already running
+        print_info "Checking if services are running..."
+        
+        if ! check_service "Backend API" "$WEBUI_URL/api/health"; then
+            print_error "Backend API is not running. Please start it first:"
+            echo "       cd backend && npm run dev"
+            exit 1
+        fi
+    fi
+    
+    echo
+    print_header "Initial Setup"
+    
+    # Ask for admin credentials
+    print_info "Please enter MinIO admin credentials"
+    read -p "Admin username: " ADMIN_USER
+    read -s -p "Admin password: " ADMIN_PASS
+    echo
+    echo
+    
+    # Ask if user wants to create initial bucket and user
+    read -p "Would you like to create an initial bucket and user? (y/n): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        # Get setup preferences
+        echo
+        read -p "Enter bucket name (or press Enter for auto-generated): " BUCKET_NAME
+        read -p "Enter username (or press Enter for auto-generated): " USER_NAME
+        
+        echo
+        print_info "Select access level:"
+        echo "  1) Read Only"
+        echo "  2) Write Only"
+        echo "  3) Read & Write (default)"
+        read -p "Choice [1-3]: " POLICY_CHOICE
+        
+        case $POLICY_CHOICE in
+            1) POLICY_TYPE="readonly" ;;
+            2) POLICY_TYPE="writeonly" ;;
+            *) POLICY_TYPE="readwrite" ;;
+        esac
+        
+        # Run the create-bucket-with-user script
+        echo
+        print_info "Creating bucket and user..."
+        
+        SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+        
+        if [ -f "$SCRIPT_DIR/create-bucket-with-user.sh" ]; then
+            "$SCRIPT_DIR/create-bucket-with-user.sh" \
+                ${BUCKET_NAME:+-b "$BUCKET_NAME"} \
+                ${USER_NAME:+-u "$USER_NAME"} \
+                -p "$POLICY_TYPE" \
+                -a "$WEBUI_URL" \
+                --admin-user "$ADMIN_USER" \
+                --admin-pass "$ADMIN_PASS"
+        else
+            print_error "create-bucket-with-user.sh script not found"
+            exit 1
+        fi
+    fi
+    
+    echo
+    print_header "Setup Complete!"
+    echo
+    print_info "MinIO WebUI is ready to use!"
+    echo
+    echo "Access the web interface at: ${FRONTEND_URL}"
+    echo "API endpoint: ${WEBUI_URL}"
+    echo "MinIO endpoint: ${MINIO_URL}"
+    echo
+    echo "Next steps:"
+    echo "  1. Open ${FRONTEND_URL} in your browser"
+    echo "  2. Log in with your MinIO admin credentials"
+    echo "  3. Use the Quick Start button on the dashboard for guided setup"
+    echo "  4. Explore buckets, users, and policies pages"
+    echo
+    print_status "Happy storage management! 🚀"
+}
+
+# Function to show help
+show_help() {
+    echo "MinIO WebUI Quickstart Script"
+    echo
+    echo "Usage: $0 [options]"
+    echo
+    echo "Options:"
+    echo "  -h, --help              Show this help message"
+    echo "  --minio-url <url>       MinIO endpoint (default: http://localhost:9000)"
+    echo "  --webui-url <url>       WebUI API endpoint (default: http://localhost:7510)"
+    echo "  --frontend-url <url>    Frontend URL (default: http://localhost:3000)"
+    echo
+    echo "Environment variables:"
+    echo "  MINIO_URL               MinIO endpoint URL"
+    echo "  WEBUI_URL               WebUI backend API URL"
+    echo "  FRONTEND_URL            Frontend application URL"
+    echo
+    echo "Example:"
+    echo "  $0"
+    echo "  $0 --minio-url http://minio.local:9000"
+    echo
+}
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        -h|--help)
+            show_help
+            exit 0
+            ;;
+        --minio-url)
+            MINIO_URL="$2"
+            shift 2
+            ;;
+        --webui-url)
+            WEBUI_URL="$2"
+            shift 2
+            ;;
+        --frontend-url)
+            FRONTEND_URL="$2"
+            shift 2
+            ;;
+        *)
+            print_error "Unknown option: $1"
+            show_help
+            exit 1
+            ;;
+    esac
+done
+
+# Run quickstart
+quickstart