SEPTA Fare Calculator - First Iteration

[lovo-h]

Description

The changes in this pull-request implement the first iteration of the SEPTA Fare Calculator.

Test Instructions

Important

Ensure Node v23.11.1 is installed before proceeding with the following instructions.

• Navigate to the./septa-fare-calculator directory.
• Ensure you are using Node v23.11.1 (Optional: Run nvm use).
• Run npm install.
• Run npm start.
• Expect the app to run as follows:

Summary

I spent approximately 8 hours (on and off) working on this app.

I started developing the app's responsive design with mobile-first in mind. However, due to time limitations, I didn't get a chance to add the tablet and desktop designs. That would have been a matter of using CSS breakpoints (e.g. @media (min-width: ...) { ... }) and modifying the CSS values accordingly.

I also left quite a few TODOs that would need to be followed up, given enough time. Here are a few examples:

• Needed to add some Jest tests to ensure functionality and avoid regressions.
• The logic that determines whether there exists bulk discount is hard coded. Ideally this would be dynamic, based around the data.
• The loading and error states are simple. Ideally, they would have better designs.
• I capped the "How many rides will you need?" to 99. However, I would need to confirm that's the desired behavior.
• I would need to coordinate with the backend developer to determine what the shape of the data being sent would look like. At the moment, I assume it would look like the shape of the data in the fares.json file.
• I approximated the font-family of the app. Ideally, it would match the designs.
• DropdownSelect component:
  • Refactor the hardcoded fontSize CSS value. We want to avoid having to update the font-size in more than one place.
• Cost component:
  • Added a "breakdown" section that needs UI/UX approval by design.

I had a chance to test on Google Chrome (including for iOS), Safari (including for iOS), and Microsoft Edge but not Chrome for Android.

Finally, if given more time, I would have liked to spent more time ensuring accessibility. However, I think I covered some of the more important content.

[lovo-h]

Good catch, @andyknapp.

This is where the "1" is being rendered. When I added the "resize width" functionality for the DropDown component, I based the width on the text length for the "When are you riding" dropdown.

However, the changes didn't account for the "Where are you going" drop-down. Hence the "1", since it can't be found in the dayTypeLabelLookup dictionary.

To fix this, I would need something like the following:

import React, { useEffect, useId, useRef } from 'react';
...
function DropDownSelect( { id, label, options, value, helperText, onChange } ) {
  ...
  // Note: May need to be optimized.
  const longestLabel = options.reduce( ( longest, option ) => {
    return option.label.length > longest.length ? option.label : longest;
  }, '' );
  ...
  return (
    <>
      ...
      <span ref={ spanRef } style={ spanStyle }>
        { longestLabel }
      </span>
    </>
  );
}

export default DropDownSelect;