Frontend: Build Shipment Tracking Page with Live Map

[mftee]

Title: Create Real-time Shipment Tracking Interface with Interactive Map

Description:
Implement a comprehensive shipment tracking page with live map visualization, status timeline, document uploads, and real-time updates. This page allows users to monitor shipment progress and view detailed information.

Page Route: /tracking/[shipmentId]

Requirements:

• Interactive map showing shipment route
• Real-time location updates
• Status timeline/progress tracker
• Shipment details panel
• Document viewer
• Communication panel (chat with carrier)
• Responsive design

Page Sections:

1. Map Section (Primary)

• Full-screen interactive map (Mapbox or Leaflet)
• Origin and destination markers
• Current location marker (moving/animated)
• Route polyline
• Real-time position updates via WebSocket
• Zoom controls
• Toggle satellite/street view
• Estimated time remaining overlay

2. Shipment Details Sidebar

• Shipment ID and title
• Status badge (in transit, delivered, etc.)
• Origin address with icon
• Destination address with icon
• Carrier information (name, photo, rating)
• Vehicle details (type, license plate)
• Estimated delivery time
• Distance remaining
• Quick actions (Contact Carrier, Report Issue)

3. Status Timeline

• Vertical timeline showing:
  • Shipment Created (timestamp, location)
  • Picked Up (timestamp, location)
  • In Transit checkpoints (multiple)
  • Out for Delivery
  • Delivered (or current status)
• Each step with icon, timestamp, and notes
• Completed steps in green, current in blue, pending in gray

4. Documents Section

• List of uploaded documents
• Document types (Bill of Lading, POD, etc.)
• Download buttons
• Preview modal for PDFs/images
• Upload new document button (if authorized)

5. Activity Feed

• Recent updates:
  • Status changes
  • Location updates
  • Messages
  • Document uploads
• Timestamps with relative time ("2 hours ago")

6. Communication Panel (Collapsible)

• Chat interface with carrier
• Message history
• Send message input
• File attachment option
• Typing indicators
• Read receipts

Components to Create:

/components/tracking/
├── TrackingMap.tsx (main map component)
├── MapMarker.tsx (custom markers, reusable)
├── RoutePolyline.tsx
├── ShipmentDetailsSidebar.tsx
├── StatusTimeline.tsx
├── TimelineStep.tsx (reusable)
├── DocumentsList.tsx
├── DocumentPreviewModal.tsx
├── ActivityFeedPanel.tsx
├── ChatPanel.tsx
├── ChatMessage.tsx (reusable)
├── ShipmentInfoCard.tsx (reusable)
└── QuickActionsMenu.tsx

/components/shared/
├── Map.tsx (reusable map wrapper)
├── FileUpload.tsx (reusable)
└── Modal.tsx (reusable)

Technical Requirements:

• Use react-leaflet for maps (or Mapbox)
• WebSocket connection with Socket.io-client for real-time updates
• react-pdf for PDF document preview
• Radix UI for modals and dialogs
• Handle map performance with large routes

Real-time Updates:

• Subscribe to WebSocket events for location updates
• Join specific shipment room: shipment-${shipmentId}
• Listen for events: location_update, status_update, new_message
• Update map marker position smoothly
• Show connection status indicator

Map Features:

• Custom icons for origin, destination, and current location
• Polyline showing planned route
• Auto-center and zoom to fit route
• Click markers for info popups
• Responsive map that resizes with sidebar

Status Workflow:
Created → Posted → Assigned → Picked Up → In Transit → Out for Delivery → Delivered

Acceptance Criteria:

• Interactive map with zoom/pan controls
• Real-time location marker updates
• Route polyline displays correctly
• Status timeline shows all events
• Shipment details display accurately
• Documents list with download functionality
• Chat panel functional (send/receive messages)
• WebSocket connection for real-time updates
• Responsive design (mobile: map fullscreen, details below)
• Loading states for map and data
• Error handling (shipment not found, connection lost)
• Print-friendly view option
• Share tracking link button
• TypeScript: no type errors
• Performance: smooth map rendering

Environment Variables:

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token
NEXT_PUBLIC_SOCKET_URL=ws://localhost:3001

Testing Requirements:

• Test map renders on different devices
• Test real-time updates simulation
• Test with different shipment statuses
• Test document preview/download
• Test chat message sending
• Test responsive layout
• Test WebSocket reconnection

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[OSEH-svg]

@OSEH-svg has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi ,

My name is Oseh. I'd love to contribute to your project as a Frontend Developer! With 5 years of experience in crafting intuitive UIs and leveraging modern tech stacks, I'm excited about the opportunity to work on this project, as it aligns with my passion for building intuitive and performant UIs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OSEH-svg to this issue.

[Rampop01]

@Rampop01 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this issue as a web3 full-stack developer with a strong focus on frontend development. I understand the assignment and the requirements, and I’m confident in the approach needed to deliver the best solution. Kindly assign this task to me.
Thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Rampop01 to this issue.

[josephchimebuka]

@josephchimebuka has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I have read this and I can handle it, and it is within my skill sets. I’m Joseph Chimebuka, a Full-stack and Blockchain Developer with a strong background in open-source contributions. I’m a top open-source contributor on OnlyDust, have participated in multiple hackathons, and enjoy solving complex problems.

I’m currently building with TypeScript and Rust, and I’m confident I can tackle this issue and deliver results quickly. Let’s get to work!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @josephchimebuka to this issue.

[Macnelson9]

@Macnelson9 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

Shipment Tracking Page implemented to match the design/spec

Responsive behavior (mobile + desktop), no layout breakage

Hover/focus states + accessible semantics

Clean, reusable components and consistent styling

Approach

Review the design/spec and existing code patterns

Build the UI + interactions

QA on multiple breakpoints + open a PR with screenshots/video

If assigned, I’ll start immediately and share progress updates in the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Macnelson9 to this issue.

[Emmzyemms]

@Emmzyemms has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emmzyemms to this issue.

[samad13]

@samad13 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

i have the necessary experience, to deliver this issue on time

ℹ️ Repo Maintainers: To accept this application, review their application or assign @samad13 to this issue.

[OlufunbiIK]

@OlufunbiIK has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi maintainer,

Please, can i work on this issue?

I promise to deliver

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OlufunbiIK to this issue.

[Tybravo]

@Tybravo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Doing extra tasks I love. Hello, I am a full-stack Software Engineer with 7+ years of experience and a Blockchain Developer. And I do like to work on the Issue #498 Frontend: Build Shipment Tracking Page with Live Map.

I have strong hands-on experience building advanced, user-friendly and visually engaging frontend interfaces using React, TypeScript, and Next.js, with a focus on reusable component architecture, modern UI patterns, responsive design, state management, and performance optimization. I work across both frontend and backend systems, including backend logic, API design, database architecture, and schema modeling.

I have experience building modern, scalable web applications using React, Typescript, Next.js, Node.js, Java, Rust, and related technologies. Some relevant projects (personal and OPEN SOURCE) I have worked on include:

--> https://www.verilens.xyz/
--> https://repeasy.wal.app/
--> https://docwalrus.vercel.app/
--> https://grainlify.0xo.in/

I am comfortable working within an existing codebase or independently , following project conventions, and delivering clean, maintainable, and well-structured solutions. My GitHub repositories can speak for themselves in demonstrating my experience and consistency across different types of projects.

I am confident I can contribute effectively and deliver high-quality results.

Thank you for your time and considering my application.

Regards,
Tybravo.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Tybravo to this issue.

[Jeyvers]

@Jeyvers has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Jeyi (Senior Frontend Engineer, 6+ years experience)

Hello there,

I’d like to work on the Shipment Tracking Page. I’ve implemented real-time dashboards, interactive maps, and live status feeds in the past, so building WebSocket-driven maps, status timelines, document viewers, and chat panels is pretty comfortable for me. Looking forward to it!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jeyvers to this issue.

[DanielEmmanuel1]

@DanielEmmanuel1 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hey there, can i take this issue on.

I’ve built real-time tracking interfaces with live maps, WebSockets, status timelines, and interactive dashboards before, and I’m comfortable handling both the UI complexity and real-time data flow cleanly.

I’ll focus on performance, clarity, and UX so the page feels fast, intuitive, and reliable across devices, without bloating the codebase or overengineering the architecture. Please assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DanielEmmanuel1 to this issue.