├── 1-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 ├── 10-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 ├── 11-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 ├── 12-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 ├── 13-stripe-submenus ├── 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 │ │ ├── Hero.js │ │ ├── Navbar.js │ │ ├── Sidebar.js │ │ ├── Submenu.js │ │ ├── context.js │ │ ├── data.js │ │ ├── images │ │ ├── hero.svg │ │ ├── logo.svg │ │ └── phone.svg │ │ ├── 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 │ ├── Hero.js │ ├── Navbar.js │ ├── Sidebar.js │ ├── Submenu.js │ ├── context.js │ ├── data.js │ ├── images │ ├── hero.svg │ ├── logo.svg │ └── phone.svg │ ├── index.css │ └── index.js ├── 14-cart ├── 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 │ │ ├── CartContainer.js │ │ ├── CartItem.js │ │ ├── Navbar.js │ │ ├── context.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ └── reducer.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 │ ├── CartContainer.js │ ├── CartItem.js │ ├── Navbar.js │ ├── context.js │ ├── data.js │ ├── index.css │ ├── index.js │ └── reducer.js ├── 15-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 ├── 16-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 ├── 17-random-person ├── 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 ├── 18-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 ├── 19-stock-photos ├── 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 │ │ ├── Photo.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 │ ├── Photo.js │ ├── index.css │ └── index.js ├── 2-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 ├── 20-dark-mode ├── 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 │ │ ├── Article.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 │ ├── Article.js │ ├── data.js │ ├── index.css │ └── index.js ├── 21-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 ├── 22-hacker-news ├── 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 │ │ ├── Buttons.js │ │ ├── SearchForm.js │ │ ├── Stories.js │ │ ├── actions.js │ │ ├── context.js │ │ ├── index.css │ │ ├── index.js │ │ └── reducer.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 │ ├── Buttons.js │ ├── SearchForm.js │ ├── Stories.js │ ├── actions.js │ ├── context.js │ ├── index.css │ ├── index.js │ └── reducer.js ├── 23-quiz ├── 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 │ │ ├── Modal.js │ │ ├── SetupForm.js │ │ ├── context.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 │ ├── Modal.js │ ├── SetupForm.js │ ├── context.js │ ├── index.css │ └── index.js ├── 3-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 ├── 4-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 ├── 5-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 ├── 6-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 ├── 7-slider ├── final │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── Alternative.js │ │ ├── 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 ├── 8-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 ├── 9-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 └── README.md /1-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 | -------------------------------------------------------------------------------- /1-birthday-reminder/final/README.md: -------------------------------------------------------------------------------- 1 | ## Idea 2 | 3 | [https://uidesigndaily.com/](https://uidesigndaily.com/posts/sketch-birthdays-list-card-widget-day-1042) 4 | -------------------------------------------------------------------------------- /1-birthday-reminder/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/final/public/favicon.ico -------------------------------------------------------------------------------- /1-birthday-reminder/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/final/public/logo192.png -------------------------------------------------------------------------------- /1-birthday-reminder/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/final/public/logo512.png -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-birthday-reminder/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-birthday-reminder/setup/README.md: -------------------------------------------------------------------------------- 1 | ## Idea 2 | 3 | [https://uidesigndaily.com/](https://uidesigndaily.com/posts/sketch-birthdays-list-card-widget-day-1042) 4 | -------------------------------------------------------------------------------- /1-birthday-reminder/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/setup/public/favicon.ico -------------------------------------------------------------------------------- /1-birthday-reminder/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/setup/public/logo192.png -------------------------------------------------------------------------------- /1-birthday-reminder/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/1-birthday-reminder/setup/public/logo512.png -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /1-birthday-reminder/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /1-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 | const [people, setPeople] = useState(data) 6 | return
7 |
8 |

{people.length} birthdays today

9 | 10 | 13 |
14 | 15 |
; 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /1-birthday-reminder/setup/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 | {name} 10 |
11 |

{name}

12 |

{age} years

13 |
14 |
15 | })} 16 | 17 | ); 18 | }; 19 | 20 | export default List; 21 | -------------------------------------------------------------------------------- /1-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-grocery-bud/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/final/README.md -------------------------------------------------------------------------------- /10-grocery-bud/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/final/public/favicon.ico -------------------------------------------------------------------------------- /10-grocery-bud/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/final/public/logo192.png -------------------------------------------------------------------------------- /10-grocery-bud/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/final/public/logo512.png -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-grocery-bud/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-grocery-bud/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/setup/README.md -------------------------------------------------------------------------------- /10-grocery-bud/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/setup/public/favicon.ico -------------------------------------------------------------------------------- /10-grocery-bud/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/setup/public/logo192.png -------------------------------------------------------------------------------- /10-grocery-bud/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/10-grocery-bud/setup/public/logo512.png -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-grocery-bud/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /10-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 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-navbar/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/final/README.md -------------------------------------------------------------------------------- /11-navbar/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/final/public/favicon.ico -------------------------------------------------------------------------------- /11-navbar/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/final/public/logo192.png -------------------------------------------------------------------------------- /11-navbar/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/final/public/logo512.png -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-navbar/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-navbar/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/setup/README.md -------------------------------------------------------------------------------- /11-navbar/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/setup/public/favicon.ico -------------------------------------------------------------------------------- /11-navbar/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/setup/public/logo192.png -------------------------------------------------------------------------------- /11-navbar/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/11-navbar/setup/public/logo512.png -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-navbar/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /11-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-sidebar-modal/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/final/README.md -------------------------------------------------------------------------------- /12-sidebar-modal/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/final/public/favicon.ico -------------------------------------------------------------------------------- /12-sidebar-modal/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/final/public/logo192.png -------------------------------------------------------------------------------- /12-sidebar-modal/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/final/public/logo512.png -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-sidebar-modal/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-sidebar-modal/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/setup/README.md -------------------------------------------------------------------------------- /12-sidebar-modal/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/setup/public/favicon.ico -------------------------------------------------------------------------------- /12-sidebar-modal/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/setup/public/logo192.png -------------------------------------------------------------------------------- /12-sidebar-modal/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/12-sidebar-modal/setup/public/logo512.png -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-sidebar-modal/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /12-sidebar-modal/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react' 2 | -------------------------------------------------------------------------------- /12-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 | -------------------------------------------------------------------------------- /13-stripe-submenus/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-stripe-submenus/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/final/README.md -------------------------------------------------------------------------------- /13-stripe-submenus/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/final/public/favicon.ico -------------------------------------------------------------------------------- /13-stripe-submenus/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/final/public/logo192.png -------------------------------------------------------------------------------- /13-stripe-submenus/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/final/public/logo512.png -------------------------------------------------------------------------------- /13-stripe-submenus/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-stripe-submenus/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /13-stripe-submenus/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './Navbar'; 3 | import Hero from './Hero'; 4 | import Sidebar from './Sidebar'; 5 | import Submenu from './Submenu'; 6 | function App() { 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /13-stripe-submenus/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 | -------------------------------------------------------------------------------- /13-stripe-submenus/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-stripe-submenus/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/setup/README.md -------------------------------------------------------------------------------- /13-stripe-submenus/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/setup/public/favicon.ico -------------------------------------------------------------------------------- /13-stripe-submenus/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/setup/public/logo192.png -------------------------------------------------------------------------------- /13-stripe-submenus/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/13-stripe-submenus/setup/public/logo512.png -------------------------------------------------------------------------------- /13-stripe-submenus/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-stripe-submenus/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from './Navbar' 3 | import Hero from './Hero' 4 | import Sidebar from './Sidebar' 5 | import Submenu from './Submenu' 6 | function App() { 7 | return ( 8 | <> 9 |

stripe submenus setup

10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/Hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import phoneImg from './images/phone.svg' 3 | 4 | const Hero = () => { 5 | return

hero component

6 | } 7 | 8 | export default Hero 9 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import logo from './images/logo.svg' 3 | import { FaBars } from 'react-icons/fa' 4 | 5 | const Navbar = () => { 6 | return

navbar component

7 | } 8 | 9 | export default Navbar 10 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaTimes } from 'react-icons/fa' 3 | import sublinks from './data' 4 | 5 | const Sidebar = () => { 6 | return

sidebar component

7 | } 8 | 9 | export default Sidebar 10 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/Submenu.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from 'react' 2 | 3 | const Submenu = () => { 4 | return

submenu component

5 | } 6 | 7 | export default Submenu 8 | -------------------------------------------------------------------------------- /13-stripe-submenus/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react' 2 | import sublinks from './data' 3 | -------------------------------------------------------------------------------- /13-stripe-submenus/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 | -------------------------------------------------------------------------------- /14-cart/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-cart/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/final/README.md -------------------------------------------------------------------------------- /14-cart/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/final/public/favicon.ico -------------------------------------------------------------------------------- /14-cart/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/final/public/logo192.png -------------------------------------------------------------------------------- /14-cart/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/final/public/logo512.png -------------------------------------------------------------------------------- /14-cart/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-cart/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /14-cart/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | // components 5 | import Navbar from './Navbar' 6 | import CartContainer from './CartContainer' 7 | // items 8 | 9 | function App() { 10 | const { loading } = useGlobalContext() 11 | if (loading) { 12 | return ( 13 |
14 |

Loading...

15 |
16 | ) 17 | } 18 | return ( 19 |
20 | 21 | 22 |
23 | ) 24 | } 25 | 26 | export default App 27 | -------------------------------------------------------------------------------- /14-cart/final/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | const Navbar = () => { 4 | const { amount } = useGlobalContext() 5 | return ( 6 | 19 | ) 20 | } 21 | 22 | export default Navbar 23 | -------------------------------------------------------------------------------- /14-cart/final/src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 1, 4 | title: 'Samsung Galaxy S7', 5 | price: 599.99, 6 | img: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png', 8 | amount: 1, 9 | }, 10 | { 11 | id: 2, 12 | title: 'google pixel ', 13 | price: 499.99, 14 | img: 15 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583371867/phone-1_gvesln.png', 16 | amount: 1, 17 | }, 18 | { 19 | id: 3, 20 | title: 'Xiaomi Redmi Note 2', 21 | price: 699.99, 22 | img: 23 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368224/phone-3_h2s6fo.png', 24 | amount: 1, 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /14-cart/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 | -------------------------------------------------------------------------------- /14-cart/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-cart/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/setup/README.md -------------------------------------------------------------------------------- /14-cart/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/setup/public/favicon.ico -------------------------------------------------------------------------------- /14-cart/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/setup/public/logo192.png -------------------------------------------------------------------------------- /14-cart/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/setup/public/logo512.png -------------------------------------------------------------------------------- /14-cart/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-cart/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /14-cart/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | // components 5 | import Navbar from './Navbar' 6 | import CartContainer from './CartContainer' 7 | // items 8 | 9 | function App() { 10 | // if (loading) { 11 | // return ( 12 | //
13 | //

Loading...

14 | //
15 | // ) 16 | // } 17 | return ( 18 |
19 | 20 | 21 |
22 | ) 23 | } 24 | 25 | export default App 26 | -------------------------------------------------------------------------------- /14-cart/setup/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | const Navbar = () => { 4 | return ( 5 | 18 | ) 19 | } 20 | 21 | export default Navbar 22 | -------------------------------------------------------------------------------- /14-cart/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useReducer, useEffect } from 'react' 2 | import cartItems from './data' 3 | import reducer from './reducer' 4 | // ATTENTION!!!!!!!!!! 5 | // I SWITCHED TO PERMANENT DOMAIN 6 | const url = 'https://course-api.com/react-useReducer-cart-project' 7 | const AppContext = React.createContext() 8 | 9 | const AppProvider = ({ children }) => { 10 | const [cart, setCart] = useState(cartItems) 11 | 12 | return ( 13 | 18 | {children} 19 | 20 | ) 21 | } 22 | // make sure use 23 | export const useGlobalContext = () => { 24 | return useContext(AppContext) 25 | } 26 | 27 | export { AppContext, AppProvider } 28 | -------------------------------------------------------------------------------- /14-cart/setup/src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 1, 4 | title: 'Samsung Galaxy S7', 5 | price: 599.99, 6 | img: 7 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png', 8 | amount: 1, 9 | }, 10 | { 11 | id: 2, 12 | title: 'google pixel ', 13 | price: 499.99, 14 | img: 15 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583371867/phone-1_gvesln.png', 16 | amount: 1, 17 | }, 18 | { 19 | id: 3, 20 | title: 'Xiaomi Redmi Note 2', 21 | price: 699.99, 22 | img: 23 | 'https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368224/phone-3_h2s6fo.png', 24 | amount: 1, 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /14-cart/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 | -------------------------------------------------------------------------------- /14-cart/setup/src/reducer.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/14-cart/setup/src/reducer.js -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-cocktails/final/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /15-cocktails/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/final/public/favicon.ico -------------------------------------------------------------------------------- /15-cocktails/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/final/public/logo192.png -------------------------------------------------------------------------------- /15-cocktails/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/final/public/logo512.png -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-cocktails/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-cocktails/final/src/components/Hero.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/final/src/components/Hero.js -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-cocktails/setup/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /15-cocktails/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/setup/public/favicon.ico -------------------------------------------------------------------------------- /15-cocktails/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/setup/public/logo192.png -------------------------------------------------------------------------------- /15-cocktails/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/15-cocktails/setup/public/logo512.png -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-cocktails/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /15-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 | -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-markdown-preview/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/final/README.md -------------------------------------------------------------------------------- /16-markdown-preview/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/final/public/favicon.ico -------------------------------------------------------------------------------- /16-markdown-preview/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/final/public/logo192.png -------------------------------------------------------------------------------- /16-markdown-preview/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/final/public/logo512.png -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-markdown-preview/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /16-markdown-preview/final/public/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/final/public/testing.png -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-markdown-preview/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/setup/README.md -------------------------------------------------------------------------------- /16-markdown-preview/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/setup/public/favicon.ico -------------------------------------------------------------------------------- /16-markdown-preview/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/setup/public/logo192.png -------------------------------------------------------------------------------- /16-markdown-preview/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/setup/public/logo512.png -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-markdown-preview/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /16-markdown-preview/setup/public/testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/16-markdown-preview/setup/public/testing.png -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /16-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 | -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /17-random-person/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/final/README.md -------------------------------------------------------------------------------- /17-random-person/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/final/public/favicon.ico -------------------------------------------------------------------------------- /17-random-person/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/final/public/logo192.png -------------------------------------------------------------------------------- /17-random-person/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/final/public/logo512.png -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /17-random-person/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /17-random-person/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/setup/README.md -------------------------------------------------------------------------------- /17-random-person/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/setup/public/favicon.ico -------------------------------------------------------------------------------- /17-random-person/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/setup/public/logo192.png -------------------------------------------------------------------------------- /17-random-person/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/17-random-person/setup/public/logo512.png -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /17-random-person/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17-random-person/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { 3 | FaEnvelopeOpen, 4 | FaUser, 5 | FaCalendarTimes, 6 | FaMap, 7 | FaPhone, 8 | FaLock, 9 | } from 'react-icons/fa' 10 | const url = 'https://randomuser.me/api/' 11 | const defaultImage = 'https://randomuser.me/api/portraits/men/75.jpg' 12 | function App() { 13 | return

random user starter

14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /17-random-person/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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-pagination/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/final/README.md -------------------------------------------------------------------------------- /18-pagination/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/final/public/favicon.ico -------------------------------------------------------------------------------- /18-pagination/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/final/public/logo192.png -------------------------------------------------------------------------------- /18-pagination/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/final/public/logo512.png -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-pagination/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-pagination/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/setup/README.md -------------------------------------------------------------------------------- /18-pagination/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/setup/public/favicon.ico -------------------------------------------------------------------------------- /18-pagination/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/setup/public/logo192.png -------------------------------------------------------------------------------- /18-pagination/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/18-pagination/setup/public/logo512.png -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-pagination/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-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 | -------------------------------------------------------------------------------- /18-pagination/setup/src/utils.js: -------------------------------------------------------------------------------- 1 | const paginate = () => {} 2 | 3 | export default paginate 4 | -------------------------------------------------------------------------------- /19-stock-photos/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 -------------------------------------------------------------------------------- /19-stock-photos/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/final/README.md -------------------------------------------------------------------------------- /19-stock-photos/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/final/public/favicon.ico -------------------------------------------------------------------------------- /19-stock-photos/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/final/public/logo192.png -------------------------------------------------------------------------------- /19-stock-photos/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/final/public/logo512.png -------------------------------------------------------------------------------- /19-stock-photos/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 | -------------------------------------------------------------------------------- /19-stock-photos/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /19-stock-photos/final/src/Photo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Photo = ({ 4 | urls: { regular }, 5 | alt_description, 6 | likes, 7 | user: { 8 | name, 9 | portfolio_url, 10 | profile_image: { medium }, 11 | }, 12 | }) => { 13 | return ( 14 |
15 | {alt_description} 16 |
17 |
18 |

{name}

19 |

{likes} likes

20 |
21 | 22 | 23 | 24 |
25 |
26 | ) 27 | } 28 | 29 | export default Photo 30 | -------------------------------------------------------------------------------- /19-stock-photos/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 | -------------------------------------------------------------------------------- /19-stock-photos/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 -------------------------------------------------------------------------------- /19-stock-photos/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/setup/README.md -------------------------------------------------------------------------------- /19-stock-photos/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/setup/public/favicon.ico -------------------------------------------------------------------------------- /19-stock-photos/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/setup/public/logo192.png -------------------------------------------------------------------------------- /19-stock-photos/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/19-stock-photos/setup/public/logo512.png -------------------------------------------------------------------------------- /19-stock-photos/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 | -------------------------------------------------------------------------------- /19-stock-photos/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /19-stock-photos/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { FaSearch } from 'react-icons/fa' 3 | import Photo from './Photo' 4 | // const clientID = `?client_id=${process.env.REACT_APP_ACCESS_KEY}` 5 | const mainUrl = `https://api.unsplash.com/photos/` 6 | const searchUrl = `https://api.unsplash.com/search/photos/` 7 | 8 | function App() { 9 | return

stock photos starter

10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /19-stock-photos/setup/src/Photo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Photo = () => { 4 | return

photo component

5 | } 6 | 7 | export default Photo 8 | -------------------------------------------------------------------------------- /19-stock-photos/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 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-tours/final/README.md: -------------------------------------------------------------------------------- 1 | ## React Projects Starter APP 2 | -------------------------------------------------------------------------------- /2-tours/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/final/public/favicon.ico -------------------------------------------------------------------------------- /2-tours/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/final/public/logo192.png -------------------------------------------------------------------------------- /2-tours/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/final/public/logo512.png -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-tours/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-tours/setup/README.md: -------------------------------------------------------------------------------- 1 | ## React Projects Starter APP 2 | -------------------------------------------------------------------------------- /2-tours/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/setup/public/favicon.ico -------------------------------------------------------------------------------- /2-tours/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/setup/public/logo192.png -------------------------------------------------------------------------------- /2-tours/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/2-tours/setup/public/logo512.png -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-tours/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /2-tours/setup/src/Tour.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Tour = ({ id, image, info, price, name, removeTour }) => { 4 | const [readMore, setReadMore] = useState(false) 5 | 6 | return
7 | {name} 8 |
9 |
10 |

{name}

11 |

${price}

12 |
13 |

14 | {readMore ? info : `${info.substring(0, 200)}...`} 15 | 16 |

17 | 20 |
21 |
; 22 | }; 23 | 24 | export default Tour; 25 | -------------------------------------------------------------------------------- /2-tours/setup/src/Tours.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Tour from './Tour'; 3 | const Tours = ({ tours, removeTour }) => { 4 | 5 | return
6 |
7 |

our tours

8 |
9 |
10 | {tours.map((tour) => { 11 | return 12 | })} 13 |
14 |
15 |
; 16 | }; 17 | 18 | export default Tours; 19 | -------------------------------------------------------------------------------- /2-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 | -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /20-dark-mode/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/final/README.md -------------------------------------------------------------------------------- /20-dark-mode/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/final/public/favicon.ico -------------------------------------------------------------------------------- /20-dark-mode/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/final/public/logo192.png -------------------------------------------------------------------------------- /20-dark-mode/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/final/public/logo512.png -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /20-dark-mode/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /20-dark-mode/final/src/Article.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import moment from 'moment' 3 | const Article = ({ title, snippet, date, length }) => { 4 | return ( 5 |
6 |

{title}

7 |
8 | {moment(date).format('dddd Do, YYYY')} 9 | {length} min read 10 |
11 |

{snippet}

12 |
13 | ) 14 | } 15 | 16 | export default Article 17 | -------------------------------------------------------------------------------- /20-dark-mode/final/src/data.js: -------------------------------------------------------------------------------- 1 | const articles = [ 2 | { 3 | id: 1, 4 | title: 'the WET Codbase', 5 | date: new Date(2020, 9, 4), 6 | length: 11, 7 | snippet: `Come waste your time with me`, 8 | }, 9 | { 10 | id: 2, 11 | title: 'goodby, clean code', 12 | date: new Date(2019, 10, 22), 13 | length: 5, 14 | snippet: `Let clean code guide you. Then let it go.`, 15 | }, 16 | { 17 | id: 3, 18 | title: 'my decade in review', 19 | date: new Date(2018, 7, 11), 20 | length: 5, 21 | snippet: `A personal reflection.`, 22 | }, 23 | { 24 | id: 4, 25 | title: 'what are the react team principles', 26 | date: new Date(2015, 5, 4), 27 | length: 5, 28 | snippet: `UI Before API.`, 29 | }, 30 | ] 31 | 32 | export default articles 33 | -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /20-dark-mode/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/setup/README.md -------------------------------------------------------------------------------- /20-dark-mode/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/setup/public/favicon.ico -------------------------------------------------------------------------------- /20-dark-mode/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/setup/public/logo192.png -------------------------------------------------------------------------------- /20-dark-mode/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/20-dark-mode/setup/public/logo512.png -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /20-dark-mode/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /20-dark-mode/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import data from './data' 3 | import Article from './Article' 4 | 5 | function App() { 6 | return

dark mode starter

7 | } 8 | 9 | export default App 10 | -------------------------------------------------------------------------------- /20-dark-mode/setup/src/Article.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import moment from 'moment' 3 | const Article = () => { 4 | return

article component

5 | } 6 | 7 | export default Article 8 | -------------------------------------------------------------------------------- /20-dark-mode/setup/src/data.js: -------------------------------------------------------------------------------- 1 | const articles = [ 2 | { 3 | id: 1, 4 | title: 'the WET Codbase', 5 | date: new Date(2020, 9, 4), 6 | length: 11, 7 | snippet: `Come waste your time with me`, 8 | }, 9 | { 10 | id: 2, 11 | title: 'goodby, clean code', 12 | date: new Date(2019, 10, 22), 13 | length: 5, 14 | snippet: `Let clean code guide you. Then let it go.`, 15 | }, 16 | { 17 | id: 3, 18 | title: 'my decade in review', 19 | date: new Date(2018, 7, 11), 20 | length: 5, 21 | snippet: `A personal reflection.`, 22 | }, 23 | { 24 | id: 4, 25 | title: 'what are the react team principles', 26 | date: new Date(2015, 5, 4), 27 | length: 5, 28 | snippet: `UI Before API.`, 29 | }, 30 | ] 31 | 32 | export default articles 33 | -------------------------------------------------------------------------------- /20-dark-mode/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 | -------------------------------------------------------------------------------- /21-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 -------------------------------------------------------------------------------- /21-movie-db/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/final/README.md -------------------------------------------------------------------------------- /21-movie-db/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/final/public/favicon.ico -------------------------------------------------------------------------------- /21-movie-db/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/final/public/logo192.png -------------------------------------------------------------------------------- /21-movie-db/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/final/public/logo512.png -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-movie-db/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 -------------------------------------------------------------------------------- /21-movie-db/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/setup/README.md -------------------------------------------------------------------------------- /21-movie-db/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/setup/public/favicon.ico -------------------------------------------------------------------------------- /21-movie-db/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/setup/public/logo192.png -------------------------------------------------------------------------------- /21-movie-db/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/21-movie-db/setup/public/logo512.png -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-movie-db/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /21-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 | -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/final/README.md -------------------------------------------------------------------------------- /22-hacker-news/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/final/public/favicon.ico -------------------------------------------------------------------------------- /22-hacker-news/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/final/public/logo192.png -------------------------------------------------------------------------------- /22-hacker-news/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/final/public/logo512.png -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /22-hacker-news/final/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SearchForm from './SearchForm' 3 | import Stories from './Stories' 4 | import Buttons from './Buttons' 5 | function App() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /22-hacker-news/final/src/Buttons.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const Buttons = () => { 5 | const { isLoading, page, nbPages, handlePage } = useGlobalContext() 6 | 7 | return ( 8 |
9 | 12 |

13 | {page + 1} of {nbPages} 14 |

15 | 18 |
19 | ) 20 | } 21 | 22 | export default Buttons 23 | -------------------------------------------------------------------------------- /22-hacker-news/final/src/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const SearchForm = () => { 5 | const { query, handleSearch } = useGlobalContext() 6 | 7 | return ( 8 |
e.preventDefault()}> 9 |

search hacker news

10 | handleSearch(e.target.value)} 15 | /> 16 |
17 | ) 18 | } 19 | 20 | export default SearchForm 21 | -------------------------------------------------------------------------------- /22-hacker-news/final/src/actions.js: -------------------------------------------------------------------------------- 1 | export const SET_LOADING = 'SET_LOADING' 2 | export const SET_STORIES = 'SET_STORIES' 3 | export const REMOVE_STORY = 'REMOVE_STORY' 4 | export const HANDLE_PAGE = 'HANDLE_PAGE' 5 | export const HANDLE_SEARCH = 'HANDLE_SEARCH' 6 | -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/setup/README.md -------------------------------------------------------------------------------- /22-hacker-news/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/setup/public/favicon.ico -------------------------------------------------------------------------------- /22-hacker-news/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/setup/public/logo192.png -------------------------------------------------------------------------------- /22-hacker-news/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/22-hacker-news/setup/public/logo512.png -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SearchForm from './SearchForm' 3 | import Stories from './Stories' 4 | import Buttons from './Buttons' 5 | function App() { 6 | return

hacker news starter

7 | } 8 | 9 | export default App 10 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/Buttons.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const Buttons = () => { 5 | return

button container

6 | } 7 | 8 | export default Buttons 9 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/SearchForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const SearchForm = () => { 5 | return

search form

6 | } 7 | 8 | export default SearchForm 9 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/Stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { useGlobalContext } from './context' 4 | 5 | const Stories = () => { 6 | return

stories component

7 | } 8 | 9 | export default Stories 10 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/actions.js: -------------------------------------------------------------------------------- 1 | export const SET_LOADING = 'SET_LOADING' 2 | export const SET_STORIES = 'SET_STORIES' 3 | export const REMOVE_STORY = 'REMOVE_STORY' 4 | export const HANDLE_PAGE = 'HANDLE_PAGE' 5 | export const HANDLE_SEARCH = 'HANDLE_SEARCH' 6 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useReducer } from 'react' 2 | 3 | import { 4 | SET_LOADING, 5 | SET_STORIES, 6 | REMOVE_STORY, 7 | HANDLE_PAGE, 8 | HANDLE_SEARCH, 9 | } from './actions' 10 | import reducer from './reducer' 11 | 12 | const API_ENDPOINT = 'https://hn.algolia.com/api/v1/search?' 13 | 14 | const initialState = {} 15 | 16 | const AppContext = React.createContext() 17 | 18 | const AppProvider = ({ children }) => { 19 | return {children} 20 | } 21 | // make sure use 22 | export const useGlobalContext = () => { 23 | return useContext(AppContext) 24 | } 25 | 26 | export { AppContext, AppProvider } 27 | -------------------------------------------------------------------------------- /22-hacker-news/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 | -------------------------------------------------------------------------------- /22-hacker-news/setup/src/reducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | SET_LOADING, 3 | SET_STORIES, 4 | REMOVE_STORY, 5 | HANDLE_PAGE, 6 | HANDLE_SEARCH, 7 | } from './actions' 8 | 9 | const reducer = () => {} 10 | export default reducer 11 | -------------------------------------------------------------------------------- /23-quiz/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 | -------------------------------------------------------------------------------- /23-quiz/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/final/README.md -------------------------------------------------------------------------------- /23-quiz/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/final/public/favicon.ico -------------------------------------------------------------------------------- /23-quiz/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/final/public/logo192.png -------------------------------------------------------------------------------- /23-quiz/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/final/public/logo512.png -------------------------------------------------------------------------------- /23-quiz/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 | -------------------------------------------------------------------------------- /23-quiz/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /23-quiz/final/src/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Loading = () => { 4 | return ( 5 |
6 |
7 |
8 | ) 9 | } 10 | 11 | export default Loading 12 | -------------------------------------------------------------------------------- /23-quiz/final/src/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const Modal = () => { 5 | const { isModalOpen, closeModal, correct, questions } = useGlobalContext() 6 | return ( 7 |
12 |
13 |

congrats!

14 |

15 | You answered {((correct / questions.length) * 100).toFixed(0)}% of 16 | questions correctly 17 |

18 | 21 |
22 |
23 | ) 24 | } 25 | 26 | export default Modal 27 | -------------------------------------------------------------------------------- /23-quiz/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 | 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ) 15 | -------------------------------------------------------------------------------- /23-quiz/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 | -------------------------------------------------------------------------------- /23-quiz/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/setup/README.md -------------------------------------------------------------------------------- /23-quiz/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/setup/public/favicon.ico -------------------------------------------------------------------------------- /23-quiz/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/setup/public/logo192.png -------------------------------------------------------------------------------- /23-quiz/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/23-quiz/setup/public/logo512.png -------------------------------------------------------------------------------- /23-quiz/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 | -------------------------------------------------------------------------------- /23-quiz/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /23-quiz/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | import SetupForm from './SetupForm' 5 | import Loading from './Loading' 6 | import Modal from './Modal' 7 | function App() { 8 | return

quiz starter

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

modal component

6 | } 7 | 8 | export default Modal 9 | -------------------------------------------------------------------------------- /23-quiz/setup/src/SetupForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useGlobalContext } from './context' 3 | 4 | const SetupForm = () => { 5 | return

setup form

6 | } 7 | 8 | export default SetupForm 9 | -------------------------------------------------------------------------------- /23-quiz/setup/src/context.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import React, { useState, useContext, useEffect } from 'react' 3 | 4 | const table = { 5 | sports: 21, 6 | history: 23, 7 | politics: 24, 8 | } 9 | 10 | const API_ENDPOINT = 'https://opentdb.com/api.php?' 11 | 12 | const url = '' 13 | 14 | const AppContext = React.createContext() 15 | 16 | const AppProvider = ({ children }) => { 17 | return {children} 18 | } 19 | // make sure use 20 | export const useGlobalContext = () => { 21 | return useContext(AppContext) 22 | } 23 | 24 | export { AppContext, AppProvider } 25 | -------------------------------------------------------------------------------- /23-quiz/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 | 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ) 15 | -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-reviews/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/final/README.md -------------------------------------------------------------------------------- /3-reviews/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/final/public/favicon.ico -------------------------------------------------------------------------------- /3-reviews/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/final/public/logo192.png -------------------------------------------------------------------------------- /3-reviews/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/final/public/logo512.png -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-reviews/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-reviews/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/setup/README.md -------------------------------------------------------------------------------- /3-reviews/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/setup/public/favicon.ico -------------------------------------------------------------------------------- /3-reviews/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/setup/public/logo192.png -------------------------------------------------------------------------------- /3-reviews/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/3-reviews/setup/public/logo512.png -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /3-reviews/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /3-reviews/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Review from './Review'; 3 | function App() { 4 | return
5 |
6 |
7 |

our reviews

8 |
9 |
10 | 11 |
12 |
; 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /3-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-accordion/final/README.md: -------------------------------------------------------------------------------- 1 | #### Idea 2 | 3 | [uidesigndaily](https://uidesigndaily.com/posts/sketch-accordion-website-day-1175) 4 | 5 | ![](./idea.png); 6 | -------------------------------------------------------------------------------- /4-accordion/final/idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/final/idea.png -------------------------------------------------------------------------------- /4-accordion/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/final/public/favicon.ico -------------------------------------------------------------------------------- /4-accordion/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/final/public/logo192.png -------------------------------------------------------------------------------- /4-accordion/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/final/public/logo512.png -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-accordion/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-accordion/setup/idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/setup/idea.png -------------------------------------------------------------------------------- /4-accordion/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/setup/public/favicon.ico -------------------------------------------------------------------------------- /4-accordion/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/setup/public/logo192.png -------------------------------------------------------------------------------- /4-accordion/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/4-accordion/setup/public/logo512.png -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-accordion/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /4-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-menu/final/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-5-menu 2 | -------------------------------------------------------------------------------- /5-menu/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/favicon.ico -------------------------------------------------------------------------------- /5-menu/final/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-1.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-10.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-2.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-3.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-4.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-5.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-6.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-7.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-8.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/images/item-9.jpeg -------------------------------------------------------------------------------- /5-menu/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/logo192.png -------------------------------------------------------------------------------- /5-menu/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/final/public/logo512.png -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-menu/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-menu/setup/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-5-menu 2 | -------------------------------------------------------------------------------- /5-menu/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/favicon.ico -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-1.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-10.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-2.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-3.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-4.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-5.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-6.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-7.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-8.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/images/item-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/images/item-9.jpeg -------------------------------------------------------------------------------- /5-menu/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/logo192.png -------------------------------------------------------------------------------- /5-menu/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/5-menu/setup/public/logo512.png -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-menu/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /5-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 | -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-tabs/final/README.md: -------------------------------------------------------------------------------- 1 | #### IN ACTION 2 | 3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/) 4 | -------------------------------------------------------------------------------- /6-tabs/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/final/public/favicon.ico -------------------------------------------------------------------------------- /6-tabs/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/final/public/logo192.png -------------------------------------------------------------------------------- /6-tabs/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/final/public/logo512.png -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-tabs/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-tabs/setup/README.md: -------------------------------------------------------------------------------- 1 | #### IN ACTION 2 | 3 | [Portfolio](https://gatsby-strapi-portfolio-project.netlify.app/) 4 | -------------------------------------------------------------------------------- /6-tabs/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/setup/public/favicon.ico -------------------------------------------------------------------------------- /6-tabs/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/setup/public/logo192.png -------------------------------------------------------------------------------- /6-tabs/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/6-tabs/setup/public/logo512.png -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-tabs/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /6-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 | -------------------------------------------------------------------------------- /7-slider/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 | -------------------------------------------------------------------------------- /7-slider/final/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-7-slider 2 | 3 | #### IN ACTION 4 | 5 | [Gatsby-Airtable Project](https://gatsby-airtable-design-project.netlify.app/) 6 | -------------------------------------------------------------------------------- /7-slider/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/final/public/favicon.ico -------------------------------------------------------------------------------- /7-slider/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/final/public/logo192.png -------------------------------------------------------------------------------- /7-slider/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/final/public/logo512.png -------------------------------------------------------------------------------- /7-slider/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 | -------------------------------------------------------------------------------- /7-slider/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /7-slider/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 Alternative from './Alternative'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /7-slider/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 | -------------------------------------------------------------------------------- /7-slider/setup/README.md: -------------------------------------------------------------------------------- 1 | # react-projects-7-slider 2 | 3 | #### IN ACTION 4 | 5 | [Gatsby-Airtable Project](https://gatsby-airtable-design-project.netlify.app/) 6 | -------------------------------------------------------------------------------- /7-slider/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/setup/public/favicon.ico -------------------------------------------------------------------------------- /7-slider/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/setup/public/logo192.png -------------------------------------------------------------------------------- /7-slider/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/7-slider/setup/public/logo512.png -------------------------------------------------------------------------------- /7-slider/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 | -------------------------------------------------------------------------------- /7-slider/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /7-slider/setup/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { FiChevronRight, FiChevronLeft } from 'react-icons/fi'; 3 | import { FaQuoteRight } from 'react-icons/fa'; 4 | import data from './data'; 5 | function App() { 6 | return

slider project setup

; 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /7-slider/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 | -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-lorem-ipsum/final/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/final/README.md -------------------------------------------------------------------------------- /8-lorem-ipsum/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/final/public/favicon.ico -------------------------------------------------------------------------------- /8-lorem-ipsum/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/final/public/logo192.png -------------------------------------------------------------------------------- /8-lorem-ipsum/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/final/public/logo512.png -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-lorem-ipsum/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-lorem-ipsum/setup/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/setup/README.md -------------------------------------------------------------------------------- /8-lorem-ipsum/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/setup/public/favicon.ico -------------------------------------------------------------------------------- /8-lorem-ipsum/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/setup/public/logo192.png -------------------------------------------------------------------------------- /8-lorem-ipsum/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/8-lorem-ipsum/setup/public/logo512.png -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-lorem-ipsum/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /8-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 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-color-generator/final/README.md: -------------------------------------------------------------------------------- 1 | #### Values JS 2 | 3 | [values.js](https://github.com/noeldelgado/values.js) 4 | -------------------------------------------------------------------------------- /9-color-generator/final/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/final/public/favicon.ico -------------------------------------------------------------------------------- /9-color-generator/final/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/final/public/logo192.png -------------------------------------------------------------------------------- /9-color-generator/final/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/final/public/logo512.png -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-color-generator/final/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-color-generator/setup/README.md: -------------------------------------------------------------------------------- 1 | #### Values JS 2 | 3 | [values.js](https://github.com/noeldelgado/values.js) 4 | -------------------------------------------------------------------------------- /9-color-generator/setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/setup/public/favicon.ico -------------------------------------------------------------------------------- /9-color-generator/setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/setup/public/logo192.png -------------------------------------------------------------------------------- /9-color-generator/setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxsk8er/react-projects-master/3e88edb7cfedeb83b139d41e78136fe2195571b6/9-color-generator/setup/public/logo512.png -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-color-generator/setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-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 | -------------------------------------------------------------------------------- /9-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 | --------------------------------------------------------------------------------