Skip to content

LidiiaStarshynova-w1-React #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 2 additions & 17 deletions week1/project/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
# Ecommerce Project I

## 1. Setup

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

This week you'll build the foundation of your application. It should eventually look like this:

[![Week 1 Wireframe](../../assets/project/week1.png)](https://hyf-react-w1-example.netlify.app)

There is a live version [here](https://hyf-react-w1-example.netlify.app)

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:

Expand All @@ -25,3 +8,5 @@ What you need to have done at the end of the week:
- 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!

## [The firs version on the app](https://ls-products-ver1.netlify.app/)
24 changes: 24 additions & 0 deletions week1/project/ecommerce/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
1 change: 1 addition & 0 deletions week1/project/ecommerce/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## [The firs version on the app](https://ls-products-ver1.netlify.app/)
40 changes: 40 additions & 0 deletions week1/project/ecommerce/dist/assets/index-B61b53eL.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions week1/project/ecommerce/dist/assets/index-BJNyhR2r.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions week1/project/ecommerce/dist/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!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>
<script type="module" crossorigin src="./assets/index-B61b53eL.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BJNyhR2r.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
1 change: 1 addition & 0 deletions week1/project/ecommerce/dist/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions week1/project/ecommerce/eslint.config.js
Original file line number Diff line number Diff line change
@@ -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 },
],
},
},
]
13 changes: 13 additions & 0 deletions week1/project/ecommerce/index.html
Original file line number Diff line number Diff line change
@@ -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>
Loading