Solved Lab

.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  env: { browser: true, es2020: true, node: 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",
+    "react/prop-types": 0,
+    "no-unused-vars": false
+  },
+};

README.md

@@ -40,9 +40,9 @@ Your task is to create a contact management app for the producer using React.
 - Open the LAB and start:
 
   ```bash
-  $ cd lab-react-ironcontacts
-  $ npm install
-  $ npm start
+  cd lab-react-ironcontacts-vite
+  npm install
+  npm run dev
   ```
 
 
@@ -56,22 +56,34 @@ Your task is to create a contact management app for the producer using React.
   git push origin master
   ```
 
-- Create a Pull Request so that your TAs can check your work.
+- Create a Pull Request and submit your assignment.
 
+<br>
 
-## Getting Started
+##  Test Your Code
 
-Clean the `App.js` component so that it has the following structure:
+This lab is equipped with unit tests to provide automated feedback on your progress and help you understand whether your code is working as expected. If you want to check the tests, they are located in the `src/test` folder.
 
-```jsx
-// src/App.js
-import "./App.css";
 
-function App() {
-  return <div className="App"></div>;
-}
-export default App;
-```
+### Iterations and Test Results
+
+During an iteration, if your code seems to work as expected but some tests don't pass, feel free to move on to the next iteration. Once you've completed all the mandatory iterations, you can go back and resolve any remaining failed test
+
+<br>
+
+### Run the Tests
+
+1. To execute the tests, run the following command in the terminal:
+
+   ```shell
+   npm run test
+   ```
+
+2. The above command will execute the tests and open the `@vitest/ui` Test Reporter in the browser. 
+
+3. To see the test results, **open** [http://127.0.0.1:51204/\_\_vitest\_\_](http://127.0.0.1:51204/__vitest__) in your browser.
+
+<br>
 
 ## Instructions
 
@@ -95,29 +107,37 @@ import contacts from "./contacts.json";
 
 At the end of this iteration, your application should look like this:
 
+<br>
+
 <details>
-  <summary> Check image inside </summary>
+  <summary><b>See Expected Result</b></summary>
 
 ![Screenshot - Iteration 1](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-react-ironcontacts-1.png)
 
 </details>
 
+<br>
+
 ### Iteration 2 | Conditionally Display Awards Info
 
 The producer would like to see the information about the _awards_ that contact has won.
 
-Update the list and add two more columns "Won an Oscar" and "Won an Emmy", at the end of the table. Then, depending on the value `wonOscar` and `wonEmmy` of each contact, conditionally render a trophy icon :trophy: or no content.
+Update the list and add two more columns **"Won an Oscar"** and **"Won an Emmy"**, at the end of the table. <br> In the "Won an Oscar" column, conditionally render a trophy icon 🏆 or no content based on the `wonOscar` property. <br> For the "Won an Emmy" column, conditionally render a star icon 🌟 or no content, depending on the value of the `wonEmmy` property.
 
 Once done, your application should look like this:
 
+<br>
+
 <details>
 
-<summary>Check image inside</summary>
+<summary><b>See Expected Result</b></summary>
 
 ![Screenshot - Iteration 2](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-react-ironcontacts-2.png)
 
 </details>
 
+<br>
+
 ### Iteration 3 | Add New Random Contacts
 
 In your application, create a _Add Random Contact_ button. Every time you click on this button, it should add a new random contact to the `contacts`. You should get random contacts from the remaining contacts that are still not showing.
@@ -126,13 +146,17 @@ First, randomly select a contact from the array of remaining contacts. Then add
 
 At the end of this iteration, your website will probably look like this:
 
+<br>
+
 <details>
-  <summary> Check image inside </summary>
+  <summary><b>See Expected Result</b></summary>
 
 ![Screenshot - Iteration 3](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-react-ironcontacts-3.png)
 
 </details>
 
+<br>
+
 ### Iteration 4 | Sort Contacts by Name and Popularity
 
 The producer asked you to add two new buttons to help them sort their contacts. When you click on one of the buttons, it should **sort the table by `name`** (alphabetically), and when you click the other, it should **sort by `popularity`** (highest first).
@@ -141,13 +165,17 @@ Once you have sorted the array, remember to update the state variable holding th
 
 This is what you should have at the end of this iteration:
 
+<br>
+
 <details>
-  <summary> Check image inside </summary>
+  <summary><b>See Expected Result</b></summary>
 
 ![Screenshot - Iteration 4](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-react-ironcontacts-4.png)
 
 </details>
 
+<br>
+
 ### Iteration 5 | Remove Contacts
 
 The producer also would like to remove some of their contacts. Implement a _Delete_ button on each row of your `<table>` that will let the user remove the contact they clicked.
@@ -156,14 +184,18 @@ When they click, you should get the `id` of that actor and use it to remove the
 
 When done, your app should look like this (after playing a little bit with the _Delete_ button):
 
+<br>
+
 <details>
-  <summary> Check image inside </summary>
+  <summary><b>See Expected Result</b></summary>
 
 ![Screenshot - Iteration 5](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-react-ironcontacts-5.png)
 
 </details>
 
-### Iteration 6 | Bonus | Styling
+<br>
+
+### Bonus: Iteration 6 | Styling
 
 Unfortunately, this contact list isn't production-ready. We are in the movie business! It has to sparkle! Add some beautiful CSS to make the app "pop".
 

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