feat: Enhanced CSS animations, improved UI components, and project reorganization

- Enhanced globals.css with comprehensive animation system - Added advanced map marker animations (GPS, parking) - Improved button and filter animations with hover effects - Added new UI components: BookingModal, ParkingDetails, WheelPicker - Reorganized project structure with better documentation - Added optimization scripts and improved development workflow - Updated deployment guides and technical documentation - Enhanced mobile responsiveness and accessibility support
2025-08-03 07:00:22 +07:00
parent 100c1aa621
commit e0e47d57c7
34 changed files with 5851 additions and 2353 deletions
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -0,0 +1,201 @@
+# 📂 Scripts Directory
+
+This directory contains all the deployment and development scripts for Smart Parking Finder.
+
+## 📋 Available Scripts
+
+### 🚀 Main Scripts
+
+| Script | Purpose | Usage |
+|--------|---------|--------|
+| **start.sh** | 🎯 Interactive menu with all options | `./scripts/start.sh` |
+| **frontend-only.sh** | 🎨 Start frontend only (fastest) | `./scripts/frontend-only.sh` |
+| **full-dev.sh** | 🔄 Full development environment | `./scripts/full-dev.sh` |
+| **docker-dev.sh** | 🐳 Docker development with all services | `./scripts/docker-dev.sh` |
+| **setup.sh** | 🛠️ Initial project setup | `./scripts/setup.sh` |
+
+### 🎯 Quick Access from Root
+
+From the project root directory, you can use:
+
+```bash
+# Interactive launcher with quick options
+./launch.sh
+
+# Direct script access
+./scripts/start.sh
+./scripts/frontend-only.sh
+./scripts/full-dev.sh
+./scripts/docker-dev.sh
+./scripts/setup.sh
+```
+
+## 📖 Script Details
+
+### 1. start.sh - Interactive Menu
+**Purpose**: Provides a colorful interactive menu with all deployment options.
+
+**Features**:
+- Frontend only deployment
+- Network access (other devices on WiFi)
+- Global access (via ngrok)
+- Full development environment
+- Docker development environment
+
+**Usage**:
+```bash
+./scripts/start.sh
+# Follow the interactive menu (options 1-6)
+```
+
+### 2. frontend-only.sh - Quick Demo
+**Purpose**: Fastest way to see the application interface.
+
+**What it does**:
+- Installs frontend dependencies (if needed)
+- Starts Next.js development server on http://localhost:3000
+- No backend required
+
+**Usage**:
+```bash
+./scripts/frontend-only.sh
+```
+
+**Note**: Some features may not work without backend.
+
+### 3. full-dev.sh - Complete Development
+**Purpose**: Start both frontend and backend for full functionality.
+
+**What it does**:
+- Installs both frontend and backend dependencies
+- Starts NestJS backend on http://localhost:3001
+- Starts Next.js frontend on http://localhost:3000
+- Runs both in parallel
+
+**Usage**:
+```bash
+./scripts/full-dev.sh
+```
+
+**Requirements**: Node.js 18+
+
+### 4. docker-dev.sh - Full Environment
+**Purpose**: Complete development environment with all services.
+
+**What it includes**:
+- Frontend (Next.js) on http://localhost:3000
+- Backend (NestJS) on http://localhost:3001
+- PostgreSQL database on localhost:5432
+- Redis cache on localhost:6379
+- Valhalla routing engine on localhost:8002
+
+**Usage**:
+```bash
+./scripts/docker-dev.sh
+```
+
+**Requirements**: Docker Desktop
+
+### 5. setup.sh - Initial Setup
+**Purpose**: One-time setup for new developers.
+
+**What it does**:
+- Checks Node.js and npm installation
+- Installs frontend dependencies
+- Installs backend dependencies
+- Makes all scripts executable
+- Provides next steps
+
+**Usage**:
+```bash
+./scripts/setup.sh
+```
+
+## 🔧 Script Features
+
+### Error Handling
+All scripts include:
+- ✅ Prerequisite checking (Node.js, Docker, etc.)
+- ✅ Graceful error messages
+- ✅ Cleanup on exit (Ctrl+C)
+- ✅ Colored output for better readability
+
+### Auto-Installation
+Scripts automatically:
+- 📦 Install npm dependencies if not present
+- 🔧 Make scripts executable
+- ⚡ Start services in the correct order
+
+### Cross-Platform Support
+Scripts are designed for:
+- 🍎 macOS (primary)
+- 🐧 Linux
+- 🪟 Windows (via Git Bash/WSL)
+
+## 🎨 Color Coding
+
+Scripts use consistent color coding:
+- 🔵 **Blue**: Information and headers
+- 🟢 **Green**: Success messages and URLs
+- 🟡 **Yellow**: Warnings and tips
+- 🔴 **Red**: Errors and problems
+- 🟦 **Cyan**: Special highlights
+
+## 🚀 Getting Started
+
+### First Time Setup
+```bash
+# 1. Run initial setup
+./scripts/setup.sh
+
+# 2. Choose your development style:
+# Quick demo
+./scripts/frontend-only.sh
+
+# Full development
+./scripts/full-dev.sh
+
+# Complete environment
+./scripts/docker-dev.sh
+
+# Interactive menu
+./scripts/start.sh
+```
+
+### Daily Development
+```bash
+# Most common: Start frontend only for quick testing
+./scripts/frontend-only.sh
+
+# When working on backend: Full development
+./scripts/full-dev.sh
+
+# When testing integrations: Docker environment
+./scripts/docker-dev.sh
+```
+
+## 🔄 Migration from Old Scripts
+
+The old scripts have been reorganized:
+
+| Old Script | New Script | Status |
+|------------|------------|---------|
+| `start.sh` | `scripts/start.sh` | ✅ Enhanced with better UI |
+| `start-frontend-only.sh` | `scripts/frontend-only.sh` | ✅ Renamed and improved |
+| `start-dev.sh` | `scripts/docker-dev.sh` | ✅ Moved and enhanced |
+| `start-local.sh` | `scripts/full-dev.sh` | ✅ Renamed for clarity |
+| `start-global.sh` | Part of `scripts/start.sh` | ✅ Integrated into menu |
+| `start-network.sh` | Part of `scripts/start.sh` | ✅ Integrated into menu |
+| `setup.sh` | `scripts/setup.sh` | ✅ Moved and enhanced |
+
+## 📞 Support
+
+If you encounter issues with any script:
+1. Check the colored error messages
+2. Ensure prerequisites are installed
+3. Run the setup script: `./scripts/setup.sh`
+4. Check the main documentation in `Documents/README.md`
+
+---
+
+*All scripts are located in the `scripts/` directory for better organization.*
--- a/scripts/docker-dev.sh
+++ b/scripts/docker-dev.sh
@@ -0,0 +1,53 @@
+#!/bin/bash
+
+# 🐳 Smart Parking Finder - Docker Development Environment
+echo "🚗 Starting Smart Parking Finder Development Environment with Docker..."
+
+# Function to check if a command exists
+command_exists() {
+    command -v "$1" >/dev/null 2>&1
+}
+
+# Navigate to project root (go back one level since we're in scripts folder)
+cd "$(dirname "$0")/.."
+
+# Check required tools
+echo "Checking required tools..."
+if ! command_exists docker; then
+    echo "❌ Docker is not installed. Please install Docker first."
+    echo "📥 Download from: https://www.docker.com/products/docker-desktop"
+    exit 1
+fi
+
+# Check if Docker is running
+if ! docker info >/dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker and try again."
+    exit 1
+fi
+
+echo "✅ All requirements met!"
+echo ""
+
+# Start services with docker-compose
+echo "🐳 Starting services with Docker Compose..."
+docker-compose up -d
+
+# Wait for services to be ready
+echo "⏳ Waiting for services to be ready..."
+sleep 10
+
+echo ""
+echo "🎉 Smart Parking Finder is now running!"
+echo "📋 Service URLs:"
+echo "   🎨 Frontend: http://localhost:3000"
+echo "   🔧 Backend API: http://localhost:3001"
+echo "   📊 API Docs: http://localhost:3001/api/docs"
+echo "   🗄️ Database: localhost:5432"
+echo "   🔴 Redis: localhost:6379"
+echo "   🗺️ Valhalla: localhost:8002"
+echo ""
+echo "🔧 Management commands:"
+echo "   📋 View logs: docker-compose logs -f"
+echo "   🛑 Stop all: docker-compose down"
+echo "   🗑️ Clean up: docker-compose down -v"
+echo ""
--- a/scripts/frontend-only.sh
+++ b/scripts/frontend-only.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# 🎨 Frontend Only Start Script
+echo "🎨 Starting Smart Parking Finder Frontend..."
+
+# Navigate to frontend directory (go back one level since we're in scripts folder)
+cd "$(dirname "$0")/../frontend"
+
+# Check dependencies
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing dependencies..."
+    npm install
+fi
+
+echo "🚀 Starting Next.js development server..."
+echo "🌐 Frontend will run on: http://localhost:3000"
+echo ""
+echo "⚠️  Note: Backend is not started. Some features may not work."
+echo "💡 To start backend, open new terminal and run:"
+echo "   cd backend && npm run start:dev"
+echo ""
+
+npm run dev
--- a/scripts/full-dev.sh
+++ b/scripts/full-dev.sh
@@ -0,0 +1,58 @@
+#!/bin/bash
+
+# 🔄 Full Development Environment (Frontend + Backend)
+echo "🔄 Starting Full Development Environment..."
+
+# Navigate to project root
+PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+# Function to check if command exists
+command_exists() {
+    command -v "$1" >/dev/null 2>&1
+}
+
+# Check Node.js
+if ! command_exists node; then
+    echo "❌ Node.js is not installed. Please install Node.js first."
+    exit 1
+fi
+
+echo "✅ Node.js is ready"
+
+# Start backend in background
+echo "🔧 Starting Backend on http://localhost:3001..."
+cd "$PROJECT_DIR/backend"
+
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing backend dependencies..."
+    npm install
+fi
+
+npm run start:dev &
+BACKEND_PID=$!
+
+# Start frontend
+echo "🎨 Starting Frontend on http://localhost:3000..."
+cd "$PROJECT_DIR/frontend"
+
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing frontend dependencies..."
+    npm install
+fi
+
+# Wait a bit for backend to start
+sleep 3
+
+npm run dev &
+FRONTEND_PID=$!
+
+echo "🎉 Full development environment started!"
+echo "Frontend: http://localhost:3000"
+echo "Backend: http://localhost:3001"
+
+# Wait for user to exit
+echo "Press Ctrl+C to stop all services..."
+
+# Cleanup on exit
+trap "kill $BACKEND_PID $FRONTEND_PID 2>/dev/null" EXIT
+wait
--- a/scripts/setup.sh
+++ b/scripts/setup.sh
@@ -0,0 +1,83 @@
+#!/bin/bash
+
+# 🛠️ Smart Parking Finder - Project Setup Script
+# This script sets up the complete development environment
+
+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
+
+# Navigate to project root
+PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+# Function to print colored output
+print_status() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Function to check if command exists
+command_exists() {
+    command -v "$1" >/dev/null 2>&1
+}
+
+print_status "🚗 Setting up Smart Parking Finder development environment..."
+
+# Check Node.js
+if command_exists node; then
+    NODE_VERSION=$(node --version)
+    print_success "Node.js is installed: $NODE_VERSION"
+else
+    print_error "Node.js is not installed. Please install Node.js 18+ first."
+    exit 1
+fi
+
+# Check npm
+if command_exists npm; then
+    NPM_VERSION=$(npm --version)
+    print_success "npm is installed: $NPM_VERSION"
+else
+    print_error "npm is not installed."
+    exit 1
+fi
+
+# Setup Frontend
+print_status "📦 Setting up Frontend dependencies..."
+cd "$PROJECT_DIR/frontend"
+npm install
+print_success "Frontend dependencies installed"
+
+# Setup Backend
+print_status "📦 Setting up Backend dependencies..."
+cd "$PROJECT_DIR/backend"
+npm install
+print_success "Backend dependencies installed"
+
+# Make scripts executable
+print_status "🔧 Making scripts executable..."
+chmod +x "$PROJECT_DIR/scripts/"*.sh
+print_success "Scripts are now executable"
+
+print_success "🎉 Setup complete!"
+echo ""
+echo "🚀 To start the application:"
+echo "   📱 Frontend only: ./scripts/frontend-only.sh"
+echo "   🔄 Full development: ./scripts/full-dev.sh"
+echo "   🐳 Docker development: ./scripts/docker-dev.sh"
+echo "   🎯 Interactive menu: ./scripts/start.sh"
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -0,0 +1,255 @@
+#!/bin/bash
+
+# 🚗 Smart Parking Finder - Unified Start Script
+# This script provides multiple deployment options
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# Project directory (go back one level since we're in scripts folder)
+PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+# Function to display menu
+show_menu() {
+    echo -e "${BLUE}🚗 Smart Parking Finder - Start Options${NC}"
+    echo -e "${BLUE}============================================${NC}"
+    echo ""
+    echo -e "${GREEN}1.${NC} 🎨 Frontend Only (Quick Demo)"
+    echo -e "${GREEN}2.${NC} 🌐 Network Access (Other devices can access)"
+    echo -e "${GREEN}3.${NC} 🌍 Global Access (Internet access via ngrok)"
+    echo -e "${GREEN}4.${NC} 🔄 Full Development (Frontend + Backend)"
+    echo -e "${GREEN}5.${NC} 🐳 Docker Development (Complete with services)"
+    echo -e "${GREEN}6.${NC} ❌ Exit"
+    echo ""
+    echo -e "${YELLOW}Choose an option [1-6]:${NC} "
+}
+
+# Function to check if command exists
+command_exists() {
+    command -v "$1" >/dev/null 2>&1
+}
+
+# Function to get local IP
+get_local_ip() {
+    ifconfig | grep -E "inet.*broadcast" | head -1 | awk '{print $2}'
+}
+
+# Function to start frontend only
+start_frontend_only() {
+    echo -e "${BLUE}🎨 Starting Frontend Only...${NC}"
+    cd "$PROJECT_DIR/frontend"
+    
+    if [ ! -d "node_modules" ]; then
+        echo -e "${YELLOW}📦 Installing dependencies...${NC}"
+        npm install
+    fi
+    
+    echo -e "${GREEN}🚀 Starting Next.js development server...${NC}"
+    echo -e "${CYAN}🌐 Frontend will run on: http://localhost:3000${NC}"
+    echo ""
+    echo -e "${YELLOW}⚠️  Note: Backend is not started. Some features may not work.${NC}"
+    echo -e "${YELLOW}💡 To start backend, open new terminal and run:${NC}"
+    echo -e "${YELLOW}   cd backend && npm run start:dev${NC}"
+    echo ""
+    
+    npm run dev
+}
+
+# Function to start with network access
+start_network_access() {
+    echo -e "${BLUE}🌐 Starting with Network Access...${NC}"
+    LOCAL_IP=$(get_local_ip)
+    
+    echo -e "${BLUE}===============================================${NC}"
+    echo -e "${BLUE}🌐 NETWORK ACCESS INFORMATION${NC}"
+    echo -e "${BLUE}===============================================${NC}"
+    echo -e "${GREEN}📱 Local Access: http://localhost:3000${NC}"
+    echo -e "${GREEN}🌍 Network Access: http://$LOCAL_IP:3000${NC}"
+    echo -e "${BLUE}===============================================${NC}"
+    echo ""
+    echo -e "${YELLOW}📋 To access from other devices:${NC}"
+    echo -e "${YELLOW}   1. Make sure devices are on the same WiFi network${NC}"
+    echo -e "${YELLOW}   2. Use this URL: http://$LOCAL_IP:3000${NC}"
+    echo -e "${YELLOW}   3. Make sure macOS Firewall allows Node.js connections${NC}"
+    echo ""
+    
+    cd "$PROJECT_DIR/frontend"
+    
+    if [ ! -d "node_modules" ]; then
+        echo -e "${YELLOW}📦 Installing dependencies...${NC}"
+        npm install
+    fi
+    
+    npm run dev
+}
+
+# Function to start with global access
+start_global_access() {
+    echo -e "${BLUE}🌍 Starting with Global Access...${NC}"
+    
+    if ! command_exists ngrok; then
+        echo -e "${YELLOW}❌ ngrok is not installed. Installing...${NC}"
+        if command_exists brew; then
+            brew install ngrok/ngrok/ngrok
+        else
+            echo -e "${RED}❌ Please install ngrok manually: https://ngrok.com/download${NC}"
+            exit 1
+        fi
+    fi
+    
+    LOCAL_IP=$(get_local_ip)
+    
+    echo -e "${BLUE}===============================================${NC}"
+    echo -e "${BLUE}🌍 GLOBAL ACCESS DEPLOYMENT${NC}"
+    echo -e "${BLUE}===============================================${NC}"
+    echo -e "${GREEN}📱 Local Access: http://localhost:3000${NC}"
+    echo -e "${GREEN}🏠 Network Access: http://$LOCAL_IP:3000${NC}"
+    echo -e "${GREEN}🌐 Global Access: Will be shown after ngrok starts${NC}"
+    echo -e "${BLUE}===============================================${NC}"
+    echo ""
+    
+    cd "$PROJECT_DIR/frontend"
+    
+    if [ ! -d "node_modules" ]; then
+        echo -e "${YELLOW}📦 Installing dependencies...${NC}"
+        npm install
+    fi
+    
+    # Start frontend in background
+    npm run dev &
+    FRONTEND_PID=$!
+    
+    # Wait for frontend to start
+    sleep 5
+    
+    # Start ngrok
+    echo -e "${CYAN}🔗 Creating global tunnel...${NC}"
+    ngrok http 3000
+    
+    # Cleanup on exit
+    trap "kill $FRONTEND_PID" EXIT
+}
+
+# Function to start full development
+start_full_development() {
+    echo -e "${BLUE}🔄 Starting Full Development (Frontend + Backend)...${NC}"
+    
+    # Check Node.js
+    if ! command_exists node; then
+        echo -e "${RED}❌ Node.js is not installed. Please install Node.js first.${NC}"
+        exit 1
+    fi
+    
+    echo -e "${GREEN}✅ Node.js is ready${NC}"
+    
+    # Start backend in background
+    echo -e "${BLUE}🔧 Starting Backend on http://localhost:3001...${NC}"
+    cd "$PROJECT_DIR/backend"
+    
+    if [ ! -d "node_modules" ]; then
+        echo -e "${YELLOW}📦 Installing backend dependencies...${NC}"
+        npm install
+    fi
+    
+    npm run start:dev &
+    BACKEND_PID=$!
+    
+    # Start frontend
+    echo -e "${BLUE}🎨 Starting Frontend on http://localhost:3000...${NC}"
+    cd "$PROJECT_DIR/frontend"
+    
+    if [ ! -d "node_modules" ]; then
+        echo -e "${YELLOW}📦 Installing frontend dependencies...${NC}"
+        npm install
+    fi
+    
+    # Wait a bit for backend to start
+    sleep 3
+    
+    npm run dev &
+    FRONTEND_PID=$!
+    
+    echo -e "${GREEN}🎉 Full development environment started!${NC}"
+    echo -e "${GREEN}Frontend: http://localhost:3000${NC}"
+    echo -e "${GREEN}Backend: http://localhost:3001${NC}"
+    
+    # Wait for user to exit
+    echo -e "${YELLOW}Press Ctrl+C to stop all services...${NC}"
+    
+    # Cleanup on exit
+    trap "kill $BACKEND_PID $FRONTEND_PID 2>/dev/null" EXIT
+    wait
+}
+
+# Function to start docker development
+start_docker_development() {
+    echo -e "${BLUE}🐳 Starting Docker Development...${NC}"
+    
+    # Check Docker
+    if ! command_exists docker; then
+        echo -e "${RED}❌ Docker is not installed. Please install Docker first.${NC}"
+        exit 1
+    fi
+    
+    if ! docker info >/dev/null 2>&1; then
+        echo -e "${RED}❌ Docker is not running. Please start Docker and try again.${NC}"
+        exit 1
+    fi
+    
+    echo -e "${GREEN}✅ Docker is ready${NC}"
+    
+    cd "$PROJECT_DIR"
+    
+    echo -e "${BLUE}🚀 Starting Docker Compose...${NC}"
+    docker-compose up -d
+    
+    echo -e "${GREEN}🎉 Docker development environment started!${NC}"
+    echo -e "${GREEN}Frontend: http://localhost:3000${NC}"
+    echo -e "${GREEN}Backend: http://localhost:3001${NC}"
+    echo -e "${GREEN}Database: localhost:5432${NC}"
+    echo -e "${GREEN}Redis: localhost:6379${NC}"
+    
+    echo -e "${YELLOW}To stop: docker-compose down${NC}"
+}
+
+# Main execution
+while true; do
+    show_menu
+    read -p "" choice
+    
+    case $choice in
+        1)
+            start_frontend_only
+            break
+            ;;
+        2)
+            start_network_access
+            break
+            ;;
+        3)
+            start_global_access
+            break
+            ;;
+        4)
+            start_full_development
+            break
+            ;;
+        5)
+            start_docker_development
+            break
+            ;;
+        6)
+            echo -e "${GREEN}👋 Goodbye!${NC}"
+            exit 0
+            ;;
+        *)
+            echo -e "${RED}❌ Invalid option. Please choose 1-6.${NC}"
+            echo ""
+            ;;
+    esac
+done