thinkcompany · mroosa · Sep 25, 2025 · Sep 25, 2025 · Sep 25, 2025 · Sep 25, 2025
diff --git a/.gitignore 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
@@ -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
diff --git a/septa-fare-calculator/eslint.config.js 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
diff --git a/septa-fare-calculator/img/zone-map.jpg b/septa-fare-calculator/img/zone-map.jpg
diff --git a/septa-fare-calculator/index.html b/septa-fare-calculator/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<title>SEPTA Regional Rail Fare Calculator</title>
-</head>
-<body>
-
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/septa-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Septa Fare Calculator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>