DSV Shipment Tracking Frontend

Modern React application for tracking DSV shipments with professional UI/UX.

API Base URL: https://www.api-integration.eu

🚀 Features

• Dual Search Interface: Toggle between Booking ID and TMS ID
• Real-time Tracking: Live shipment status updates
• Professional Design: Clean, responsive, business-focused UI
• Timeline Visualization: Step-by-step tracking events
• Loading States: User-friendly loading indicators
• Error Handling: Graceful error management
• Mobile Responsive: Works on all devices

🛠 Tech Stack

• React 19: Latest React with hooks
• Vite: Fast build tool and dev server
• Tailwind CSS: Utility-first CSS framework
• Axios: HTTP client for API calls
• ESLint: Code quality and consistency

📋 Prerequisites

• Node.js 18 or higher
• npm or yarn
• Running backend server

🚀 Installation

# Install dependencies
npm install

# Start development server
npm run dev

🔧 Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

📁 Project Structure

frontend/
├── src/
│   ├── components/          # React components
│   │   └── ShipmentTracker.jsx
│   ├── api/                 # API integration
│   │   └── api.js
│   ├── assets/             # Static assets
│   ├── App.jsx             # Main App component
│   ├── main.jsx            # React entry point
│   └── index.css           # Global styles
├── public/                 # Public assets
├── index.html             # HTML template
├── vite.config.js         # Vite configuration
├── tailwind.config.js     # Tailwind configuration
└── package.json           # Dependencies

🎨 UI Components

ShipmentTracker

Main tracking interface with:

• Search type selector (Booking ID / TMS ID)
• Input field with validation
• Loading states
• Results display
• Error handling

Design Features

• Professional Color Scheme: Blue and gray corporate colors
• Responsive Grid: Mobile-first responsive design
• Interactive Elements: Hover effects and transitions
• Typography: Clean, readable font hierarchy
• Icons: Intuitive visual indicators

📡 API Integration

The frontend communicates with the backend through:

// Token management
fetchToken()

// Shipment tracking
fetchShipmentByBookingId(bookingId, accessToken)
fetchShipmentByTmsId(tmsId, accessToken)

🎯 Usage Flow

1. Select Search Type: Choose between Booking ID or TMS ID
2. Enter Tracking Number: Input your tracking reference
3. Track Shipment: Click the track button
4. View Results: See shipment status and timeline
5. Error Handling: Clear error messages if shipment not found

🎨 Styling

The application uses Tailwind CSS for:

• Responsive Design: Mobile-first approach
• Component Styling: Utility classes
• Custom Components: Professional business design
• Animations: Smooth transitions and loading states

Key Design Elements

• Clean white cards on gray background
• Blue accent colors for CTAs
• Green success indicators
• Red error states
• Professional typography

📱 Responsive Breakpoints

sm: 640px   /* Small devices */
md: 768px   /* Medium devices */
lg: 1024px  /* Large devices */
xl: 1280px  /* Extra large devices */

🔧 Configuration

Vite Configuration

// vite.config.js
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Tailwind Integration

/* index.css */
@import "tailwindcss";

🧪 Development Tips

1. Component Development: Use React hooks for state management
2. Styling: Leverage Tailwind utility classes
3. API Calls: Handle loading and error states
4. Responsive Design: Test on multiple screen sizes
5. Performance: Optimize with React best practices

🔍 Component Features

Search Interface

• Dynamic placeholder text
• Input validation
• Loading indicators
• Clear button functionality

Results Display

• Professional card layout
• Status indicators
• Timeline visualization
• Responsive grid system

Error Handling

• User-friendly error messages
• Retry functionality
• Clear error states
• Support contact information

🎨 Custom Styling

/* Professional color palette */
Primary Blue: #2563eb
Success Green: #059669
Error Red: #dc2626
Gray Background: #f9fafb
White Cards: #ffffff

🤝 Contributing

1. Follow React best practices
2. Use Tailwind CSS utilities
3. Maintain responsive design
4. Add proper prop types
5. Test across devices

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

---

Professional React Frontend for DSV Shipment Tracking