feat(widget): implement the widget of septa rails fare calculator

[jsninja777]

Implement the code challenge of SEPTA Regional Rails Fare Calculator

Tech Stacks:

• Typescript
• create-react-app
• SCSS
• Atomic Pattern to build the components

Code Structure:

• src/components: includes all components with atomic pattern that consist of the project.
• src/styles: uses SCSS format to build the nested and structured styles. Created a couple of variables, mixin and functions to reuse in the styles.
• src/types: includes the interfaces that used in the project (fetching and manipulating the fare data).
• src/hooks: includes the hook to handle the API to fetch the SEPTA fare data.
• src/libs: includes the helper functions.

Logic of calculating the fare cost:

We have the prices by zone, type and purchase. But specifically, we have the price for anytime with specific trip count.
When user inputs the trips that he/she wants to get the cost, we need to think of the best match of these special price (with enough trips) + normal price (with the rest of trips). Check it out here

Accessibility

Briefly check with the lighthouse of Google Chrome. (100% score of Accessibility)