Konjit-w2-React

week2/project/README.md

@@ -1,26 +1,27 @@
-# Ecommerce Project II
+# Ecommerce Project I
 
 ## 1. Setup
 
-Make sure you created a new week2 branch from the `main` branch of your forked repo. Then copy over the `ecommerce` folder you made last week into the `week2/project` folder. That way any feedback you get for week1 can be changed in the week1 branch and you are free to refactor this week as you see fit. This does mean you may need to apply the same changes to multiple branches, but let's say that that is good for the learning process :).
+The first step to any project is to setup your development environment. Follow the steps:
+
+1. Inside this folder (`week1/project`), use `npm create vite` to create a React application. Give it the name `ecommerce`
+   > You are going to be copying and refactoring your code every week but will simultaneously be getting feedback for previous weeks. As such, at the beginning of every week you copy over the project files from the previous week into a new folder and a new branch. To help you identify if all is well, we suggest keeping it in the week folder that it is a part of.
+2. Copy and paste the folder `fake-data` inside the `src` folder of your new project
 
 ## 2. Requirements
 
-We are going to focus on linking up our app to the API this week. By the end of the assignment your application should work similar to this:
+This week you'll build the foundation of your application. It should eventually look like this:
 
-[![Week 2 Screenshot](../../assets/project/week2.png)](https://hyf-react-w2-example.netlify.app/)
+[![Week 1 Wireframe](../../assets/project/week1.png)](https://hyf-react-w1-example.netlify.app)
 
-There is a live version [here](https://hyf-react-w2-example.netlify.app/)
+There is a live version [here](https://hyf-react-w1-example.netlify.app)
 
-_Note: The API is a fully open API so can be a little slow to respond sometimes. Great for checking your loading UX!_
+We will be using the information in the `fake-data` folder as an example of what we get back from the API. The actual connection to the API will be done next week.
 
 What you need to have done at the end of the week:
 
-- The fake-data directory should not be a part of your project anymore
-- Your app will need to make 2 queries to the following endpoints:
-  - `https://fakestoreapi.com/products/categories` -> To get all the categories
-  - `https://fakestoreapi.com/products` or `https://fakestoreapi.com/products/category/:selectedCategory` -> To get the products. The API needs to do the filtering, not the frontend. Usually the amount of products will be too large to do the filtering on the frontend.
-- Your app needs to show that it is loading when waiting on the request to come back. You can test this by mimicing a slow connection in your browsers' developer tools
-- Your app needs to show an error message if the request failed
-- Your app needs to go to a detail page `/product/:id` whenever you click on the product card in the list. This should get the details from the endpoint: `https://fakestoreapi.com/products/<id>`. For now we won't add a navigation bar, the browsers 'back' button will do the trick. _TIP: You will need to add the `react-router-dom` package and add the routing to your app regardless._
-- You need to deploy your app somewhere (using something like [netlify](https://www.netlify.com)) and put the link in your PR! Make it a different one than the previous week.
+- A product list that displays all of the products in the `all-products` file. _Note: the site is responsive, so have a look at the breakpoints in the deployed example project._
+- A category list that displays all of the categories in the `all-categories` file at the top of the page
+- If the user clicks on a category only the products that have that category in their `category` property should be displayed on the screen. _Note: The categories listed in the product objects do *not* match up exactly with the categories in the categories list. You will have to find a solution to this *without* editing the files_
+- There should only be 1 category active at a time and the user should see which category is selected.
+- You need to deploy your app somewhere (using something like [netlify](https://www.netlify.com)) and put the link in your PR!

week2/project/ecommerce/.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-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

week2/project/ecommerce/README.md

@@ -0,0 +1,12 @@
+# 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
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

week2/project/ecommerce/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+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',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

week2/project/ecommerce/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/public/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HYF Ecommerce App week 1</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>