Skip to content

README.md

Latest commit

 

History

History
260 lines (197 loc) · 10.1 KB

README.md

File metadata and controls

260 lines (197 loc) · 10.1 KB
Raw

🚗 سیپاد | Sipad

Next.js TypeScript PWA Tailwind CSS React

سیپاد - سیستم جامع مدیریت و ردیابی خودرو با پنل‌های مدیریتی، نقشه‌های تعاملی و تحلیل‌های پیشرفته.

Sipad - A comprehensive Progressive Web App for real-time fleet management with admin panels, interactive maps, and advanced analytics.

🚀 Live Demo

🌟 Features | ویژگی‌ها

📱 Mobile-First Design | طراحی موبایل محور

  • Touch-friendly Navigation | ناوبری لمسی - Bottom navigation with large touch targets
  • Swipe Gestures | حرکات لمسی - Intuitive swipe controls for vehicle drawer
  • Responsive Layout | طرح واکنش‌گرا - Adaptive design for all screen sizes
  • PWA Support | پشتیبانی PWA - Install on mobile devices like native apps

🗺️ Interactive Mapping | نقشه‌های تعاملی

  • Real-time Vehicle Tracking | ردیابی لحظه‌ای خودرو - Live location updates
  • Custom Map Interface | رابط نقشه سفارشی - Clean, modern map design
  • Vehicle Markers | نشانگرهای خودرو - Interactive vehicle status indicators
  • Zoom Controls | کنترل‌های زوم - Touch-optimized map navigation

👥 User Management | مدیریت کاربران

  • Role-based Access Control | کنترل دسترسی نقش‌محور
    • Admin | مدیر کل
    • Moderator | مدیر
    • User | کاربر عادی
  • Permission System | سیستم مجوزها - Granular permission control
  • User Authentication | احراز هویت کاربر - Secure login/registration

🚛 Fleet Management | مدیریت ناوگان

  • Vehicle Status Monitoring | نظارت بر وضعیت خودرو
    • Moving | در حرکت
    • Idle | بی‌حرکت
    • Online/Offline | آنلاین/آفلاین
  • Real-time Statistics | آمار لحظه‌ای
  • Vehicle Details | جزئیات خودرو - Fuel, speed, location tracking

📊 Analytics & Reports | تحلیل و گزارش

  • Dashboard Analytics | تحلیل داشبورد - Real-time system metrics
  • Route History | تاریخچه مسیر - Detailed route tracking
  • Performance Charts | نمودارهای عملکرد - Visual data representation
  • Export Capabilities | قابلیت صادرات - Data export functionality

🔔 Alert System | سیستم هشدار

  • Real-time Notifications | اعلان‌های لحظه‌ای
  • Security Alerts | هشدارهای امنیتی
  • Maintenance Reminders | یادآوری تعمیر و نگهداری
  • Custom Alert Rules | قوانین هشدار سفارشی

🌐 PWA Features | ویژگی‌های PWA

  • Offline Functionality | عملکرد آفلاین - Works without internet
  • Install Prompt | درخواست نصب - Add to home screen
  • Service Worker | سرویس ورکر - Background sync and caching
  • Push Notifications | اعلان‌های فشاری - Real-time alerts

🛠️ Technology Stack | پشته فناوری

Frontend | فرانت‌اند

  • Next.js 14 - React framework with App Router
  • TypeScript - Type-safe development
  • Tailwind CSS 4 - Modern utility-first CSS
  • Radix UI - Accessible component primitives
  • Lucide React - Beautiful icons

State Management | مدیریت وضعیت

  • React Context - Global state management
  • React Hooks - Component state logic
  • Local Storage - Persistent user data

UI/UX | رابط کاربری

  • Glassmorphism Design - Modern transparent effects
  • Dark/Light Mode - Theme switching
  • Responsive Design - Mobile-first approach
  • Touch Gestures - Native mobile interactions

PWA Technologies | فناوری‌های PWA

  • Service Worker - Offline caching and background sync
  • Web App Manifest - Installation metadata
  • Cache API - Resource caching strategies

Environment Setup | تنظیم محیط

Create a .env.local file | ایجاد فایل .env.local:

# Database Configuration
DATABASE_URL="your-database-url"

# Authentication
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# API Keys
MAPS_API_KEY="your-maps-api-key"

📱 Usage | استفاده

Default Login Credentials | اطلاعات ورود پیش‌فرض

Admin Account | حساب مدیر:
Email: admin@test.com
Password: admin123

User Account | حساب کاربر:
Email: user@test.com  
Password: user123

Key Pages | صفحات کلیدی

  • Dashboard (/dashboard) - Main overview | نمای کلی اصلی
  • Vehicles (/vehicles) - Fleet management | مدیریت ناوگان
  • Routes (/routes) - Route tracking | ردیابی مسیر
  • Analytics (/analytics) - Data analysis | تحلیل داده
  • Admin Panel (/admin) - User management | مدیریت کاربران
  • Alerts (/alerts) - Notification center | مرکز اعلانات

🔧 Development | توسعه

Project Structure | ساختار پروژه

├── app/                    # Next.js App Router pages
│   ├── dashboard/         # Dashboard pages
│   ├── vehicles/          # Vehicle management
│   ├── admin/             # Admin panel
│   └── ...
├── components/            # Reusable React components
│   ├── ui/               # Base UI components
│   ├── layout/           # Layout components  
│   ├── vehicles/         # Vehicle-specific components
│   └── ...
├── contexts/             # React Context providers
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
├── types/                # TypeScript type definitions
└── public/               # Static assets

Key Components | کامپوننت‌های کلیدی

  • VehicleMap - Interactive map with vehicle tracking
  • DashboardLayout - Main application layout
  • AuthGuard - Route protection component
  • PWAProvider - Progressive Web App functionality
  • ThemeProvider - Dark/light mode management

Development Scripts | اسکریپت‌های توسعه

# Development server | سرور توسعه
pnpm dev

# Type checking | بررسی نوع
pnpm type-check

# Linting | بررسی کد
pnpm lint

# Build production | ساخت تولید
pnpm build

# Start production server | شروع سرور تولید
pnpm start

🎨 Design System | سیستم طراحی

Color Palette | پالت رنگی

  • Primary: Blue gradient (from-blue-600 to-indigo-600)
  • Secondary: Gray scale for neutral elements
  • Success: Green for positive actions
  • Warning: Orange for caution states
  • Error: Red for error states

Typography | تایپوگرافی

  • Headings: Inter font family
  • Body: System font stack
  • Monospace: JetBrains Mono for code

Components | کامپوننت‌ها

  • Glassmorphism Cards - Transparent background effects
  • Animated Buttons - Hover and click animations
  • Mobile Drawers - Touch-friendly slide panels
  • Responsive Tables - Adaptive data presentation

🔐 Security | امنیت

Authentication | احراز هویت

  • JWT-based session management
  • Role-based access control (RBAC)
  • Protected routes with middleware
  • Secure password handling

Data Protection | حفاظت از داده‌ها

  • Client-side data validation
  • XSS protection with proper sanitization
  • CSRF protection for forms
  • Secure HTTP headers

📊 Performance | عملکرد

Optimization Features | ویژگی‌های بهینه‌سازی

  • Code Splitting - Lazy loading of components
  • Image Optimization - Next.js Image component
  • Bundle Analysis - Webpack bundle analyzer
  • Caching Strategy - Service Worker caching

PWA Performance | عملکرد PWA

  • Offline First - Works without network
  • Background Sync - Data synchronization
  • Push Notifications - Real-time updates
  • App Shell - Fast initial loading

🌍 Internationalization | بین‌المللی‌سازی

The application supports both English and Persian (Farsi) languages: برنامه از زبان‌های انگلیسی و فارسی پشتیبانی می‌کند:

  • RTL (Right-to-Left) layout support | پشتیبانی از چیدمان راست به چپ
  • Localized date and time formats | فرمت‌های محلی تاریخ و زمان
  • Currency and number formatting | فرمت‌بندی ارز و اعداد

🤝 Contributing | مشارکت

We welcome contributions! Please follow these steps: ما از مشارکت استقبال می‌کنیم! لطفاً این مراحل را دنبال کنید:

  1. Fork the repository | مخزن را فورک کنید
  2. Create a feature branch | شاخه ویژگی ایجاد کنید
  3. Make your changes | تغییرات خود را اعمال کنید
  4. Write tests if applicable | در صورت لزوم تست بنویسید
  5. Submit a pull request | درخواست کشش ارسال کنید

Development Guidelines | راهنمای توسعه

  • Follow TypeScript best practices
  • Use ESLint and Prettier for code formatting
  • Write meaningful commit messages
  • Add JSDoc comments for complex functions
  • Ensure mobile responsiveness for all features

این پروژه تحت مجوز MIT منتشر شده است - برای جزئیات فایل LICENSE را ببینید.