PiggyBack Ride

.

Comment

PiggyBack Ride — Project Notes

Inspiration

PiggyBack Ride was inspired by the need to optimize livestock logistics (farms → slaughterhouses) while giving teams a simple, visual tool to manage entities, run small transport simulations and inspect environmental metrics like carbon footprint.

What it does

  • Manage farms and slaughterhouses (create, edit, delete, import via CSV).
  • Display entities on an interactive map and show per-entity details in popups.
  • Simulate routes between farms and slaughterhouses and surface per-trip and total carbon footprint.
  • Provide a dark-themed, compact UI for quick operations and CSV imports.

How we built it

  • Frontend: React + TypeScript + Vite + Chakra UI for components and styling.
  • Map: Custom map integration with clickable markers and an overlay for entity cards.
  • Data: REST calls to a backend API (/api/farms, /api/slaughterhouses, /api/simulation) — the frontend sends and receives JSON; CSV import uses FormData uploads to /import-csv endpoints.
  • UX: Modal-driven add/edit forms, table views for lists, and CSS + Chakra mix for the dark appearance.

Challenges we ran into

  • ID consistency: some backend records use domain IDs (e.g., farm_id) while others use Mongo _id.
  • Localized browser inputs: the native file input label was localized by the browser; we switched to a hidden input and an English-labeled button to ensure consistent UX in map popups.
  • Backend data shape mismatches: carbon_footprint wasn't always present in simulation responses; we added defensive mapping and collaborated with the backend to standardize the response.

Accomplishments that we're proud of

  • Reusable DeleteConfirm modal across entities.
  • Clean dark-themed Farms and Slaughterhouses pages with separated CSS for maintainability.
  • CSV import flow for both farms and slaughterhouses with client and server hooks.
  • Simulation page showing total and per-route carbon footprints alongside trip data.

What we learned

  • Small UX details (like file input labels and modal color schemes) significantly affect perceived polish.
  • Making frontends resilient to backend variations (IDs, optional fields) reduces friction during integration.
  • Adding lightweight, explicit logging in services makes debugging integrations much faster.

What's next for PiggyBack Ride

  • Frontend: add client-side validation and better error displays for import failures; improve CSV mapping UI so users can map columns to fields.
  • Simulation: add batch simulation runs and historical comparison charts; expose export options for route and carbon reports.

Built With

Share this project:

Updates