diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md new file mode 100644 index 000000000..65551d025 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# SEPTA Rail Fare Calculator Challenge + +Hello! This code challenge using the latest versions of React + Vite (as of 25/09/2025) w/ Typescript on Node (22.17.0). + +## Setup + +```bash +npm install +``` + +## Running the calculator + +```bash +npm run dev +``` + +## Timeline + +* Fork repo +* Initialize Vite-based React project +* Use provided "design" to build HTML prototype +* Style HTML prototype to match "design" +* Break down individual components into modules +* Pull in data locally, then add interactivity to modules/inputs +* Add some user-friendly functionality/notices +* Swap local data for async data (from this repo) + +## Thoughts + +The design and challenge were straight forward, but some things were omitting for the sake of the time constraints. If this were a real project (and with more time), I would recommend going to the "design/copywriting" team and work out the specific wording on the non-SEPTA provided helper text, as well as some user-friendly additions like a savings notice for onboard vs kiosk purchases. + +## Outstanding issues + +* Lack of proper testing. Most was done in-situ by hand while developing. +* Some of the values are hard-coded or decentralized. Expanding the extra `data.json` file could prove beneficial for centralized updates parallel to potential `fares.json` updates. +* The number input has themed, but non-working sliding buttons due to time constraints. +* Additionally, the number input has a max value, but no limit on user input. +* CSS is not modular, but should still be widget-friendly. +* At least one explicit use of "any" type to save time. diff --git a/septa-fare-calculator/README.md b/septa-fare-calculator/README.md deleted file mode 100644 index 5b0bd5ee6..000000000 --- a/septa-fare-calculator/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# SEPTA Rail Fare Calculator Challenge - -Hello, hopeful Think Company development team member! - -Thank you for taking time to help us assess your front-end development skills. Part of the work we frequently are tasked with is combining complex business data with our design team's fresh new interfaces. Our development team makes these come to life with semantic, accessible HTML, CSS, and JavaScript. All of our philosophies are documented in [our development standards](https://standards.thinkcompany.dev/). - -Your challenge is to create an interactive widget for calculating SEPTA Regional Rail fare prices. (In case you're not familiar with Philadelphia's preeminent mass transit agency, here are all the railroads in map form.) - - - -When you take regional rail in and out of the city, the fare price is affected by where you purchase the ticket, when you ride, and how far you travel. You can learn more about the details on [SEPTA's website](http://www.septa.org/fares/ticket/index.html) -- or trust that we've correctly compiled this information into this [JSON file](fares.json). We'd like you to make this information easier to understand by making an interactive fare purchase widget, illustrated in the screenshot below. - - - -## Instructions -* Visit our [careers page](https://www.thinkcompany.com/careers/) and apply for one of our open positions so we have your contact information along with your pull request. -* Develop the HTML and CSS for the widget seen in the screenshot above. Feel free to make this responsive, and keep accessibility in mind: screen readers should handle the form, helper text, and any other important content well. -* Assume that your code would be handed off to a back-end developer for integration. It could end up on a page with other content and widgets, so keep this in mind when you are making decisions about naming conventions. -* Write JavaScript to request [fares.json](fares.json) via AJAX and populate the widget with live data. End users should be able to see the fare total update when they use the widget controls. Think hard about the data format before starting - what does "anytime" mean, and what's the most elegant way to let users know about special pricing for items like 10-trip tickets? -* We plan on looking at the balance of your HTML, CSS, and JS, but we'd rather see a partially-styled working prototype than a pixel-perfect widget that isn't doing fare calculations. Try to balance your time appropriately! -* It should go without saying - please comment your code to state any assumptions or decisions you're making during this assignment -- or just to say hi. :-) - -## Requirements -* *Browser Support*: Microsoft Edge, Google Chrome, Firefox, Safari for iOS, and Chrome for Android. -* *Libraries & Frameworks*: You are welcome to bring in JavaScript libraries (like jQuery) or frameworks (like Angular, React or Polymer). You may also author your JS with vanilla DOM methods, as long as they are compatible with the browser requirements. Please don't include an entire CSS framework like Bootstrap -- we want to see your HTML and CSS, not theirs. -* *Standards*: Your solution should be valid, semantic, accessible, and performant. To get an idea of what how we're doing things, please feel free to review [our development standards](https://standards.thinkcompany.dev/). -* *Time*: We don't expect you to overexert yourself to deliver a perfectly finished product, but want to allow you take the time you think you need to show your stuff. We recommend spending a couple of hours, but let us know how much time you spend if you decide to take more time. -* *Submission*: Fork this repository and make a pull request for us to review your code. If you're not familiar with git or Github, you can download this repo and send us a ZIP file when you're done. - -## Resources -* [Think Company Development Standards](https://standards.thinkcompany.dev/) -* [SEPTA Fares](http://www.septa.org/fares/ticket/index.html) -* [SEPTA Logo (SVG)](https://commons.wikimedia.org/wiki/File:SEPTA.svg) diff --git a/septa-fare-calculator/eslint.config.js b/septa-fare-calculator/eslint.config.js new file mode 100644 index 000000000..aaa79ae03 --- /dev/null +++ b/septa-fare-calculator/eslint.config.js @@ -0,0 +1,28 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + }, + { + rules:{ + "jsx-quotes": ['error', 'prefer-double'], + } + } +]) diff --git a/septa-fare-calculator/img/widget.png b/septa-fare-calculator/img/widget.png deleted file mode 100644 index 141f1d952..000000000 Binary files a/septa-fare-calculator/img/widget.png and /dev/null differ diff --git a/septa-fare-calculator/img/zone-map.jpg b/septa-fare-calculator/img/zone-map.jpg deleted file mode 100644 index 3aa094802..000000000 Binary files a/septa-fare-calculator/img/zone-map.jpg and /dev/null differ diff --git a/septa-fare-calculator/index.html b/septa-fare-calculator/index.html index ba1a762c9..2d44807cf 100644 --- a/septa-fare-calculator/index.html +++ b/septa-fare-calculator/index.html @@ -1,10 +1,13 @@ -
- -