first commit

tomasreichmann · Oct 10, 2022 · 3c005bb · 3c005bb
1 parent 0e03016
commit 3c005bb
Show file tree

Hide file tree

Showing 16 changed files with 674 additions and 66 deletions.
diff --git a/app.css b/app.css
@@ -0,0 +1,20 @@
+body {
+  font-family: sans-serif;
+  background-color: #1c1c1e;
+  color: #d0cd9a;
+  padding: 5px;
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+}
+
+.assignment section {
+  position: relative;
+}
+
+.assignment img {
+  max-width: 100%;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,11 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+
+import "../app.css";
+import "../src/components/Vehicles.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/pages/api/vehicles.ts b/pages/api/vehicles.ts
@@ -0,0 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import vehicles from "../../vehicles.json";
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<typeof vehicles>
+) {
+  setTimeout(() => {
+    res.status(200).json(vehicles);
+  }, 1000);
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,72 +1,23 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Assignments from "../src/Assignments";
+import Vehicles from "../src/components/Vehicles";
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <div className="columns assignment">
       <Head>
-        <title>Create Next App</title>
+        <title>WG Job Interview</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
+      <div>
+        <Vehicles />
+      </div>
+      <Assignments initialAssignment={1} />
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/public/czech.png b/public/czech.png
diff --git a/public/heavytank.svg b/public/heavytank.svg
diff --git a/public/lighttank.svg b/public/lighttank.svg
diff --git a/public/list.png b/public/list.png
diff --git a/public/mediumtank.svg b/public/mediumtank.svg
diff --git a/src/Assignments.tsx b/src/Assignments.tsx
@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+const assignments = [
+  <section>
+    <h2>Assignment #1: Style the list</h2>
+    <p className="important">
+      Code the folowing static content in /src/components/Vehicles.tsx according
+      to design. Images are in /public
+    </p>
+    <img src="/list.png" alt="" width="500" />
+    <h3>Bonus questions</h3>
+    <ol>
+      <li>How to make vehicle class SVGs respect text color?</li>
+      <li>
+        How prevent styles in Vehicles.css influencing the rest of the app?
+      </li>
+    </ol>
+  </section>,
+  <section>
+    <h2>Assignment #2: Generate the list from JSON</h2>
+    <p className="important">
+      Update /src/components/Vehicles.tsx to use:&ensp;
+      <code>import vehicles from "../../vehicles.json";</code>
+      &ensp;instead of hardcoded data
+    </p>
+    <h3>Bonus questions</h3>
+    <ol>
+      <li>
+        Have a look at src/components/getRomanNumerals.ts and try to finish the
+        implementation.
+      </li>
+      <li>
+        How would you recommend to update the Vehicles component if there were
+        thousands of vehicles in the list?
+      </li>
+    </ol>
+  </section>,
+  <section>
+    <h2>Assignment #3: Filter the list</h2>
+    <p className="important">
+      Update /src/components/Vehicles.tsx to filter the list by a text input.
+    </p>
+    <h3>Bonus questions</h3>
+    <ol>
+      <li>
+        How would you lower server load, if the filtering was done on the
+        server?
+      </li>
+      <li>
+        What would you have to watch out for, if the filtering was done on the
+        server and the server response time was very irregular? How would you
+        deal with it?
+      </li>
+    </ol>
+  </section>,
+  <section>
+    <h2>Assignment #4: Get list data asynchroneously</h2>
+    <p className="important">
+      Update /src/components/Vehicles.tsx to use:&ensp;
+      <code>{`const { data, error } = useVehicles();`}</code>
+      &ensp;from /src/useVehicles.ts
+    </p>
+    <h3>Bonus questions</h3>
+    <ol>
+      <li>
+        How would improve UX experience, if the API was slow and unreliable?
+      </li>
+      <li>
+        How would you reduce the loading interval, if the list had a lot of
+        entries?
+      </li>
+    </ol>
+  </section>
+];
+
+const Assignments = ({ initialAssignment }: { initialAssignment: number }) => {
+  const [currentIndex, setCurrentIndex] = useState(initialAssignment - 1);
+
+  return (
+    <div>
+      <style scoped>{`
+        .important {
+          font-size: 1.5em;
+          color: white;
+        }
+        h3 {
+          border-top: 1px solid grey;
+          padding-top: 20px;
+        }
+      `}</style>
+      Show assignment:&ensp;
+      {assignments.map((assignment, assignmentIndex) => {
+        return (
+          <button
+            key={assignmentIndex}
+            onClick={() => setCurrentIndex(assignmentIndex)}
+          >
+            {assignmentIndex === currentIndex ? (
+              <strong>{assignmentIndex + 1}</strong>
+            ) : (
+              assignmentIndex + 1
+            )}
+          </button>
+        );
+      })}
+      {assignments[currentIndex]}
+    </div>
+  );
+};
+
+export default Assignments;
diff --git a/src/components/Vehicles.css b/src/components/Vehicles.css
@@ -0,0 +1,60 @@
+.Vehicles {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.Vehicle {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.Vehicle__premium {
+}
+
+.Vehicle_nation {
+}
+
+.Vehicle_flag {
+}
+
+.Vehicle_flag__czech {
+  /* 29x18 /czech.png */
+}
+
+.Vehicle_type {
+}
+
+.Vehicle_type_icon {
+}
+/* 11x13 /lighttank.svg */
+.Vehicle_type_icon__lighttank {
+}
+
+/* 12x15 /mediumtank.svg */
+.Vehicle_type_icon__mediumtank {
+}
+
+/* 12x15 /mediumtank.svg */
+.Vehicle_type_icon__mediumtank-prem {
+}
+
+/* 15x18 /heavytank.svg */
+.Vehicle_type_icon__heavytank-prem {
+}
+
+.Vehicle_tier {
+}
+
+.Vehicle_tier_text {
+}
+
+.Vehicle_title {
+}
+
+.Vehicle_shape {
+}
+
+.Vehicle_name {
+}