[WD RMT EU Feb 2023] Peter Sekan Tech Challenge Solve

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "githubPullRequests.ignoredPullRequestBranches": ["main"]
+}

README.md

@@ -1,6 +1,34 @@
+# Tech Challenge: The Phone Cave
+
+This is my solution to the tech challenge given by Ironhack on May 8th, 2023.
+
+## Installation
+
+- clone this repo
+- navigate to the server directory `npm i` and `npm run dev`
+- navigate to the client directory `npm i` and `npm run dev`
+- open your browser and visit `http://localhost:5173/`
+
+## Iteration 1
+
+Solved!
+I’ve built a simple REST API fulfilling the requirements. I have used [Ironlauncher](https://www.npmjs.com/package/ironlauncher) as a starter template and have removed all unecassary source code. I had some CORS issues, but solved it with the [NPM package cors.](https://www.npmjs.com/package/cors)
+
+## Iteration 2
+
+Solved, but not entirely.
+I’ve uses [Vite.js](https://vitejs.dev/) as my framework of choice, in combination with [TailwindCSS](https://tailwindcss.com/). I have missed to make a loading spinner and the phone details are shown on separate pages. With a litte more time like an hour, that would also have been done, but I’ve decided to write a proper ReadMe and provide more information.
+
+## Iteration 3
+
+Solved, at least from my view!
+It’s not rad but it looks good. Both views are responsive using grid layouts.
+
+Following you can read the original Instructions:
+
 # The Phone Cave (WD)
 
-  At The Phone Cave we are looking for someone to help us turn our cave store into a home, and to do so we present you this challenge.
+At The Phone Cave we are looking for someone to help us turn our cave store into a home, and to do so we present you this challenge.
 
 ## The challenge (Duration: 3 hours)
 
@@ -10,27 +38,25 @@ Your task consists of creating an app showing our catalog. Follow the steps deta
 
 Create a REST API (NodeJS) server that meets the following requirements:
 
-
-| Route                 | HTTP Verb | Description    |
-| --------------------- | --------- | -------------- |
-| `/phones`             | GET       | Show all phones (use the `phones.json`) as fake data |
-| `/phones/:id`         | GET       | Show a phone details|
-
+| Route         | HTTP Verb | Description                                          |
+| ------------- | --------- | ---------------------------------------------------- |
+| `/phones`     | GET       | Show all phones (use the `phones.json`) as fake data |
+| `/phones/:id` | GET       | Show a phone details                                 |
 
 ### Iteration #2
 
 Create a React application that communicates with the API you created before. Your React app should be using the **hooks** approach.
+
 - Use Axios (or a similar library) in order to obtain data from the REST API
 - Show a list with all the phones
-- When a phone model is selected from the list, a detailed view of the phone is shown with a few specific details displayed. This display should be on the same page than the list of phones. 
+- When a phone model is selected from the list, a detailed view of the phone is shown with a few specific details displayed. This display should be on the same page than the list of phones.
 - Show a spinner component or a position marker while the API request is processing (display a simulation if there is no loading time)
 
 ### Iteration #3
 
 Make it look **eye-appealing**. There is no need to develop a sophisticated design, but it should not look terrible when viewed from a phone. Add images of each device.
 
-Once done with this, do a pull request to submit your work. 
-
+Once done with this, do a pull request to submit your work.
 
 ## Deadline
 
@@ -41,4 +67,3 @@ In the event that after three hours you do not have the MVP objectives ready, se
 
 - Functioning code (server and client side)
 - Short README file describing what is the app about and add instructions on how to use it.
-

client/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

client/.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?

client/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</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>