├── 01-birthday-reminder ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── List.js │ │ ├── data.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── List.js │ ├── data.js │ ├── index.css │ └── index.js ├── 02-tours ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Loading.js │ │ ├── Tour.js │ │ ├── Tours.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Loading.js │ ├── Tour.js │ ├── Tours.js │ ├── index.css │ └── index.js ├── 03-reviews ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Review.js │ │ ├── data.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Review.js │ ├── data.js │ ├── index.css │ └── index.js ├── 04-accordion ├── final │ ├── .gitignore │ ├── README.md │ ├── idea.png │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Question.js │ │ ├── data.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── idea.png │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Question.js │ ├── data.js │ ├── index.css │ └── index.js ├── 05-menu ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── item-1.jpeg │ │ │ ├── item-10.jpeg │ │ │ ├── item-2.jpeg │ │ │ ├── item-3.jpeg │ │ │ ├── item-4.jpeg │ │ │ ├── item-5.jpeg │ │ │ ├── item-6.jpeg │ │ │ ├── item-7.jpeg │ │ │ ├── item-8.jpeg │ │ │ └── item-9.jpeg │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Categories.js │ │ ├── Menu.js │ │ ├── data.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── images │ │ ├── item-1.jpeg │ │ ├── item-10.jpeg │ │ ├── item-2.jpeg │ │ ├── item-3.jpeg │ │ ├── item-4.jpeg │ │ ├── item-5.jpeg │ │ ├── item-6.jpeg │ │ ├── item-7.jpeg │ │ ├── item-8.jpeg │ │ └── item-9.jpeg │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Categories.js │ ├── Menu.js │ ├── data.js │ ├── index.css │ └── index.js ├── 06-tabs ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 07-lorem-ipsum ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── data.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── data.js │ ├── index.css │ └── index.js ├── 08-color-generator ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── SingleColor.js │ │ ├── index.css │ │ ├── index.js │ │ └── utils.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── SingleColor.js │ ├── index.css │ ├── index.js │ └── utils.js ├── 09-grocery-bud ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── Alert.js │ │ ├── App.js │ │ ├── List.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── Alert.js │ ├── App.js │ ├── List.js │ ├── index.css │ └── index.js ├── 10-navbar ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Navbar.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Navbar.js │ ├── data.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── 11-sidebar-modal ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Home.js │ │ ├── Modal.js │ │ ├── Sidebar.js │ │ ├── context.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Home.js │ ├── Modal.js │ ├── Sidebar.js │ ├── context.js │ ├── data.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── 12-cocktails ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── _redirects │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Cocktail.js │ │ ├── CocktailList.js │ │ ├── Hero.js │ │ ├── Loading.js │ │ ├── Navbar.js │ │ └── SearchForm.js │ │ ├── context.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── pages │ │ ├── About.js │ │ ├── Error.js │ │ ├── Home.js │ │ └── SingleCocktail.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── _redirects │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ ├── Cocktail.js │ ├── CocktailList.js │ ├── Loading.js │ ├── Navbar.js │ └── SearchForm.js │ ├── context.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── pages │ ├── About.js │ ├── Error.js │ ├── Home.js │ └── SingleCocktail.js ├── 13-markdown-preview ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── testing.png │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── testing.png │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 14-pagination ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Follower.js │ │ ├── index.css │ │ ├── index.js │ │ ├── useFetch.js │ │ └── utils.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Follower.js │ ├── index.css │ ├── index.js │ ├── useFetch.js │ └── utils.js ├── 15-movie-db ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Home.js │ │ ├── Movies.js │ │ ├── SearchForm.js │ │ ├── SingleMovie.js │ │ ├── context.js │ │ ├── index.css │ │ ├── index.js │ │ └── useFetch.js └── setup │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── Home.js │ ├── Movies.js │ ├── SearchForm.js │ ├── SingleMovie.js │ ├── context.js │ ├── index.css │ └── index.js └── README.md /01-birthday-reminder/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/README.md: -------------------------------------------------------------------------------- 1 | ## Idea 2 | 3 | [https://uidesigndaily.com/](https://uidesigndaily.com/posts/sketch-birthdays-list-card-widget-day-1042) 4 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/final/public/favicon.ico -------------------------------------------------------------------------------- /01-birthday-reminder/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/final/public/logo192.png -------------------------------------------------------------------------------- /01-birthday-reminder/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/final/public/logo512.png -------------------------------------------------------------------------------- /01-birthday-reminder/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import data from './data' 3 | import List from './List' 4 | function App() { 5 | const [people, setPeople] = useState(data) 6 | return ( 7 |
8 |
9 |

{people.length} birthdays today

10 | 11 | 12 |
13 |
14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/src/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const List = ({ people }) => { 4 | return ( 5 | <> 6 | {people.map((person) => { 7 | const { id, name, age, image } = person; 8 | return ( 9 |
10 | {name} 11 |
12 |

{name}

13 |

{age} years

14 |
15 |
16 | ); 17 | })} 18 | 19 | ); 20 | }; 21 | 22 | export default List; 23 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 1, 4 | name: 'Bertie Yates', 5 | age: 29, 6 | image: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg', 8 | }, 9 | { 10 | id: 2, 11 | name: 'Hester Hogan', 12 | age: 32, 13 | image: 14 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg', 15 | }, 16 | { 17 | id: 3, 18 | name: 'Larry Little', 19 | age: 36, 20 | image: 21 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg', 22 | }, 23 | { 24 | id: 4, 25 | name: 'Sean Walsh', 26 | age: 34, 27 | image: 28 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg', 29 | }, 30 | { 31 | id: 5, 32 | name: 'Lola Gardner', 33 | age: 29, 34 | image: 35 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg', 36 | }, 37 | ]; 38 | -------------------------------------------------------------------------------- /01-birthday-reminder/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/README.md: -------------------------------------------------------------------------------- 1 | ## Idea 2 | 3 | [https://uidesigndaily.com/](https://uidesigndaily.com/posts/sketch-birthdays-list-card-widget-day-1042) 4 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/setup/public/favicon.ico -------------------------------------------------------------------------------- /01-birthday-reminder/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/setup/public/logo192.png -------------------------------------------------------------------------------- /01-birthday-reminder/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/01-birthday-reminder/setup/public/logo512.png -------------------------------------------------------------------------------- /01-birthday-reminder/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import data from './data'; 3 | import List from './List'; 4 | function App() { 5 | return

reminder project setup

; 6 | } 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/src/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const List = () => { 4 | return ( 5 | <> 6 |

list component

7 | 8 | ); 9 | }; 10 | 11 | export default List; 12 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 1, 4 | name: 'Bertie Yates', 5 | age: 29, 6 | image: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg', 8 | }, 9 | { 10 | id: 2, 11 | name: 'Hester Hogan', 12 | age: 32, 13 | image: 14 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg', 15 | }, 16 | { 17 | id: 3, 18 | name: 'Larry Little', 19 | age: 36, 20 | image: 21 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg', 22 | }, 23 | { 24 | id: 4, 25 | name: 'Sean Walsh', 26 | age: 34, 27 | image: 28 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg', 29 | }, 30 | { 31 | id: 5, 32 | name: 'Lola Gardner', 33 | age: 29, 34 | image: 35 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg', 36 | }, 37 | ]; 38 | -------------------------------------------------------------------------------- /01-birthday-reminder/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /02-tours/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-tours/final/README.md: -------------------------------------------------------------------------------- 1 | ## React Projects Starter APP 2 | -------------------------------------------------------------------------------- /02-tours/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /02-tours/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/final/public/favicon.ico -------------------------------------------------------------------------------- /02-tours/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/final/public/logo192.png -------------------------------------------------------------------------------- /02-tours/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/final/public/logo512.png -------------------------------------------------------------------------------- /02-tours/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-tours/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02-tours/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import Loading from './Loading' 3 | import Tours from './Tours' 4 | // ATTENTION!!!!!!!!!! 5 | // I SWITCHED TO PERMANENT DOMAIN 6 | const url = 'https://course-api.com/react-tours-project' 7 | 8 | function App() { 9 | const [loading, setLoading] = useState(true) 10 | const [tours, setTours] = useState([]) 11 | 12 | const removeTour = (id) => { 13 | const newTours = tours.filter((tour) => tour.id !== id) 14 | setTours(newTours) 15 | } 16 | 17 | const fetchTours = async () => { 18 | setLoading(true) 19 | try { 20 | const response = await fetch(url) 21 | const tours = await response.json() 22 | setLoading(false) 23 | setTours(tours) 24 | } catch (error) { 25 | setLoading(false) 26 | console.log(error) 27 | } 28 | } 29 | useEffect(() => { 30 | fetchTours() 31 | }, []) 32 | if (loading) { 33 | return ( 34 |
35 | 36 |
37 | ) 38 | } 39 | if (tours.length === 0) { 40 | return ( 41 |
42 |
43 |

no tours left

44 | 47 |
48 |
49 | ) 50 | } 51 | return ( 52 |
53 | 54 |
55 | ) 56 | } 57 | 58 | export default App 59 | -------------------------------------------------------------------------------- /02-tours/final/src/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Loading = () => { 4 | return ( 5 |
6 |

loading...

7 |
8 | ); 9 | }; 10 | 11 | export default Loading; 12 | -------------------------------------------------------------------------------- /02-tours/final/src/Tour.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Tour = ({ id, image, info, name, price, removeTour }) => { 4 | const [readMore, setReadMore] = useState(false); 5 | return ( 6 |
7 | {name} 8 | 23 |
24 | ); 25 | }; 26 | 27 | export default Tour; 28 | -------------------------------------------------------------------------------- /02-tours/final/src/Tours.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tour from './Tour'; 3 | const Tours = ({ tours, removeTour }) => { 4 | return ( 5 |
6 |
7 |

our tours

8 |
9 |
10 |
11 | {tours.map((tour) => { 12 | return ; 13 | })} 14 |
15 |
16 | ); 17 | }; 18 | 19 | export default Tours; 20 | -------------------------------------------------------------------------------- /02-tours/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /02-tours/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-tours/setup/README.md: -------------------------------------------------------------------------------- 1 | ## React Projects Starter APP 2 | -------------------------------------------------------------------------------- /02-tours/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /02-tours/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/setup/public/favicon.ico -------------------------------------------------------------------------------- /02-tours/setup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Tours Setup 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-tours/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/setup/public/logo192.png -------------------------------------------------------------------------------- /02-tours/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/02-tours/setup/public/logo512.png -------------------------------------------------------------------------------- /02-tours/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-tours/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02-tours/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import Loading from './Loading' 3 | import Tours from './Tours' 4 | // ATTENTION!!!!!!!!!! 5 | // I SWITCHED TO PERMANENT DOMAIN 6 | const url = 'https://course-api.com/react-tours-project' 7 | function App() { 8 | return

Tours Project Setup

9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /02-tours/setup/src/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Loading = () => { 4 | return ( 5 |
6 |

loading...

7 |
8 | ); 9 | }; 10 | 11 | export default Loading; 12 | -------------------------------------------------------------------------------- /02-tours/setup/src/Tour.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Tour = () => { 4 | return

tour component

; 5 | }; 6 | 7 | export default Tour; 8 | -------------------------------------------------------------------------------- /02-tours/setup/src/Tours.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tour from './Tour'; 3 | const Tours = () => { 4 | return

tours component

; 5 | }; 6 | 7 | export default Tours; 8 | -------------------------------------------------------------------------------- /02-tours/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /03-reviews/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-reviews/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/final/README.md -------------------------------------------------------------------------------- /03-reviews/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /03-reviews/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/final/public/favicon.ico -------------------------------------------------------------------------------- /03-reviews/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/final/public/logo192.png -------------------------------------------------------------------------------- /03-reviews/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/final/public/logo512.png -------------------------------------------------------------------------------- /03-reviews/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-reviews/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03-reviews/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Review from './Review'; 3 | function App() { 4 | return ( 5 |
6 |
7 |
8 |

our reviews

9 |
10 |
11 | 12 |
13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /03-reviews/final/src/data.js: -------------------------------------------------------------------------------- 1 | const reviews = [ 2 | { 3 | id: 1, 4 | name: 'susan smith', 5 | job: 'web developer', 6 | image: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg', 8 | text: 9 | "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry", 10 | }, 11 | { 12 | id: 2, 13 | name: 'anna johnson', 14 | job: 'web designer', 15 | image: 16 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg', 17 | text: 18 | 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.', 19 | }, 20 | { 21 | id: 3, 22 | name: 'peter jones', 23 | job: 'intern', 24 | image: 25 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg', 26 | text: 27 | 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.', 28 | }, 29 | { 30 | id: 4, 31 | name: 'bill anderson', 32 | job: 'the boss', 33 | image: 34 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg', 35 | text: 36 | 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ', 37 | }, 38 | ]; 39 | 40 | export default reviews; 41 | -------------------------------------------------------------------------------- /03-reviews/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /03-reviews/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-reviews/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/setup/README.md -------------------------------------------------------------------------------- /03-reviews/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /03-reviews/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/setup/public/favicon.ico -------------------------------------------------------------------------------- /03-reviews/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/setup/public/logo192.png -------------------------------------------------------------------------------- /03-reviews/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/03-reviews/setup/public/logo512.png -------------------------------------------------------------------------------- /03-reviews/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-reviews/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03-reviews/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Review from './Review'; 3 | function App() { 4 | return

reviews project setup

; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /03-reviews/setup/src/Review.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import people from './data'; 3 | import { FaChevronLeft, FaChevronRight, FaQuoteRight } from 'react-icons/fa'; 4 | 5 | const Review = () => { 6 | return

review component

; 7 | }; 8 | 9 | export default Review; 10 | -------------------------------------------------------------------------------- /03-reviews/setup/src/data.js: -------------------------------------------------------------------------------- 1 | const reviews = [ 2 | { 3 | id: 1, 4 | name: 'susan smith', 5 | job: 'web developer', 6 | image: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg', 8 | text: 9 | "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry", 10 | }, 11 | { 12 | id: 2, 13 | name: 'anna johnson', 14 | job: 'web designer', 15 | image: 16 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg', 17 | text: 18 | 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.', 19 | }, 20 | { 21 | id: 3, 22 | name: 'peter jones', 23 | job: 'intern', 24 | image: 25 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg', 26 | text: 27 | 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.', 28 | }, 29 | { 30 | id: 4, 31 | name: 'bill anderson', 32 | job: 'the boss', 33 | image: 34 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg', 35 | text: 36 | 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ', 37 | }, 38 | ]; 39 | 40 | export default reviews; 41 | -------------------------------------------------------------------------------- /03-reviews/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /04-accordion/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04-accordion/final/README.md: -------------------------------------------------------------------------------- 1 | #### Idea 2 | 3 | [uidesigndaily](https://uidesigndaily.com/posts/sketch-accordion-website-day-1175) 4 | 5 | ![](./idea.png); 6 | -------------------------------------------------------------------------------- /04-accordion/final/idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/final/idea.png -------------------------------------------------------------------------------- /04-accordion/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /04-accordion/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/final/public/favicon.ico -------------------------------------------------------------------------------- /04-accordion/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/final/public/logo192.png -------------------------------------------------------------------------------- /04-accordion/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/final/public/logo512.png -------------------------------------------------------------------------------- /04-accordion/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04-accordion/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04-accordion/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import data from './data'; 3 | import SingleQuestion from './Question'; 4 | function App() { 5 | const [questions, setQuestions] = useState(data); 6 | return ( 7 |
8 |
9 |

questions and answers about login

10 |
11 | {questions.map((question) => { 12 | return ( 13 | 14 | ); 15 | })} 16 |
17 |
18 |
19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /04-accordion/final/src/Question.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai'; 3 | const Question = ({ title, info }) => { 4 | const [showInfo, setShowInfo] = useState(false); 5 | return ( 6 |
7 |
8 |

{title}

9 | 12 |
13 | {showInfo &&

{info}

} 14 |
15 | ); 16 | }; 17 | 18 | export default Question; 19 | -------------------------------------------------------------------------------- /04-accordion/final/src/data.js: -------------------------------------------------------------------------------- 1 | const questions = [ 2 | { 3 | id: 1, 4 | title: 'Do I have to allow the use of cookies?', 5 | info: 6 | 'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.', 7 | }, 8 | { 9 | id: 2, 10 | title: 'How do I change my My Page password?', 11 | info: 12 | 'Coloring book forage photo booth gentrify lumbersexual. Migas chillwave poutine synth shoreditch, enamel pin thundercats fashion axe roof party polaroid chartreuse.', 13 | }, 14 | { 15 | id: 3, 16 | title: 'What is BankID?', 17 | info: 18 | 'Enamel pin fam sustainable woke whatever venmo. Authentic asymmetrical put a bird on it, lumbersexual activated charcoal kinfolk banjo cred pickled sartorial.', 19 | }, 20 | { 21 | id: 4, 22 | title: 'Whose birth number can I use?', 23 | info: 24 | 'Edison bulb direct trade gentrify beard lo-fi seitan sustainable roof party franzen occupy squid. Knausgaard cronut succulents, scenester readymade shabby chic lyft. Copper mug meh vegan gentrify.', 25 | }, 26 | { 27 | id: 5, 28 | title: 'When do I recieve a password ordered by letter?', 29 | info: 30 | 'Locavore franzen fashion axe live-edge neutra irony synth af tilde shabby chic man braid chillwave waistcoat copper mug messenger bag. Banjo snackwave blog, microdosing thundercats migas vaporware viral lo-fi seitan ', 31 | }, 32 | ] 33 | export default questions 34 | -------------------------------------------------------------------------------- /04-accordion/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /04-accordion/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04-accordion/setup/README.md: -------------------------------------------------------------------------------- 1 | #### Idea 2 | 3 | [uidesigndaily](https://uidesigndaily.com/posts/sketch-accordion-website-day-1175) 4 | 5 | ![](./idea.png); 6 | 7 | #### React Icons 8 | 9 | [react icons](https://react-icons.github.io/react-icons/) 10 | 11 | ``` 12 | npm install react-icons --save 13 | ``` 14 | 15 | ```javascript 16 | import { FaHome } from 'react-icons/fa'; 17 | const Component = () => { 18 | return ; 19 | }; 20 | ``` 21 | -------------------------------------------------------------------------------- /04-accordion/setup/idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/setup/idea.png -------------------------------------------------------------------------------- /04-accordion/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /04-accordion/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/setup/public/favicon.ico -------------------------------------------------------------------------------- /04-accordion/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/setup/public/logo192.png -------------------------------------------------------------------------------- /04-accordion/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/04-accordion/setup/public/logo512.png -------------------------------------------------------------------------------- /04-accordion/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04-accordion/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04-accordion/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import data from './data'; 3 | import SingleQuestion from './Question'; 4 | function App() { 5 | return

accordion project setup

; 6 | } 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /04-accordion/setup/src/Question.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai'; 3 | const Question = () => { 4 | return

question component

; 5 | }; 6 | 7 | export default Question; 8 | -------------------------------------------------------------------------------- /04-accordion/setup/src/data.js: -------------------------------------------------------------------------------- 1 | const questions = [ 2 | { 3 | id: 1, 4 | title: 'Do I have to allow the use of cookies?', 5 | info: 6 | 'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.', 7 | }, 8 | { 9 | id: 2, 10 | title: 'How do I change my My Page password?', 11 | info: 12 | 'Coloring book forage photo booth gentrify lumbersexual. Migas chillwave poutine synth shoreditch, enamel pin thundercats fashion axe roof party polaroid chartreuse.', 13 | }, 14 | { 15 | id: 3, 16 | title: 'What is BankID?', 17 | info: 18 | 'Enamel pin fam sustainable woke whatever venmo. Authentic asymmetrical put a bird on it, lumbersexual activated charcoal kinfolk banjo cred pickled sartorial.', 19 | }, 20 | { 21 | id: 4, 22 | title: 'Whose birth number can I use?', 23 | info: 24 | 'Edison bulb direct trade gentrify beard lo-fi seitan sustainable roof party franzen occupy squid. Knausgaard cronut succulents, scenester readymade shabby chic lyft. Copper mug meh vegan gentrify.', 25 | }, 26 | { 27 | id: 5, 28 | title: 'When do I recieve a password ordered by letter?', 29 | info: 30 | 'Locavore franzen fashion axe live-edge neutra irony synth af tilde shabby chic man braid chillwave waistcoat copper mug messenger bag. Banjo snackwave blog, microdosing thundercats migas vaporware viral lo-fi seitan ', 31 | }, 32 | ] 33 | export default questions 34 | -------------------------------------------------------------------------------- /04-accordion/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /05-menu/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05-menu/final/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-5-menu 2 | -------------------------------------------------------------------------------- /05-menu/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /05-menu/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/favicon.ico -------------------------------------------------------------------------------- /05-menu/final/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-1.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-10.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-2.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-3.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-4.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-5.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-6.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-7.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-8.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/images/item-9.jpeg -------------------------------------------------------------------------------- /05-menu/final/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Menu Complete 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /05-menu/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/logo192.png -------------------------------------------------------------------------------- /05-menu/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/final/public/logo512.png -------------------------------------------------------------------------------- /05-menu/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /05-menu/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /05-menu/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Menu from './Menu'; 3 | import Categories from './Categories'; 4 | import items from './data'; 5 | const allCategories = ['all', ...new Set(items.map((item) => item.category))]; 6 | 7 | function App() { 8 | const [menuItems, setMenuItems] = useState(items); 9 | const [categories, setCategories] = useState(allCategories); 10 | 11 | const filterItems = (category) => { 12 | if (category === 'all') { 13 | setMenuItems(items); 14 | return; 15 | } 16 | const newItems = items.filter((item) => item.category === category); 17 | setMenuItems(newItems); 18 | }; 19 | 20 | return ( 21 |
22 |
23 |
24 |

our menu

25 |
26 |
27 | 28 | 29 |
30 |
31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /05-menu/final/src/Categories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Categories = ({ categories, filterItems }) => { 4 | return ( 5 |
6 | {categories.map((category, index) => { 7 | return ( 8 | 16 | ); 17 | })} 18 |
19 | ); 20 | }; 21 | 22 | export default Categories; 23 | -------------------------------------------------------------------------------- /05-menu/final/src/Menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Menu = ({ items }) => { 4 | return ( 5 |
6 | {items.map((menuItem) => { 7 | const { id, title, img, desc, price } = menuItem; 8 | return ( 9 |
10 | {title} 11 |
12 |
13 |

{title}

14 |

${price}

15 |
16 |

{desc}

17 |
18 |
19 | ); 20 | })} 21 |
22 | ); 23 | }; 24 | 25 | export default Menu; 26 | -------------------------------------------------------------------------------- /05-menu/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /05-menu/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05-menu/setup/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-5-menu 2 | -------------------------------------------------------------------------------- /05-menu/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /05-menu/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/favicon.ico -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-1.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-10.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-2.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-3.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-4.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-5.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-6.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-7.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-8.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/images/item-9.jpeg -------------------------------------------------------------------------------- /05-menu/setup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Menu Setup 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /05-menu/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/logo192.png -------------------------------------------------------------------------------- /05-menu/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/05-menu/setup/public/logo512.png -------------------------------------------------------------------------------- /05-menu/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /05-menu/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /05-menu/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Menu from './Menu'; 3 | import Categories from './Categories'; 4 | import items from './data'; 5 | 6 | function App() { 7 | return

menu project setup

; 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /05-menu/setup/src/Categories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Categories = () => { 4 | return

categories component

; 5 | }; 6 | 7 | export default Categories; 8 | -------------------------------------------------------------------------------- /05-menu/setup/src/Menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Menu = () => { 4 | return

menu component

; 5 | }; 6 | 7 | export default Menu; 8 | -------------------------------------------------------------------------------- /05-menu/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /06-tabs/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06-tabs/final/README.md: -------------------------------------------------------------------------------- 1 | #### IN ACTION 2 | 3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/) 4 | -------------------------------------------------------------------------------- /06-tabs/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /06-tabs/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/final/public/favicon.ico -------------------------------------------------------------------------------- /06-tabs/final/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Tabs Complete 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /06-tabs/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/final/public/logo192.png -------------------------------------------------------------------------------- /06-tabs/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/final/public/logo512.png -------------------------------------------------------------------------------- /06-tabs/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /06-tabs/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06-tabs/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /06-tabs/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06-tabs/setup/README.md: -------------------------------------------------------------------------------- 1 | #### IN ACTION 2 | 3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/) 4 | -------------------------------------------------------------------------------- /06-tabs/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /06-tabs/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/setup/public/favicon.ico -------------------------------------------------------------------------------- /06-tabs/setup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Tabs Setup 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /06-tabs/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/setup/public/logo192.png -------------------------------------------------------------------------------- /06-tabs/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/06-tabs/setup/public/logo512.png -------------------------------------------------------------------------------- /06-tabs/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /06-tabs/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06-tabs/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { FaAngleDoubleRight } from 'react-icons/fa' 3 | // ATTENTION!!!!!!!!!! 4 | // I SWITCHED TO PERMANENT DOMAIN 5 | const url = 'https://course-api.com/react-tabs-project' 6 | function App() { 7 | return

tabs project setup

8 | } 9 | 10 | export default App 11 | -------------------------------------------------------------------------------- /06-tabs/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/final/README.md -------------------------------------------------------------------------------- /07-lorem-ipsum/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/final/public/favicon.ico -------------------------------------------------------------------------------- /07-lorem-ipsum/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/final/public/logo192.png -------------------------------------------------------------------------------- /07-lorem-ipsum/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/final/public/logo512.png -------------------------------------------------------------------------------- /07-lorem-ipsum/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import data from './data'; 3 | function App() { 4 | const [count, setCount] = useState(0); 5 | const [text, setText] = useState([]); 6 | 7 | const handleSubmit = (e) => { 8 | e.preventDefault(); 9 | let amount = parseInt(count); 10 | if (count <= 0) { 11 | amount = 1; 12 | } 13 | if (count > 8) { 14 | amount = 8; 15 | } 16 | setText(data.slice(0, amount)); 17 | }; 18 | return ( 19 |
20 |

tired of boring lorem ipsum?

21 |
22 | 23 | setCount(e.target.value)} 29 | /> 30 | 31 |
32 |
33 | {text.map((item, index) => { 34 | return

{item}

; 35 | })} 36 |
37 |
38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /07-lorem-ipsum/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/setup/README.md -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/setup/public/favicon.ico -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/setup/public/logo192.png -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/07-lorem-ipsum/setup/public/logo512.png -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import data from './data'; 3 | function App() { 4 | 5 | 6 | return ( 7 |

lorem ipsum project setup

8 | ) 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /07-lorem-ipsum/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /08-color-generator/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /08-color-generator/final/README.md: -------------------------------------------------------------------------------- 1 | #### Values JS 2 | 3 | [values.js](https://github.com/noeldelgado/values.js) 4 | -------------------------------------------------------------------------------- /08-color-generator/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3", 12 | "values.js": "^2.0.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /08-color-generator/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/final/public/favicon.ico -------------------------------------------------------------------------------- /08-color-generator/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/final/public/logo192.png -------------------------------------------------------------------------------- /08-color-generator/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/final/public/logo512.png -------------------------------------------------------------------------------- /08-color-generator/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /08-color-generator/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08-color-generator/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import SingleColor from './SingleColor' 3 | 4 | import Values from 'values.js' 5 | 6 | function App() { 7 | const [color, setColor] = useState('') 8 | const [error, setError] = useState(false) 9 | const [list, setList] = useState(new Values('#f15025').all(10)) 10 | 11 | const handleSubmit = (e) => { 12 | e.preventDefault() 13 | try { 14 | let colors = new Values(color).all(10) 15 | setList(colors) 16 | } catch (error) { 17 | setError(true) 18 | console.log(error) 19 | } 20 | } 21 | 22 | return ( 23 | <> 24 |
25 |

color generator

26 |
27 | setColor(e.target.value)} 31 | placeholder='#f15025' 32 | className={`${error ? 'error' : null}`} 33 | /> 34 | 37 |
38 |
39 |
40 | {list.map((color, index) => { 41 | return ( 42 | 48 | ) 49 | })} 50 |
51 | 52 | ) 53 | } 54 | 55 | export default App 56 | -------------------------------------------------------------------------------- /08-color-generator/final/src/SingleColor.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import rgbToHex from './utils' 3 | 4 | const SingleColor = ({ rgb, weight, index, hexColor }) => { 5 | const [alert, setAlert] = useState(false) 6 | const bcg = rgb.join(',') 7 | const hex = rgbToHex(...rgb) 8 | const hexValue = `#${hexColor}` 9 | useEffect(() => { 10 | const timeout = setTimeout(() => { 11 | setAlert(false) 12 | }, 3000) 13 | return () => clearTimeout(timeout) 14 | }, [alert]) 15 | return ( 16 |
10 && 'color-light'}`} 18 | style={{ backgroundColor: `rgb(${bcg})` }} 19 | onClick={() => { 20 | setAlert(true) 21 | navigator.clipboard.writeText(hexValue) 22 | }} 23 | > 24 |

{weight}%

25 |

{hexValue}

26 | {alert &&

copied to clipboard

} 27 |
28 | ) 29 | } 30 | 31 | export default SingleColor 32 | -------------------------------------------------------------------------------- /08-color-generator/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /08-color-generator/final/src/utils.js: -------------------------------------------------------------------------------- 1 | function componentToHex(c) { 2 | var hex = c.toString(16); 3 | return hex.length == 1 ? '0' + hex : hex; 4 | } 5 | 6 | function rgbToHex(r, g, b) { 7 | return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b); 8 | } 9 | 10 | export default rgbToHex; 11 | -------------------------------------------------------------------------------- /08-color-generator/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /08-color-generator/setup/README.md: -------------------------------------------------------------------------------- 1 | #### Values JS 2 | 3 | [values.js](https://github.com/noeldelgado/values.js) 4 | -------------------------------------------------------------------------------- /08-color-generator/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3", 12 | "values.js": "^2.0.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /08-color-generator/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/setup/public/favicon.ico -------------------------------------------------------------------------------- /08-color-generator/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/setup/public/logo192.png -------------------------------------------------------------------------------- /08-color-generator/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/08-color-generator/setup/public/logo512.png -------------------------------------------------------------------------------- /08-color-generator/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /08-color-generator/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08-color-generator/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import SingleColor from './SingleColor' 3 | 4 | import Values from 'values.js' 5 | 6 | function App() { 7 | return

color generator project

8 | } 9 | 10 | export default App 11 | -------------------------------------------------------------------------------- /08-color-generator/setup/src/SingleColor.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import rgbToHex from './utils' 3 | 4 | const SingleColor = () => { 5 | return

single color

6 | } 7 | 8 | export default SingleColor 9 | -------------------------------------------------------------------------------- /08-color-generator/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /08-color-generator/setup/src/utils.js: -------------------------------------------------------------------------------- 1 | function componentToHex(c) { 2 | var hex = c.toString(16); 3 | return hex.length == 1 ? '0' + hex : hex; 4 | } 5 | 6 | function rgbToHex(r, g, b) { 7 | return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b); 8 | } 9 | 10 | export default rgbToHex; 11 | -------------------------------------------------------------------------------- /09-grocery-bud/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /09-grocery-bud/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/final/README.md -------------------------------------------------------------------------------- /09-grocery-bud/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /09-grocery-bud/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/final/public/favicon.ico -------------------------------------------------------------------------------- /09-grocery-bud/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/final/public/logo192.png -------------------------------------------------------------------------------- /09-grocery-bud/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/final/public/logo512.png -------------------------------------------------------------------------------- /09-grocery-bud/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /09-grocery-bud/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /09-grocery-bud/final/src/Alert.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | const Alert = ({ type, msg, removeAlert, list }) => { 4 | useEffect(() => { 5 | const timeout = setTimeout(() => { 6 | removeAlert(); 7 | }, 3000); 8 | return () => clearTimeout(timeout); 9 | }, [list]); 10 | return

{msg}

; 11 | }; 12 | 13 | export default Alert; 14 | -------------------------------------------------------------------------------- /09-grocery-bud/final/src/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FaEdit, FaTrash } from 'react-icons/fa'; 3 | const List = ({ items, removeItem, editItem }) => { 4 | return ( 5 |
6 | {items.map((item) => { 7 | const { id, title } = item; 8 | return ( 9 |
10 |

{title}

11 |
12 | 19 | 26 |
27 |
28 | ); 29 | })} 30 |
31 | ); 32 | }; 33 | 34 | export default List; 35 | -------------------------------------------------------------------------------- /09-grocery-bud/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/setup/README.md -------------------------------------------------------------------------------- /09-grocery-bud/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/setup/public/favicon.ico -------------------------------------------------------------------------------- /09-grocery-bud/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/setup/public/logo192.png -------------------------------------------------------------------------------- /09-grocery-bud/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/09-grocery-bud/setup/public/logo512.png -------------------------------------------------------------------------------- /09-grocery-bud/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/src/Alert.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | 3 | const Alert = () => { 4 | return

alert component

5 | } 6 | 7 | export default Alert 8 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import List from './List' 3 | import Alert from './Alert' 4 | 5 | function App() { 6 | return

grocery bud setup

7 | } 8 | 9 | export default App 10 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/src/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaEdit, FaTrash } from 'react-icons/fa' 3 | const List = () => { 4 | return

list component

5 | } 6 | 7 | export default List 8 | -------------------------------------------------------------------------------- /09-grocery-bud/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /10-navbar/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /10-navbar/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/final/README.md -------------------------------------------------------------------------------- /10-navbar/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /10-navbar/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/final/public/favicon.ico -------------------------------------------------------------------------------- /10-navbar/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/final/public/logo192.png -------------------------------------------------------------------------------- /10-navbar/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/final/public/logo512.png -------------------------------------------------------------------------------- /10-navbar/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /10-navbar/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10-navbar/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './Navbar'; 3 | function App() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /10-navbar/final/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from 'react'; 2 | import { FaBars } from 'react-icons/fa'; 3 | import { links, social } from './data'; 4 | import logo from './logo.svg'; 5 | 6 | const Navbar = () => { 7 | const [showLinks, setShowLinks] = useState(false); 8 | const linksContainerRef = useRef(null); 9 | const linksRef = useRef(null); 10 | const toggleLinks = () => { 11 | setShowLinks(!showLinks); 12 | }; 13 | useEffect(() => { 14 | const linksHeight = linksRef.current.getBoundingClientRect().height; 15 | if (showLinks) { 16 | linksContainerRef.current.style.height = `${linksHeight}px`; 17 | } else { 18 | linksContainerRef.current.style.height = '0px'; 19 | } 20 | }, [showLinks]); 21 | return ( 22 | 54 | ); 55 | }; 56 | 57 | export default Navbar; 58 | -------------------------------------------------------------------------------- /10-navbar/final/src/data.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FaBehance, FaFacebook, FaLinkedin, FaTwitter } from 'react-icons/fa'; 3 | export const links = [ 4 | { 5 | id: 1, 6 | url: '/', 7 | text: 'home', 8 | }, 9 | { 10 | id: 2, 11 | url: '/about', 12 | text: 'about', 13 | }, 14 | { 15 | id: 3, 16 | url: '/projects', 17 | text: 'projects', 18 | }, 19 | { 20 | id: 4, 21 | url: '/contact', 22 | text: 'contact', 23 | }, 24 | { 25 | id: 5, 26 | url: '/profile', 27 | text: 'profile', 28 | }, 29 | ]; 30 | 31 | export const social = [ 32 | { 33 | id: 1, 34 | url: 'https://www.twitter.com', 35 | icon: , 36 | }, 37 | { 38 | id: 2, 39 | url: 'https://www.twitter.com', 40 | icon: , 41 | }, 42 | { 43 | id: 3, 44 | url: 'https://www.twitter.com', 45 | icon: , 46 | }, 47 | { 48 | id: 4, 49 | url: 'https://www.twitter.com', 50 | icon: , 51 | }, 52 | ]; 53 | -------------------------------------------------------------------------------- /10-navbar/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /10-navbar/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /10-navbar/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/setup/README.md -------------------------------------------------------------------------------- /10-navbar/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /10-navbar/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/setup/public/favicon.ico -------------------------------------------------------------------------------- /10-navbar/setup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Navbar Setup 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /10-navbar/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/setup/public/logo192.png -------------------------------------------------------------------------------- /10-navbar/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/10-navbar/setup/public/logo512.png -------------------------------------------------------------------------------- /10-navbar/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /10-navbar/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10-navbar/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from './Navbar' 3 | function App() { 4 | return ( 5 | <> 6 |

navbar project setup

7 | 8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /10-navbar/setup/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from 'react' 2 | import { FaBars, FaTwitter } from 'react-icons/fa' 3 | import { links, social } from './data' 4 | import logo from './logo.svg' 5 | 6 | const Navbar = () => { 7 | return

navbar

8 | } 9 | 10 | export default Navbar 11 | -------------------------------------------------------------------------------- /10-navbar/setup/src/data.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaBehance, FaFacebook, FaLinkedin, FaTwitter } from 'react-icons/fa' 3 | export const links = [ 4 | { 5 | id: 1, 6 | url: '/', 7 | text: 'random', 8 | }, 9 | { 10 | id: 2, 11 | url: '/about', 12 | text: 'about', 13 | }, 14 | { 15 | id: 3, 16 | url: '/projects', 17 | text: 'projects', 18 | }, 19 | { 20 | id: 4, 21 | url: '/contact', 22 | text: 'contact', 23 | }, 24 | { 25 | id: 5, 26 | url: '/profile', 27 | text: 'profile', 28 | }, 29 | ] 30 | 31 | export const social = [ 32 | { 33 | id: 1, 34 | url: 'https://www.twitter.com', 35 | icon: , 36 | }, 37 | { 38 | id: 2, 39 | url: 'https://www.twitter.com', 40 | icon: , 41 | }, 42 | { 43 | id: 3, 44 | url: 'https://www.twitter.com', 45 | icon: , 46 | }, 47 | { 48 | id: 4, 49 | url: 'https://www.twitter.com', 50 | icon: , 51 | }, 52 | ] 53 | -------------------------------------------------------------------------------- /10-navbar/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/final/README.md -------------------------------------------------------------------------------- /11-sidebar-modal/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/final/public/favicon.ico -------------------------------------------------------------------------------- /11-sidebar-modal/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/final/public/logo192.png -------------------------------------------------------------------------------- /11-sidebar-modal/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/final/public/logo512.png -------------------------------------------------------------------------------- /11-sidebar-modal/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Modal from './Modal'; 3 | import Sidebar from './Sidebar'; 4 | import Home from './Home'; 5 | function App() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FaBars } from 'react-icons/fa'; 3 | import { useGlobalContext } from './context'; 4 | 5 | const Home = () => { 6 | const { openSidebar, openModal } = useGlobalContext(); 7 | return ( 8 |
9 | 12 | 15 |
16 | ); 17 | }; 18 | 19 | export default Home; 20 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useGlobalContext } from './context'; 3 | import { FaTimes } from 'react-icons/fa'; 4 | const Modal = () => { 5 | const { isModalOpen, closeModal } = useGlobalContext(); 6 | return ( 7 |
12 |
13 |

modal content

14 | 17 |
18 |
19 | ); 20 | }; 21 | 22 | export default Modal; 23 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import { useGlobalContext } from './context'; 4 | import { FaTimes } from 'react-icons/fa'; 5 | import { social, links } from './data'; 6 | 7 | const Sidebar = () => { 8 | const { isSidebarOpen, closeSidebar } = useGlobalContext(); 9 | 10 | return ( 11 | 42 | ); 43 | }; 44 | 45 | export default Sidebar; 46 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react'; 2 | 3 | const AppContext = React.createContext(); 4 | 5 | const AppProvider = ({ children }) => { 6 | const [isSidebarOpen, setIsSidebarOpen] = useState(false); 7 | const [isModalOpen, setIsModalOpen] = useState(false); 8 | 9 | const openSidebar = () => { 10 | setIsSidebarOpen(true); 11 | }; 12 | const closeSidebar = () => { 13 | setIsSidebarOpen(false); 14 | }; 15 | 16 | const openModal = () => { 17 | setIsModalOpen(true); 18 | }; 19 | const closeModal = () => { 20 | setIsModalOpen(false); 21 | }; 22 | 23 | return ( 24 | 34 | {children} 35 | 36 | ); 37 | }; 38 | 39 | export const useGlobalContext = () => { 40 | return useContext(AppContext); 41 | }; 42 | 43 | export { AppContext, AppProvider }; 44 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/data.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | FaBehance, 4 | FaFacebook, 5 | FaLinkedin, 6 | FaTwitter, 7 | FaSketch, 8 | FaHome, 9 | FaUserFriends, 10 | FaFolderOpen, 11 | FaCalendarAlt, 12 | FaWpforms, 13 | } from 'react-icons/fa'; 14 | export const links = [ 15 | { 16 | id: 1, 17 | url: '/', 18 | text: 'home', 19 | icon: , 20 | }, 21 | { 22 | id: 2, 23 | url: '/team', 24 | text: 'team', 25 | icon: , 26 | }, 27 | { 28 | id: 3, 29 | url: '/projects', 30 | text: 'projects', 31 | icon: , 32 | }, 33 | { 34 | id: 4, 35 | url: '/calendar', 36 | text: 'calendar', 37 | icon: , 38 | }, 39 | { 40 | id: 5, 41 | url: '/documents', 42 | text: 'documents', 43 | icon: , 44 | }, 45 | ]; 46 | 47 | export const social = [ 48 | { 49 | id: 1, 50 | url: 'https://www.twitter.com', 51 | icon: , 52 | }, 53 | { 54 | id: 2, 55 | url: 'https://www.twitter.com', 56 | icon: , 57 | }, 58 | { 59 | id: 3, 60 | url: 'https://www.twitter.com', 61 | icon: , 62 | }, 63 | { 64 | id: 4, 65 | url: 'https://www.twitter.com', 66 | icon: , 67 | }, 68 | { 69 | id: 5, 70 | url: 'https://www.twitter.com', 71 | icon: , 72 | }, 73 | ]; 74 | -------------------------------------------------------------------------------- /11-sidebar-modal/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { AppProvider } from './context'; 6 | ReactDOM.render( 7 | 8 | 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/setup/README.md -------------------------------------------------------------------------------- /11-sidebar-modal/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.11.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/setup/public/favicon.ico -------------------------------------------------------------------------------- /11-sidebar-modal/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/setup/public/logo192.png -------------------------------------------------------------------------------- /11-sidebar-modal/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/11-sidebar-modal/setup/public/logo512.png -------------------------------------------------------------------------------- /11-sidebar-modal/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Modal from './Modal' 3 | import Sidebar from './Sidebar' 4 | import Home from './Home' 5 | function App() { 6 | return ( 7 | <> 8 |

modal-sidebar project setup

9 | 10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import { FaBars } from 'react-icons/fa' 3 | 4 | const Home = () => { 5 | return

home component

6 | } 7 | 8 | export default Home 9 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaTimes } from 'react-icons/fa' 3 | const Modal = () => { 4 | return

Modal

5 | } 6 | 7 | export default Modal 8 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import logo from './logo.svg' 3 | import { FaTimes } from 'react-icons/fa' 4 | import { social, links } from './data' 5 | 6 | const Sidebar = () => { 7 | return

sidebar

8 | } 9 | 10 | export default Sidebar 11 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react' 2 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/data.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | FaBehance, 4 | FaFacebook, 5 | FaLinkedin, 6 | FaTwitter, 7 | FaSketch, 8 | FaHome, 9 | FaUserFriends, 10 | FaFolderOpen, 11 | FaCalendarAlt, 12 | FaWpforms, 13 | } from 'react-icons/fa'; 14 | export const links = [ 15 | { 16 | id: 1, 17 | url: '/', 18 | text: 'home', 19 | icon: , 20 | }, 21 | { 22 | id: 2, 23 | url: '/team', 24 | text: 'team', 25 | icon: , 26 | }, 27 | { 28 | id: 3, 29 | url: '/projects', 30 | text: 'projects', 31 | icon: , 32 | }, 33 | { 34 | id: 4, 35 | url: '/calendar', 36 | text: 'calendar', 37 | icon: , 38 | }, 39 | { 40 | id: 5, 41 | url: '/documents', 42 | text: 'documents', 43 | icon: , 44 | }, 45 | ]; 46 | 47 | export const social = [ 48 | { 49 | id: 1, 50 | url: 'https://www.twitter.com', 51 | icon: , 52 | }, 53 | { 54 | id: 2, 55 | url: 'https://www.twitter.com', 56 | icon: , 57 | }, 58 | { 59 | id: 3, 60 | url: 'https://www.twitter.com', 61 | icon: , 62 | }, 63 | { 64 | id: 4, 65 | url: 'https://www.twitter.com', 66 | icon: , 67 | }, 68 | { 69 | id: 5, 70 | url: 'https://www.twitter.com', 71 | icon: , 72 | }, 73 | ]; 74 | -------------------------------------------------------------------------------- /11-sidebar-modal/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ) 11 | -------------------------------------------------------------------------------- /12-cocktails/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /12-cocktails/final/README.md: -------------------------------------------------------------------------------- 1 | #### React Router Fix 2 | 3 | (Fix)[https://dev.to/dance2die/page-not-found-on-netlify-with-react-router-58mc] 4 | 5 | #### CRA Fix 6 | 7 | ``` 8 | 9 | "build": "CI= react-scripts build", 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /12-cocktails/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /12-cocktails/final/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /12-cocktails/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/final/public/favicon.ico -------------------------------------------------------------------------------- /12-cocktails/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/final/public/logo192.png -------------------------------------------------------------------------------- /12-cocktails/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/final/public/logo512.png -------------------------------------------------------------------------------- /12-cocktails/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /12-cocktails/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /12-cocktails/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | // import pages 4 | import Home from "./pages/Home"; 5 | import About from "./pages/About"; 6 | import SingleCocktail from "./pages/SingleCocktail"; 7 | import Error from "./pages/Error"; 8 | // import components 9 | import Navbar from "./components/Navbar"; 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /12-cocktails/final/src/components/Cocktail.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | export default function Cocktail({ image, name, id, info, glass }) { 4 | return ( 5 |
6 |
7 | {name} 8 |
9 |
10 |

{name}

11 |

{glass}

12 |

{info}

13 | 14 | details 15 | 16 |
17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /12-cocktails/final/src/components/CocktailList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Cocktail from './Cocktail' 3 | import Loading from './Loading' 4 | import { useGlobalContext } from '../context' 5 | 6 | export default function CocktailList() { 7 | const { cocktails, loading } = useGlobalContext() 8 | if (loading) { 9 | return 10 | } 11 | if (cocktails.length < 1) { 12 | return ( 13 |

14 | no cocktails matched your search criteria 15 |

16 | ) 17 | } 18 | return ( 19 |
20 |

cocktails

21 |
22 | {cocktails.map((item) => { 23 | return 24 | })} 25 |
26 |
27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /12-cocktails/final/src/components/Hero.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/final/src/components/Hero.js -------------------------------------------------------------------------------- /12-cocktails/final/src/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Loading = () => { 4 | return ( 5 |
6 |
7 | ) 8 | } 9 | 10 | export default Loading 11 | -------------------------------------------------------------------------------- /12-cocktails/final/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import logo from '../logo.svg' 4 | export default function Navbar() { 5 | return ( 6 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /12-cocktails/final/src/components/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from '../context' 3 | export default function SearchForm() { 4 | const { setSearchTerm } = useGlobalContext() 5 | const searchValue = React.useRef('') 6 | 7 | React.useEffect(() => { 8 | searchValue.current.focus() 9 | }, []) 10 | 11 | function searchCocktail() { 12 | setSearchTerm(searchValue.current.value) 13 | } 14 | function handleSubmit(e) { 15 | e.preventDefault() 16 | } 17 | return ( 18 |
19 |
20 |
21 | 22 | 29 |
30 |
31 |
32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /12-cocktails/final/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | import { useCallback } from 'react' 3 | 4 | const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' 5 | const AppContext = React.createContext() 6 | 7 | const AppProvider = ({ children }) => { 8 | const [loading, setLoading] = useState(true) 9 | const [searchTerm, setSearchTerm] = useState('a') 10 | const [cocktails, setCocktails] = useState([]) 11 | 12 | const fetchDrinks = useCallback( async () => { 13 | setLoading(true) 14 | try { 15 | const response = await fetch(`${url}${searchTerm}`) 16 | const data = await response.json() 17 | console.log(data); 18 | const { drinks } = data 19 | if (drinks) { 20 | const newCocktails = drinks.map((item) => { 21 | const { 22 | idDrink, 23 | strDrink, 24 | strDrinkThumb, 25 | strAlcoholic, 26 | strGlass, 27 | } = item 28 | 29 | return { 30 | id: idDrink, 31 | name: strDrink, 32 | image: strDrinkThumb, 33 | info: strAlcoholic, 34 | glass: strGlass, 35 | } 36 | }) 37 | setCocktails(newCocktails) 38 | } else { 39 | setCocktails([]) 40 | } 41 | setLoading(false) 42 | } catch (error) { 43 | console.log(error) 44 | setLoading(false) 45 | } 46 | },[searchTerm]) 47 | useEffect(() => { 48 | fetchDrinks() 49 | }, [searchTerm,fetchDrinks]) 50 | return ( 51 | 54 | {children} 55 | 56 | ) 57 | } 58 | // make sure use 59 | export const useGlobalContext = () => { 60 | return useContext(AppContext) 61 | } 62 | 63 | export { AppContext, AppProvider } 64 | -------------------------------------------------------------------------------- /12-cocktails/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | import { AppProvider } from './context' 6 | ReactDOM.render( 7 | 8 | 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | -------------------------------------------------------------------------------- /12-cocktails/final/src/pages/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function About() { 4 | return ( 5 |
6 |

about us

7 |

8 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae 9 | repudiandae architecto qui adipisci in officiis, aperiam sequi atque 10 | perferendis eos, autem maiores nisi saepe quisquam hic odio consectetur 11 | nobis veritatis quasi explicabo obcaecati doloremque? Placeat ratione 12 | hic aspernatur error blanditiis? 13 |

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /12-cocktails/final/src/pages/Error.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | export default function Error() { 4 | return ( 5 |
6 |
7 |

oops! it's a dead end

8 | 9 | back home 10 | 11 |
12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /12-cocktails/final/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CocktailList from '../components/CocktailList' 3 | import SearchForm from '../components/SearchForm' 4 | export default function Home() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /12-cocktails/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /12-cocktails/setup/README.md: -------------------------------------------------------------------------------- 1 | #### React Router Fix 2 | 3 | (Fix)[https://dev.to/dance2die/page-not-found-on-netlify-with-react-router-58mc] 4 | 5 | #### CRA Fix 6 | 7 | ``` 8 | 9 | "build": "CI= react-scripts build", 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /12-cocktails/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /12-cocktails/setup/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /12-cocktails/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/setup/public/favicon.ico -------------------------------------------------------------------------------- /12-cocktails/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/setup/public/logo192.png -------------------------------------------------------------------------------- /12-cocktails/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/12-cocktails/setup/public/logo512.png -------------------------------------------------------------------------------- /12-cocktails/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /12-cocktails/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 3 | // import pages 4 | import Home from './pages/Home' 5 | import About from './pages/About' 6 | import SingleCocktail from './pages/SingleCocktail' 7 | import Error from './pages/Error' 8 | // import components 9 | import Navbar from './components/Navbar' 10 | function App() { 11 | return ( 12 |
13 |

app component

14 |
15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/components/Cocktail.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Cocktail = () => { 5 | return ( 6 |
7 |

cocktail component

8 |
9 | ) 10 | } 11 | 12 | export default Cocktail 13 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/components/CocktailList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Cocktail from './Cocktail' 3 | import Loading from './Loading' 4 | import { useGlobalContext } from '../context' 5 | 6 | const CocktailList = () => { 7 | return ( 8 |
9 |

cocktail list component

10 |
11 | ) 12 | } 13 | 14 | export default CocktailList 15 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Loading = () => { 4 | return ( 5 |
6 |
7 | ) 8 | } 9 | 10 | export default Loading 11 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import logo from '../logo.svg' 4 | 5 | const Navbar = () => { 6 | return ( 7 |
8 |

navbar component

9 |
10 | ) 11 | } 12 | 13 | export default Navbar 14 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/components/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from '../context' 3 | 4 | const SearchForm = () => { 5 | return ( 6 |
7 |

search form component

8 |
9 | ) 10 | } 11 | 12 | export default SearchForm 13 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | import { useCallback } from 'react' 3 | 4 | const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' 5 | const AppContext = React.createContext() 6 | 7 | const AppProvider = ({ children }) => { 8 | return {children} 9 | } 10 | // make sure use 11 | export const useGlobalContext = () => { 12 | return useContext(AppContext) 13 | } 14 | 15 | export { AppContext, AppProvider } 16 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | import { AppProvider } from './context' 6 | ReactDOM.render( 7 | 8 | 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/pages/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const About = () => { 4 | return ( 5 |
6 |

about page

7 |
8 | ) 9 | } 10 | 11 | export default About 12 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/pages/Error.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Error = () => { 5 | return ( 6 |
7 |

error page

8 |
9 | ) 10 | } 11 | 12 | export default Error 13 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CocktailList from '../components/CocktailList' 3 | import SearchForm from '../components/SearchForm' 4 | 5 | const Home = () => { 6 | return ( 7 |
8 |

home page

9 |
10 | ) 11 | } 12 | 13 | export default Home 14 | -------------------------------------------------------------------------------- /12-cocktails/setup/src/pages/SingleCocktail.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Loading from '../components/Loading' 3 | import { useParams, Link } from 'react-router-dom' 4 | const url = 'https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=' 5 | 6 | const SingleCocktail = () => { 7 | return ( 8 |
9 |

single cocktail page

10 |
11 | ) 12 | } 13 | 14 | export default SingleCocktail 15 | -------------------------------------------------------------------------------- /13-markdown-preview/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /13-markdown-preview/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/final/README.md -------------------------------------------------------------------------------- /13-markdown-preview/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-markdown": "^5.0.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /13-markdown-preview/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/final/public/favicon.ico -------------------------------------------------------------------------------- /13-markdown-preview/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/final/public/logo192.png -------------------------------------------------------------------------------- /13-markdown-preview/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/final/public/logo512.png -------------------------------------------------------------------------------- /13-markdown-preview/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /13-markdown-preview/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /13-markdown-preview/final/public/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/final/public/testing.png -------------------------------------------------------------------------------- /13-markdown-preview/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import ReactMarkdown from 'react-markdown' 3 | 4 | function App() { 5 | const [markdown, setMarkdown] = useState('# markdown preview') 6 | 7 | return ( 8 |
9 |
10 | 15 |
16 | {markdown} 17 |
18 |
19 |
20 | ) 21 | } 22 | 23 | export default App 24 | -------------------------------------------------------------------------------- /13-markdown-preview/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/setup/README.md -------------------------------------------------------------------------------- /13-markdown-preview/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-markdown": "^5.0.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/setup/public/favicon.ico -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/setup/public/logo192.png -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/setup/public/logo512.png -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/public/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/13-markdown-preview/setup/public/testing.png -------------------------------------------------------------------------------- /13-markdown-preview/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import ReactMarkdown from 'react-markdown' 3 | 4 | function App() { 5 | return

markdown preview starter

6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /13-markdown-preview/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | -------------------------------------------------------------------------------- /14-pagination/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /14-pagination/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/final/README.md -------------------------------------------------------------------------------- /14-pagination/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /14-pagination/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/final/public/favicon.ico -------------------------------------------------------------------------------- /14-pagination/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/final/public/logo192.png -------------------------------------------------------------------------------- /14-pagination/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/final/public/logo512.png -------------------------------------------------------------------------------- /14-pagination/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /14-pagination/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /14-pagination/final/src/Follower.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Follower = ({ avatar_url, html_url, login }) => { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Follower 16 | -------------------------------------------------------------------------------- /14-pagination/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /14-pagination/final/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | import paginate from './utils' 3 | const url = 'https://api.github.com/users/john-smilga/followers?per_page=100' 4 | 5 | export const useFetch = () => { 6 | const [loading, setLoading] = useState(true) 7 | const [data, setData] = useState([]) 8 | 9 | const getProducts = async () => { 10 | const response = await fetch(url) 11 | const data = await response.json() 12 | setData(paginate(data)) 13 | setLoading(false) 14 | } 15 | 16 | useEffect(() => { 17 | getProducts() 18 | }, []) 19 | return { loading, data } 20 | } 21 | -------------------------------------------------------------------------------- /14-pagination/final/src/utils.js: -------------------------------------------------------------------------------- 1 | const paginate = (followers) => { 2 | const itemsPerPage = 10 3 | const numberOfPages = Math.ceil(followers.length / itemsPerPage) 4 | 5 | const newFollowers = Array.from({ length: numberOfPages }, (_, index) => { 6 | const start = index * itemsPerPage 7 | return followers.slice(start, start + itemsPerPage) 8 | }) 9 | 10 | return newFollowers 11 | } 12 | 13 | export default paginate 14 | -------------------------------------------------------------------------------- /14-pagination/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /14-pagination/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/setup/README.md -------------------------------------------------------------------------------- /14-pagination/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "CI= react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /14-pagination/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/setup/public/favicon.ico -------------------------------------------------------------------------------- /14-pagination/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/setup/public/logo192.png -------------------------------------------------------------------------------- /14-pagination/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/14-pagination/setup/public/logo512.png -------------------------------------------------------------------------------- /14-pagination/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /14-pagination/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /14-pagination/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useFetch } from './useFetch' 3 | import Follower from './Follower' 4 | function App() { 5 | return

pagination starter

6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /14-pagination/setup/src/Follower.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Follower = () => { 4 | return

follower component

5 | } 6 | 7 | export default Follower 8 | -------------------------------------------------------------------------------- /14-pagination/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /14-pagination/setup/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | import paginate from './utils' 3 | const url = 'https://api.github.com/users/john-smilga/followers?per_page=100' 4 | 5 | export const useFetch = () => { 6 | const [loading, setLoading] = useState(true) 7 | const [data, setData] = useState([]) 8 | 9 | const getProducts = async () => { 10 | const response = await fetch(url) 11 | const data = await response.json() 12 | setData(data) 13 | setLoading(false) 14 | } 15 | 16 | useEffect(() => { 17 | getProducts() 18 | }, []) 19 | return { loading, data } 20 | } 21 | -------------------------------------------------------------------------------- /14-pagination/setup/src/utils.js: -------------------------------------------------------------------------------- 1 | const paginate = () => {} 2 | 3 | export default paginate 4 | -------------------------------------------------------------------------------- /15-movie-db/final/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .env -------------------------------------------------------------------------------- /15-movie-db/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/final/README.md -------------------------------------------------------------------------------- /15-movie-db/final/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /15-movie-db/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/final/public/favicon.ico -------------------------------------------------------------------------------- /15-movie-db/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/final/public/logo192.png -------------------------------------------------------------------------------- /15-movie-db/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/final/public/logo512.png -------------------------------------------------------------------------------- /15-movie-db/final/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /15-movie-db/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /15-movie-db/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Switch, Route } from 'react-router-dom' 3 | 4 | import Home from './Home' 5 | import Movie from './SingleMovie' 6 | 7 | function App() { 8 | return ( 9 | 10 | 11 | 12 | 13 | } /> 14 | 15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /15-movie-db/final/src/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Form from './SearchForm' 3 | import Movies from './Movies' 4 | const Home = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 | ) 11 | } 12 | 13 | export default Home 14 | -------------------------------------------------------------------------------- /15-movie-db/final/src/Movies.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | import { Link } from 'react-router-dom' 4 | const url = 5 | 'https://upload.wikimedia.org/wikipedia/commons/f/fc/No_picture_available.png' 6 | 7 | const Movies = () => { 8 | const { movies, isLoading } = useGlobalContext() 9 | 10 | if (isLoading) { 11 | return
12 | } 13 | return ( 14 |
15 | {movies.map((movie) => { 16 | const { imdbID: id, Poster: poster, Title: title, Year: year } = movie 17 | 18 | return ( 19 | 20 |
21 | {title} 22 |
23 |

{title}

24 |

{year}

25 |
26 |
27 | 28 | ) 29 | })} 30 |
31 | ) 32 | } 33 | 34 | export default Movies 35 | -------------------------------------------------------------------------------- /15-movie-db/final/src/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | const SearchForm = () => { 4 | const { query, setQuery, error } = useGlobalContext() 5 | return ( 6 | e.preventDefault()}> 7 |

search movies

8 | setQuery(e.target.value)} 13 | /> 14 | {error.show &&
{error.msg}
} 15 | 16 | ) 17 | } 18 | 19 | export default SearchForm 20 | -------------------------------------------------------------------------------- /15-movie-db/final/src/SingleMovie.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useParams, Link } from 'react-router-dom' 3 | import { API_ENDPOINT } from './context' 4 | import useFetch from './useFetch' 5 | const SingleMovie = () => { 6 | const { id } = useParams() 7 | const { isLoading, error, data: movie } = useFetch(`&i=${id}`) 8 | 9 | if (isLoading) { 10 | return
11 | } 12 | if (error.show) { 13 | return ( 14 |
15 |

{error.msg}

16 | 17 | back to movies 18 | 19 |
20 | ) 21 | } 22 | const { Poster: poster, Title: title, Plot: plot, Year: year } = movie 23 | return ( 24 |
25 | {title} 26 |
27 |

{title}

28 |

{plot}

29 |

{year}

30 | 31 | back to movies 32 | 33 |
34 |
35 | ) 36 | } 37 | 38 | export default SingleMovie 39 | -------------------------------------------------------------------------------- /15-movie-db/final/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | // make sure to use https 3 | import useFetch from './useFetch' 4 | export const API_ENDPOINT = `https://www.omdbapi.com/?apikey=${process.env.REACT_APP_MOVIE_API_KEY}` 5 | const AppContext = React.createContext() 6 | 7 | const AppProvider = ({ children }) => { 8 | const [query, setQuery] = useState('batman') 9 | const { isLoading, error, data: movies } = useFetch(`&s=${query}`) 10 | 11 | return ( 12 | 13 | {children} 14 | 15 | ) 16 | } 17 | // make sure use 18 | export const useGlobalContext = () => { 19 | return useContext(AppContext) 20 | } 21 | 22 | export { AppContext, AppProvider } 23 | -------------------------------------------------------------------------------- /15-movie-db/final/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | import { AppProvider } from './context' 6 | import { BrowserRouter as Router } from 'react-router-dom' 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ) 17 | -------------------------------------------------------------------------------- /15-movie-db/final/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | const API_ENDPOINT = `https://www.omdbapi.com/?apikey=${process.env.REACT_APP_MOVIE_API_KEY}` 3 | 4 | const useFetch = (urlParams) => { 5 | const [isLoading, setIsLoading] = useState(true) 6 | const [error, setError] = useState({ show: false, msg: '' }) 7 | const [data, setData] = useState(null) 8 | const fetchMovies = async (url) => { 9 | setIsLoading(true) 10 | try { 11 | const response = await fetch(url) 12 | const data = await response.json() 13 | 14 | if (data.Response === 'True') { 15 | setData(data.Search || data) 16 | 17 | setError({ show: false, msg: '' }) 18 | } else { 19 | setError({ show: true, msg: data.Error }) 20 | } 21 | setIsLoading(false) 22 | } catch (error) { 23 | console.log(error) 24 | } 25 | } 26 | 27 | useEffect(() => { 28 | fetchMovies(`${API_ENDPOINT}${urlParams}`) 29 | }, [urlParams]) 30 | return { isLoading, error, data } 31 | } 32 | 33 | export default useFetch 34 | -------------------------------------------------------------------------------- /15-movie-db/setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .env -------------------------------------------------------------------------------- /15-movie-db/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/setup/README.md -------------------------------------------------------------------------------- /15-movie-db/setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "CI= react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /15-movie-db/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/setup/public/favicon.ico -------------------------------------------------------------------------------- /15-movie-db/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/setup/public/logo192.png -------------------------------------------------------------------------------- /15-movie-db/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cyddharth-Gupta/react-workshop/33679e75f67252058ac3452b0201181f3bb5f264/15-movie-db/setup/public/logo512.png -------------------------------------------------------------------------------- /15-movie-db/setup/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /15-movie-db/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Switch, Route } from 'react-router-dom' 3 | 4 | import Home from './Home' 5 | import Movie from './SingleMovie' 6 | 7 | function App() { 8 | return

movie DB starter

9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Form from './SearchForm' 3 | import Movies from './Movies' 4 | const Home = () => { 5 | return

movie component

6 | } 7 | 8 | export default Home 9 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/Movies.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | import { Link } from 'react-router-dom' 4 | const url = 5 | 'https://upload.wikimedia.org/wikipedia/commons/f/fc/No_picture_available.png' 6 | 7 | const Movies = () => { 8 | return

movies component

9 | } 10 | 11 | export default Movies 12 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | const SearchForm = () => { 4 | return

search component

5 | } 6 | 7 | export default SearchForm 8 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/SingleMovie.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useParams, Link } from 'react-router-dom' 3 | import { API_ENDPOINT } from './context' 4 | 5 | const SingleMovie = () => { 6 | return

single movie

7 | } 8 | 9 | export default SingleMovie 10 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | // make sure to use https 3 | export const API_ENDPOINT = `https://www.omdbapi.com/?apikey=${process.env.REACT_APP_MOVIE_API_KEY}` 4 | const AppContext = React.createContext() 5 | 6 | const AppProvider = ({ children }) => { 7 | return {children} 8 | } 9 | // make sure use 10 | export const useGlobalContext = () => { 11 | return useContext(AppContext) 12 | } 13 | 14 | export { AppContext, AppProvider } 15 | -------------------------------------------------------------------------------- /15-movie-db/setup/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | import { AppProvider } from './context' 6 | import { BrowserRouter as Router } from 'react-router-dom' 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ) 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------