feat: modernize the react starter app

.gitignore

@@ -3,6 +3,7 @@
 # dependencies
 /server/node_modules
 /ui/node_modules
+/ui/.eslintcache
 /.pnp
 .pnp.js
 

README.md

@@ -32,8 +32,9 @@ As you can see in the screenshot, the lead cards follow a similar format and con
 * Contact email
 
 ### Notes
-* For the icons in the UI, you can use something like font-awesome or SVG icons, whatever you choose.
+* For the icons in the UI, you can use something like SVG icons or font-awesome, whatever you choose.
 * There are jobs already loaded into the database
+* Feel free to use your own styling solution: CSS-in-JS (styled-components, emotion, etc), CSS Modules, Tailwind, plain CSS or Sass.
 
 ## Getting Started
 We have provided a bit of boilerplate code that you can use to get started.  You are **not** required to use this boilerplate, so feel free to throw it all away and start fresh if you prefer.

ui/package.json

@@ -2,11 +2,6 @@
   "name": "hipages-tech-test-full-stack-engineer-ui",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-scripts": "2.1.2"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -21,5 +16,15 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "typescript": "^4.1.2"
+  }
 }

ui/src/App.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function App() {
+  return (
+    <div>
+      Edit a file and save to reload.
+    </div>
+  );
+};

ui/src/index.css

@@ -1,7 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700");
 
-/* $primary: #ff7b11; */
-
 body {
   color: #303034;
   margin: 0;

ui/src/index.js → ui/src/index.tsx

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));

ui/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

ui/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}