Done!

README.md

@@ -1,6 +1,6 @@
 ![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)
 
-# LAB | React IronProfile
+# LAB | Profile App
 
 
 The profile page is one of the most common features you will need to add to your projects. Today we are going to practice creating one.
@@ -15,7 +15,7 @@ We will create a backend REST API using NodeJS and a front-end app using React w
 - Clone this repo
 
 ```shell
-$ cd lab-profile-app
+cd lab-profile-app-vite
 ```
 
 ## Submission
@@ -63,15 +63,21 @@ Remember to test the REST API using Postman to make sure everything is working!
 
 ### Iteration 2 | The React App
 
-Create a new React App using the command `npx create-react-app profile-app-client`. 
+Create a new React App using the command:
+
+```bash 
+npm create vite@latest profile-app-client -- --template react
+```
+
+
 
 Once done, set up the app routing using the `react-router-dom`. Create a page component called `HomePage` that displays two buttons: `Sign up` and `Log in`. Buttons should redirect to the front-end routes `/signup` and `/login`, respectively.
 
 ![image](https://user-images.githubusercontent.com/23629340/43786924-1c5d3d5a-9a6a-11e8-90c4-7ff2f92ef983.png)
 
 <br>
 
-All the assets you need for the design are stored inside the `assets/` folder. For now, don't worry about the design, but rather focus on the functionality!
+All the assets you need for the design are stored inside the `images/` folder. You should copy them to the `assets/` folder of your React app.  But don't worry about the design yet - just focus on making things work first!
 
 
 
@@ -99,7 +105,7 @@ You should create a new folder named `context/` and inside of it a file `auth.co
 2. The `AuthProviderWrapper` component should have the following state variables for storing user information and authentication state: `isLoggedIn`, `isLoading`, and `user` ([example](https://github.com/ironhack-labs/lesson-code-h-react-authentication-frontend/blob/master/src/context/auth.context.js#L9-L11)).
 
 3. The `AuthProviderWrapper` component should also have functions `storeToken`, `authenticateUser`,  `removeToken` and `logOutUser` used for handling the authentication logic ([example](https://github.com/ironhack-labs/lesson-code-h-react-authentication-frontend/blob/master/src/context/auth.context.js#L13-L59)). 
-   
+
    You will need to provide the above mentioned state values and functions through the Context Provider's `value` prop ([example](https://github.com/ironhack-labs/lesson-code-h-react-authentication-frontend/blob/master/src/context/auth.context.js#L71)).
 
 4. Finally, remember to wrap the `<App />` component with the `<AuthProviderWrapper></AuthProviderWrapper>` ([example](https://github.com/ironhack-labs/lesson-code-h-react-authentication-frontend/blob/master/src/index.js#L15-L17)).
@@ -132,7 +138,7 @@ Create an `auth.service.js` file, where you will have the functions that abstrac
 ### Iteration 7 (Bonus) | Styling your App
 
 Feel free to style the app anyway you see fit. :art:
-Or you can use the `.png`  available in the `assets/` folder, as a background image. Remember to include the image in the `src/` folder of your React app to be able to import it. Here you can check the colors:
+Or you can use the `.png`  available in the `images/` folder, as a background image. Remember to include the image in the `src/assets/` folder of your React app to be able to import it. Here are the colors used in the design:
 
 - Gradient background color: `#C1DFC4` to `#DEECDD`
 - Green: `#638165`

profile-app-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?

profile-app-client/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

profile-app-client/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

profile-app-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>