🚔 Maryland State Police - Vehicles of Interest Management System Web React Version

A modern React-based application for tracking and managing vehicles of interest, converted from Java Swing to provide a responsive, web-based interface for law enforcement personnel.

🎥 Demo Video

VehiclesOfInterest.mp4

Note: To add your video demo, upload the MP4 file to GitHub Issues or Releases, then replace your-video-id-here with the actual asset ID from the URL GitHub provides.

🚀 Features

📊 Dashboard Overview

• Real-time Metrics: Live tracking of total vehicles, alerts, and statistics
• Visual Analytics: Interactive charts and data visualizations
• Quick Navigation: Easy access to all major features

🚗 Vehicle Management

• Comprehensive Database: Store detailed vehicle information
• Advanced Search: Multi-field search and filtering capabilities
• Alert Categories: Support for Amber Alerts, Silver Alerts, and Stolen Vehicle tracking
• Owner Information: Contact details and ownership records

🚨 Alert System

• Amber Alerts: Missing children vehicle associations
• Silver Alerts: Missing elderly person vehicle tracking
• Stolen Vehicles: Comprehensive stolen vehicle database
• Custom Reasons: Configurable reasons for vehicle interest

⚙️ Administrative Tools

• Reason Management: Add, edit, and delete alert categories
• Make & Model Database: Comprehensive vehicle manufacturer database
• User Management: Administrative controls and permissions
• System Monitoring: Health checks and performance metrics

🛠️ Technology Stack

Frontend

• React 18 - Modern JavaScript framework
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component library
• Lucide React - Beautiful icon library

Development Tools

• Vite - Fast build tool and development server
• ESLint - Code linting and quality assurance
• Prettier - Code formatting
• PostCSS - CSS processing and optimization

Video Production

• Remotion - Programmatic video creation
• React-based Animations - Smooth transitions and effects

📋 Prerequisites

Before running this application, make sure you have:

• Node.js (v18 or higher)
• npm (v9 or higher)
• Modern web browser (Chrome, Firefox, Safari, Edge)

🔧 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd VehiclesOfInterestDesktop

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The application will be available at http://localhost:3000

4. Video Production (Optional)

To work with the promotional video:

cd remotion
npm install
npm run start  # Opens Remotion Studio at http://localhost:3001

🎯 Available Scripts

Main Application

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run type-check - Run TypeScript type checking
• npm run lint - Run ESLint code analysis

Video Production (in /remotion directory)

• npm run start - Launch Remotion Studio
• npm run render - Render the main promotional video
• npm run render-hello - Render the hello world demo

📱 Application Usage

Getting Started

1. Dashboard: View system overview and key metrics
2. Vehicles: Browse, search, and manage vehicle records
3. Add Vehicle: Register new vehicles of interest
4. Reasons: Configure alert categories and descriptions
5. Makes & Models: Manage vehicle manufacturer database
6. Admin: Access administrative tools and settings

Key Workflows

1. Adding a Vehicle:

   • Navigate to Vehicles → Add New Vehicle
   • Fill in license plate, make, model, and reason
   • Save to add to the tracking system

2. Searching Records:

   • Use the search bar for quick lookups
   • Apply filters by reason, make, or color
   • Click any vehicle for detailed information

3. Managing Alerts:

   • Configure alert reasons in the Reasons section
   • Associate vehicles with specific alert types
   • Monitor active alerts from the dashboard

🏗️ Project Structure

VehiclesOfInterestDesktop/
├── src/
│   ├── components/           # React components
│   │   ├── ui/              # Reusable UI components
│   │   ├── Dashboard/       # Dashboard-specific components
│   │   ├── Vehicles/        # Vehicle management components
│   │   └── Admin/           # Administrative components
│   ├── assets/              # Static assets and images
│   ├── styles/              # Global styles and themes
│   └── config/              # Configuration files
├── remotion/                # Video production files
│   ├── src/                 # Video compositions
│   └── out/                 # Rendered videos
├── public/                  # Public static files
└── docs/                    # Documentation

🔄 Migration from Java Swing

This application represents a complete modernization of the original Java Swing desktop application:

What Was Converted

• ✅ UI Framework: Java Swing → React + TypeScript
• ✅ Styling: Custom Java Graphics → Tailwind CSS
• ✅ State Management: Java Objects → React Context + Hooks
• ✅ Data Layer: JDBC → Modern REST API ready architecture
• ✅ Build System: Ant/Maven → Vite
• ✅ Development Experience: IDE-dependent → Hot reload + modern tooling

Benefits of the Migration

• 🌐 Web-based: Accessible from any modern browser
• 📱 Responsive: Works on desktop, tablet, and mobile devices
• ⚡ Performance: Fast loading and smooth interactions
• 🎨 Modern UI: Clean, professional interface design
• 🔧 Maintainable: Modern development practices and tooling
• 🚀 Scalable: Easy to extend and modify

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support & Contact

For questions, issues, or support:

• Create an issue in the GitHub repository
• Contact the development team
• Review the documentation in the /docs directory

🎉 Acknowledgments

• Maryland State Police - For the original application requirements
• Figma Design System - For the initial UI/UX components
• React Community - For the amazing ecosystem and tools
• Remotion - For enabling programmatic video creation

---