Exygy · chadbrokaw-exygy · Apr 7, 2023 · Apr 14, 2023 · Apr 14, 2023 · Apr 14, 2023
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,34 @@
+{
+  "name": "Exygy FrontEnd Assessment Part 1",
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "hostRequirements": {
+    "cpus": 4
+  },
+  "waitFor": "onCreateCommand",
+  "updateContentCommand": "yarn install",
+  "postCreateCommand": "",
+  "postAttachCommand": {
+    "setup": "yarn setup",
+    "server": "yarn run dev"
+  },
+  "customizations": {
+    "codespaces": {
+      "openFiles": [
+        "README.md"
+      ]
+    },
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  },
+  "forwardPorts": [3000],
+  "portsAttributes": {
+    "3000": {
+      "label": "React App",
+      "onAutoForward": "openPreview"
+    }
+  },
+}
diff --git a/.devcontainer/icon.svg b/.devcontainer/icon.svg
diff --git a/.gitignore b/.gitignore
@@ -1,21 +1,23 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# production
-/build
+node_modules
+dist
+dist-ssr
+*.local
 
-# misc
+# Editor directories and files
+!.vscode/extensions.json
+.idea
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "terminal.integrated.sendKeybindingsToShell": true
+}
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 # Exygy Frontend Assessment
 
-This project was initialized with [Create React App](https://github.com/facebook/create-react-app) and Typescript.
+This project was initialized with [Vite](https://vitejs.dev/) and Typescript.
 
 [Bloom](https://www.exygy.com/housing) is an Exygy product that helps people learn about and apply for affordable housing listings. Taking inspiration from Bloom, this assessment asks you to build a visual directory of housing listings.
 
 We want you to use this repo as a starting point to build a single page application using React that displays the included mock listing data in a vertical list where each listing looks like the card in [this Figma file](https://www.figma.com/file/tN29n4dzig6pHz9uNIygcD/Frontend-Skills-Assessment?node-id=0%3A1). The password for file access is `best_of_luck!`.
 
 Your result doesn’t have to be pixel-perfect, but we are interested in seeing how closely and cleanly you can recreate the design. This kind of ask is something you would find yourself doing in this role.
 
-Create React App sets up Jest and React Testing Library for you if you would like to write unit tests, but we are not asking for unit tests.
+We have installed Jest and React Testing Library if you would like to write unit tests, but we are not asking for unit tests.
 
 We know that any at-home work in an interview process requires your time, and we want to be respectful of that time while also ensuring this role is a good fit for you. Please do not spend more than 3 hours on this assessment. If you run out of time to complete what you wanted, that’s okay! We look forward to having a conversation with you about what you completed.
 
@@ -22,7 +22,7 @@ You can share your project with us as a repo on GitHub (@seanmalbert, @ludtkemor
 
 In the project directory, you can run:
 
-### `yarn start`
+### `yarn dev`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,60 +1,29 @@
 {
-  "name": "testing-assessment",
-  "version": "0.1.0",
+  "name": "frontend-assessment-part-1",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "setup": "./scripts/init.sh"
+  },
   "dependencies": {
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2"
+    "sass": "^1.62.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "json-loader": "^0.5.7",
-    "prettier": "^2.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "sass": "^1.55.0",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
-  },
-  "prettier": {
-    "singleQuote": false,
-    "printWidth": 100,
-    "semi": false
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "jsdom": "^21.1.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vitest": "^0.30.1"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/scripts/init.sh b/scripts/init.sh
@@ -0,0 +1,26 @@
+#! /bin/bash
+BRed='\033[1;31m'
+NC='\033[0m' # No Color
+On_Purple='\033[45m'
+BPurple='\033[1;35m'
+
+echo -e "${BRed}Hello :) You are about to start on the first part of the Exygy Front End Interview${NC}\n"
+echo "Let's set everything up..."
+echo "Please type the first two letters of your first name and first two letters of your last name. For example, Jane Appleseed would type jaap."
+
+read initials
+
+while true; do
+    echo -e "\nYou've inputted: ${On_Purple}$initials${NC}. \n"
+    read -p "Does that look right? " yn
+    case $yn in
+        [Yy]* ) echo -e "\nCreating branch and pushing to origin..."; git checkout -b $initials; git push --set-upstream origin $initials; break;;
+        [Nn]* ) read -p "Okay! No worries. Please type it again " initials exit;;
+        * ) echo "Please answer y or n.";;
+    esac
+done
+
+echo -e "You are all set up. \nWe recommend committing and pushing often (we won't look at your commit log). When you are ready to submit please make a pull request against main.\n"
+
+echo -e "${BPurple}Good luck <3${NC}"
+
diff --git a/src/Listings.test.tsx b/src/Listings.test.tsx
@@ -4,4 +4,4 @@ import { Listings } from "./Listings"
 
 test("Example", () => {
   render(<Listings />)
-})
+})
diff --git a/src/Listings.tsx b/src/Listings.tsx
@@ -30,5 +30,5 @@ export interface Listing {
 export const Listings = () => {
   const listingData = mockData as Listing[]
   // Please use this component as the root of your solution
-  return null
-}
+  return <h1>Good Luck!</h1>
+}
diff --git a/src/components/ImageBlock.scss b/src/components/ImageBlock.scss
@@ -2,32 +2,31 @@
 // You may choose to write your own CSS
 
 .image-block {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  position: relative;
-  margin-right: 0;
-  margin-bottom: var(--size-5);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    position: relative;
+    margin-right: 0;
+    margin-bottom: var(--size-5);
 
-  @media (min-width: 1024px) {
-    margin-right: var(--size-5);
-    margin-bottom: 0;
-  }
+    @media (min-width: 1024px) {
+        margin-right: var(--size-5);
+        margin-bottom: 0;
+    }
 
-  img {
-    max-width: 100%;
-    border-radius: var(--size-1) var(--size-1) 0px 0px;
-  }
+    img {
+        max-width: 100%;
+        border-radius: var(--size-1) var(--size-1) 0px 0px;
+    }
 
-  .deadline {
-    background-color: var(--color-blue-500);
-    color: var(--color-white);
-    padding: var(--size-4);
-    font-size: var(--size-3_5);
-    border-radius: 0px 0px var(--size-1) var(--size-1);
-  }
+    .deadline {
+        background-color: var(--color-blue-500);
+        color: var(--color-white);
+        padding: var(--size-4);
+        font-size: var(--size-3_5);
+        border-radius: 0px 0px var(--size-1) var(--size-1);
+    }
 
-  .label-container {
-  }
-}
+    .label-container {}
+}
diff --git a/src/components/ImageBlock.tsx b/src/components/ImageBlock.tsx
@@ -22,4 +22,4 @@ export const ImageBlock = (props: ImageBlockProps) => {
       <div className={"deadline"}>{`Application Deadline: ${props.deadline}`}</div>
     </div>
   )
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ import { Listings } from "./Listings" @@
     test("Example", () => {
       render(<Listings />)
-    })
+    })