Frontend: Create Carrier Directory & Search Page

[mftee]

Description:
Implement a carrier directory page where shippers can discover, search, and compare available carriers with detailed profiles, ratings, and service capabilities.

Page Route: /carriers

Requirements:

• Grid/list view of carriers
• Advanced search and filtering
• Carrier profile cards with ratings
• Sorting options
• Contact/hire carrier functionality
• Favorite/bookmark carriers
• Comparison feature

Page Sections:

1. Search & Filter Header

• Search bar (by name, location, services)
• Filter button (opens filter panel)
• Sort dropdown (Rating, Price, Distance, Availability)
• View toggle (grid/list)
• Results count display
• Clear filters button

2. Filters Sidebar/Panel

• Service Area (location autocomplete)
• Vehicle Types (checkboxes): Truck, Van, Cargo Ship, Rail, Air Freight
• Cargo Specializations (checkboxes): Fragile, Refrigerated, Hazmat, Oversized, Standard
• Minimum Rating (star selector 1-5)
• Insurance Coverage (yes/no)
• Verified Carriers Only (toggle)
• Available Now (toggle)
• Price Range (slider, per mile)
• Delivery Speed (Same Day, Next Day, Standard, Economy)

3. Carrier Cards (Grid View)

• Company logo/avatar
• Company name (clickable to profile)
• Rating (stars + review count)
• Verified badge (if verified)
• Service areas (max 3 displayed, "+X more")
• Vehicle types icons
• Specializations tags
• "Available Now" badge
• Base rate display ($/mile or $/shipment)
• Quick stats: Total deliveries, On-time percentage, Years in service
• Action buttons: View Profile, Contact, Favorite (heart icon)
• Response time indicator

4. Carrier List View

• Horizontal layout with logo, company info, pricing & availability, actions
• Hover effect reveals more details
• More compact than grid view

5. Compare Carriers Feature

• "Add to Compare" checkbox on cards
• Floating comparison bar (bottom of screen) showing selected carriers (max 4)
• Compare button opens comparison modal/page
• Side-by-side table with all key metrics
• Highlight differences
• Select winner button

6. Carrier Profile Modal/Page

• Header: Large logo, company name, rating, verified badge, contact button
• About Section: Description, years in business, fleet size, insurance coverage
• Services Section: Service areas (map visualization), vehicle types with quantities, specializations, certifications
• Pricing Section: Base rates, additional fees, minimum charges
• Performance Metrics: Delivery stats (charts), on-time percentage, response time, total deliveries
• Reviews Section: Star distribution chart, recent reviews list with pagination, verified shipper badge
• Contact Form: Quick message to carrier, attach shipment details option

Components to Create:

/components/carriers/
├── CarrierCard.tsx (reusable)
├── CarrierListItem.tsx (reusable)
├── CarriersGrid.tsx
├── CarriersList.tsx
├── CarrierFiltersPanel.tsx
├── CarrierSearchBar.tsx (reusable)
├── SortDropdown.tsx (reusable)
├── CarrierProfileModal.tsx
├── CarrierRating.tsx (reusable star rating)
├── ServiceAreaMap.tsx (reusable)
├── ReviewsList.tsx
├── ReviewItem.tsx (reusable)
├── CompareBar.tsx
├── ComparisonTable.tsx
├── ContactCarrierForm.tsx
├── VehicleTypeIcon.tsx (reusable)
└── SpecializationTag.tsx (reusable)

/components/shared/
├── RatingStars.tsx (reusable)
├── MapView.tsx (reusable)
└── Badge.tsx (reusable)

Technical Requirements:

• react-select for advanced dropdowns
• react-rating-stars-component for ratings
• react-leaflet for service area maps
• Headless UI for accessible components
• TanStack Query for data fetching

Carrier Profile:

• Display comprehensive carrier information
• Service area visualization on map
• Performance charts (delivery times, success rates)
• Customer reviews with filtering
• Contact form with validation
• Share profile functionality

Comparison Feature:

• Select up to 4 carriers
• Compare side-by-side in table format
• Metrics to compare: Rating, Price, Service Areas, Vehicle Types, On-time Rate, Total Deliveries, Response Time
• Highlight best values in each category
• Export comparison as PDF

Acceptance Criteria:

• Carrier cards display all information correctly
• Grid and list views both functional
• Search filters carriers correctly
• All filter options work
• Sorting options functional
• Favorite/unfavorite carriers (persists)
• Comparison feature (select up to 4)
• Comparison table displays correctly
• Carrier profile modal complete with all sections
• Service area map visualization
• Reviews display with pagination
• Contact form functional with validation
• Responsive design (cards stack on mobile)
• Loading states for data fetching
• Empty state when no carriers found
• TypeScript: full type safety
• Performance: smooth scrolling with many carriers

Testing Requirements:

• Test with 0, 1, 10, 50+ carriers
• Test all filter combinations
• Test sorting options
• Test comparison with 2, 3, 4 carriers
• Test profile modal
• Test contact form submission
• Test responsive design

[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

[Gbangbolaoluwagbemiga]

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

GM GM, I have gone through the issue and I will be able to handle this. Please assign this to me.

I specialize in building complex directory and search interfaces with advanced filtering, map integration, and comparison features.

Background:

• 4+ years Frontend Developer with Web3Bridge
• Won Scaffold Stellar Hackathon with SecureFlow
• Expert in React, TypeScript, Next.js, TanStack Query
• Built multiple directory/marketplace interfaces
• Experience with react-leaflet, advanced filtering, and data visualization

What I'll Deliver:

Components :

• CarrierCard, CarrierListItem, CarriersGrid, CarriersList
• CarrierFiltersPanel, CarrierSearchBar, SortDropdown
• CarrierProfileModal, CarrierRating, ServiceAreaMap
• ReviewsList, ReviewItem, CompareBar, ComparisonTable
• ContactCarrierForm, VehicleTypeIcon, SpecializationTag

Features:

• Grid/list view toggle
• Advanced search & filtering (9+ filter types)
• Sorting (Rating, Price, Distance, Availability)
• Carrier comparison (up to 4)
• Profile modal with maps & charts
• Reviews with pagination
• Contact form with validation
• Favorite/bookmark functionality
• Responsive design

Tech Stack:

• react-select, react-rating-stars-component
• react-leaflet for maps
• Headless UI, TanStack Query
• TypeScript full type safety

Timeline: 20-25 hours for complete implementation.

I'm excited to build a comprehensive carrier discovery platform!

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

[Marvelousmicheal]

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

can I work on this issues, this would be a very good learning experience

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Marvelousmicheal 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.

[ReinaMaze]

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

Hello
I’m a full-stack developer with solid experience building modern web applications using React, Next.js, JavaScript, and TypeScript.

I focus on writing clean, maintainable code and ensuring each feature is implemented correctly while aligning closely with the project requirements and design.

I’m confident I can complete this task efficiently within an estimated timeline of two days.

Thank you for your consideration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ReinaMaze 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 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.

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