Remix Bus Scheduling

This is an example application built as a coding challenge for Remix.

See it live @ github.aster.hn/remix-bus-scheduling

Tech used:

• Build: Next.js
• UI components: Chakra UI
• State management: zustand
• Time formatting: dayjs
• Drag interaction: react-dnd
• Bus SVG: adapted from The Noun Project using Sketch

Features / Acceptance Criteria

• The left edge of each rectangle should be positioned according to its start time. The right edge of each rectangle should be positioned according to its end time. Represent each minute as one pixel.
• The height of the rectangle should be the same across all trips.
• The rectangle should display the trip’s id field inside.

---

• A selected trip should be visually distinct from other trips.
• Clicking on an unselected trip should select that trip.
• Clicking on a selected trip should unselect that trip.
• No more than one trip should ever be selected at the same time.
• It should be clear to the user that trips are clickable.

---

• To move a trip between buses, select the trip, then click on the row of the bus you want to move it to.
• Clicking on a trip in another row should still update the selection instead of moving the selected trip.
• It should not be possible to assign a trip to a bus where it would conflict with existing trips.
• Two trips conflict if they overlap at any point other than their endpoints.
• After moving a trip, it should no longer be selected.
• If a bus has no trips assigned to it, it should not be displayed.

---

• When a trip is selected, a new “provisional” row should appear at the bottom of the schedule. This row should be empty.
• Clicking on this row should assign the trip to a new bus.
• When no trip is selected, the provisional row should not be displayed.

---

• Add zebra striping to the rows. Every other row should be a light grey color.
• At the top of the page, add an x-axis, with tick marks on the hour, to make it easier to see when trips start and end.
• At the left side of each row, add a header, containing:
  • A name or identifier for the bus
  • The earliest start time among trips in the bus
  • The latest end time among trips in the bus

---

Additional Polishes:

• Dark mode

• Route dragging between buses

• SVG buses replacing the boxes

• faint vertical dividers per hour

• "ghost" route on select/hover

Development

Setup

nvm use # sets node version to 14
yarn # installs dependencies
yarn start # starts development server (or prod server if ENVIRONMENT=production)

then go to localhost:9898

Note: .env is included in this repo for convenience of setup, standard practice is to omit it

Build + Deploy

yarn build

This will create a new build in /docs (This folder name wasn't my choice, github pages is opinionated for their base folder naming)

Pushing into main branch will deploy automatically to github.aster.hn/remix-bus-scheduling