├── CRUD-api-testing-with-Hoppscotch ├── .dockerignore ├── .gitignore ├── Dockerfile ├── controllers │ ├── students.controllers.js │ └── testing.controllers.js ├── docker-compose.yml ├── index.js ├── package-lock.json ├── package.json ├── readme.md ├── routes │ ├── students.routes.js │ └── testing.routes.js └── util │ └── db.js ├── MERN-awesome-blog ├── Readme.md ├── client │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Assets │ │ │ ├── blogLogo.gif │ │ │ └── blogLogo.png │ │ ├── actions │ │ │ └── blogPosts.js │ │ ├── api │ │ │ └── api.js │ │ ├── components │ │ │ ├── BlogPosts │ │ │ │ ├── BlogPosts.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── BlogPostsForm │ │ │ │ ├── BlogPostsForm.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── Blogs │ │ │ │ ├── Blogs.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.css │ │ ├── index.js │ │ ├── reducers │ │ │ ├── blogPosts.js │ │ │ └── index.js │ │ └── styles │ │ │ └── app.styles.js │ └── yarn.lock └── server │ ├── .gitignore │ ├── controllers │ └── blogPosts.controller.js │ ├── models │ └── blogs.js │ ├── package-lock.json │ ├── package.json │ ├── routes │ └── blogPosts.routes.js │ └── server.js ├── MERN-awesome-crud ├── Readme.md ├── client │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── assets │ │ └── back.png │ │ ├── components │ │ ├── CreateTodo │ │ │ ├── CreateTodo.js │ │ │ └── index.js │ │ ├── DisplayTodo │ │ │ ├── DisplayTodo.js │ │ │ └── index.js │ │ ├── TodoLists │ │ │ ├── TodoLists.js │ │ │ └── index.js │ │ └── UpdateTodo │ │ │ ├── UpdateTodo.js │ │ │ └── index.js │ │ ├── index.css │ │ └── index.js └── server │ ├── .gitignore │ ├── configurations │ └── database.js │ ├── controllers │ └── controllers.js │ ├── models │ └── models.js │ ├── package-lock.json │ ├── package.json │ ├── routes │ └── todo.routes.js │ └── server.js ├── MERN-roadtrip-mapper ├── client │ ├── .env.sample │ ├── .eslintcache │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo.svg │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── api │ │ │ └── API.js │ │ ├── assets │ │ │ ├── MapPinLogo.svg │ │ │ ├── MarkerPopup.svg │ │ │ ├── mapperPin.svg │ │ │ ├── road trip mapper.png │ │ │ └── roadtrip.svg │ │ ├── components │ │ │ ├── RoadTripNav │ │ │ │ ├── RoadTripNav.js │ │ │ │ └── index.js │ │ │ └── TripEntryForm │ │ │ │ ├── TripEntryForm.css │ │ │ │ ├── TripEntryForm.js │ │ │ │ └── index.js │ │ ├── index.js │ │ └── styles │ │ │ └── index.css │ └── yarn.lock ├── readme.md └── server │ ├── .eslintrc.js │ ├── .gitignore │ ├── Procfile │ ├── README.md │ ├── package-lock.json │ ├── package.json │ └── src │ ├── index.js │ ├── middlewares.js │ ├── models │ └── LogEntry.model.js │ └── routes │ └── logs.routes.js ├── MERN-saas-project ├── client │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Assets │ │ │ ├── Calorie Journal.png │ │ │ ├── delete.png │ │ │ ├── edit.png │ │ │ ├── food.png │ │ │ ├── logo.png │ │ │ └── user.png │ │ ├── components │ │ │ ├── AddFood │ │ │ │ ├── AddFood.js │ │ │ │ └── index.js │ │ │ ├── AddUser │ │ │ │ ├── AddUser.js │ │ │ │ └── index.js │ │ │ ├── CalorieChart │ │ │ │ ├── CalorieChart.js │ │ │ │ └── index.js │ │ │ ├── DisplayFoodList │ │ │ │ ├── DisplayFoodList.js │ │ │ │ └── index.js │ │ │ ├── EditFood │ │ │ │ ├── EditFood.js │ │ │ │ └── index.js │ │ │ ├── Navbar │ │ │ │ ├── Navbar.js │ │ │ │ └── index.js │ │ │ └── UserChart │ │ │ │ ├── UserChart.js │ │ │ │ └── index.js │ │ ├── index.css │ │ ├── index.js │ │ └── reportWebVitals.js │ └── yarn.lock └── server │ ├── .gitignore │ ├── app.js │ ├── models │ ├── calorie.model.js │ └── users.model.js │ ├── package-lock.json │ ├── package.json │ ├── readme.md │ └── routes │ ├── calorie.routes.js │ └── users.routes.js ├── README.md ├── React-firebase-notebook ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── components │ │ ├── Navbar │ │ │ ├── Navbar.css │ │ │ ├── Navbar.js │ │ │ └── index.js │ │ ├── NoteAdd │ │ │ ├── NoteAdd.css │ │ │ ├── NoteAdd.js │ │ │ └── index.js │ │ └── Notebook │ │ │ ├── Notebook.css │ │ │ ├── Notebook.js │ │ │ └── index.js │ ├── index.css │ └── index.js └── yarn.lock ├── React-practice-app-project-in-depth-guide ├── README.md ├── a).javascript-xml-intro │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── b).class-component-counter │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Counter.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── c).function-component-counter │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Counter.js │ │ ├── FunctionCounterHooks.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── d).react-context │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Counter.js │ │ ├── FunctionCounterHooks.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── e).continious-deployment-continious-integration │ ├── README.md │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ ├── precache-manifest.edbb1fe1fff394d6c1350c34b30f1632.js │ │ ├── robots.txt │ │ ├── service-worker.js │ │ └── static │ │ │ ├── css │ │ │ ├── main.5f361e03.chunk.css │ │ │ └── main.5f361e03.chunk.css.map │ │ │ └── js │ │ │ ├── 2.ac73e37f.chunk.js │ │ │ ├── 2.ac73e37f.chunk.js.LICENSE.txt │ │ │ ├── 2.ac73e37f.chunk.js.map │ │ │ ├── main.214e7834.chunk.js │ │ │ ├── main.214e7834.chunk.js.map │ │ │ ├── runtime-main.daaa0316.js │ │ │ └── runtime-main.daaa0316.js.map │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Counter.js │ │ ├── FunctionCounterHooks.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── f).kitchen-app-component-breakdown │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Recipe.js │ │ ├── RecipeList.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── g).ingredient-jsx │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Recipe.js │ │ ├── RecipeIngredient.js │ │ ├── RecipeIngredientList.js │ │ ├── RecipeList.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── h).recipe-ingredient │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ └── recipe-list.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── i).complete-recipe-ingredient │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── j).recipe-ingredient-add-remove-interactivity │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── k).recipe-ingredient-add-remove-context │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── l).useEffect-hook-localstorage │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── m).recipe-ingredient-edit-jsx │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── EditRecipePannel.js │ │ │ ├── IngredientEdit.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-edit.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── n).recipe-ingredient-edit-css │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── EditRecipePannel.js │ │ │ ├── IngredientEdit.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-edit.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── o).recipe-ingredient-state-recipe-ingredient-value │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── EditRecipePannel.js │ │ │ ├── IngredientEdit.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-edit.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock ├── p).recipe-ingredient-input-interactivity │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── App.js │ │ │ ├── EditRecipePannel.js │ │ │ ├── IngredientEdit.js │ │ │ ├── Recipe.js │ │ │ ├── RecipeIngredient.js │ │ │ ├── RecipeIngredientList.js │ │ │ └── RecipeList.js │ │ ├── css │ │ │ ├── App.css │ │ │ ├── button.css │ │ │ ├── font.css │ │ │ ├── index.css │ │ │ ├── recipe-edit.css │ │ │ ├── recipe-list.css │ │ │ └── recipe.css │ │ ├── fonts │ │ │ ├── Dance.ttf │ │ │ └── Dance.woff │ │ └── index.js │ └── yarn.lock └── q).complete-kitchen-react-app │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── components │ │ ├── App.js │ │ ├── EditRecipePannel.js │ │ ├── IngredientEdit.js │ │ ├── Recipe.js │ │ ├── RecipeIngredient.js │ │ ├── RecipeIngredientList.js │ │ └── RecipeList.js │ ├── css │ │ ├── App.css │ │ ├── backgroundAnim.css │ │ ├── button.css │ │ ├── font.css │ │ ├── index.css │ │ ├── recipe-edit.css │ │ ├── recipe-list.css │ │ └── recipe.css │ ├── fonts │ │ ├── Dance.ttf │ │ └── Dance.woff │ └── index.js │ └── yarn.lock ├── Template-grabber-Node-CLI ├── .gitignore ├── LICENSE ├── bin │ └── template-grabber ├── package-lock.json ├── package.json ├── projectTemplates │ ├── javascript │ │ ├── package.json │ │ └── src │ │ │ └── index.js │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logoChakati.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── assets │ │ │ │ └── templateGrabberLogo.png │ │ │ ├── components │ │ │ │ └── App │ │ │ │ │ ├── App.css │ │ │ │ │ ├── App.js │ │ │ │ │ └── index.js │ │ │ ├── index.css │ │ │ └── index.js │ │ └── yarn.lock │ └── viteReact │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── favicon.ico │ │ ├── index.css │ │ ├── main.jsx │ │ └── templateGrabberLogo.png │ │ ├── vite.config.js │ │ └── yarn.lock ├── readme.md └── src │ ├── interfaceCommand.js │ └── main.js ├── mern-ebook └── MERN eBook.pdf ├── rock-paper-scissor-spock-in-react ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Game.css │ ├── Snap.css │ ├── Snap.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js └── yarn.lock └── web-scraping-with-nodejs ├── .gitignore ├── .vscode └── launch.json ├── index.js ├── movies.csv ├── movies.json ├── package-lock.json ├── package.json ├── the_godfather.jpg └── the_godfather_2.jpg /CRUD-api-testing-with-Hoppscotch/.dockerignore: -------------------------------------------------------------------------------- 1 | # Node 2 | ## Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | ## Dependency directories 10 | node_modules 11 | 12 | .git 13 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:14.1.0 2 | 3 | EXPOSE 8080 4 | 5 | WORKDIR /src 6 | 7 | COPY package*.json ./ 8 | 9 | RUN npm install 10 | 11 | COPY . . 12 | 13 | CMD ["node", "index.js"] 14 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/controllers/testing.controllers.js: -------------------------------------------------------------------------------- 1 | exports.getAppInfo = (req, res, next) => { 2 | return res.status(200).json({ "Aviyel CRUD API Testing": "v1.0.0" }); 3 | }; 4 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3.8" 2 | 3 | services: 4 | app: 5 | container_name: crudapi_aviyel 6 | image: pramitmarattha/aviyel-crudapi:0.0.1 7 | build: 8 | context: . 9 | ports: 10 | - "8080:8080" 11 | env_file: .env 12 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const app = express(); 3 | require("dotenv").config(); 4 | 5 | app.use(express.json()); 6 | 7 | const PORT = process.env.PORT || 5000; 8 | 9 | app.use((req, res, next) => { 10 | res.setHeader("Access-Control-Allow-Origin", "*"); 11 | res.setHeader( 12 | "Access-Control-Allow-Methods", 13 | "GET, POST, OPTIONS, PUT, PATCH, DELETE" 14 | ); 15 | res.setHeader( 16 | "Access-Control-Allow-Headers", 17 | "X-Requested-With,content-type" 18 | ); 19 | res.setHeader("Access-Control-Allow-Credentials", true); 20 | next(); 21 | }); 22 | 23 | app.use("/testing", require("./routes/testing.routes.js")); 24 | app.use("/students", require("./routes/students.routes.js")); 25 | 26 | app.listen(process.env.PORT, () => { 27 | console.log(`App is currently running at http://localhost:${PORT}`); 28 | }); 29 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crud-api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "crud", 11 | "api", 12 | "harper", 13 | "aviyel" 14 | ], 15 | "author": "pramit", 16 | "license": "ISC", 17 | "dependencies": { 18 | "dotenv": "^10.0.0", 19 | "express": "^4.17.1", 20 | "harperive": "^2.0.1", 21 | "nodemon": "^2.0.12" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/routes/students.routes.js: -------------------------------------------------------------------------------- 1 | const router = require("express").Router(); 2 | const controller = require("../controllers/" + "students" + ".controllers"); 3 | 4 | router 5 | .get("/", controller.getAllStudent) 6 | .get("/:id", controller.getOneStudent) 7 | .post("/", controller.createOneStudent) 8 | .put("/:id", controller.updateOneStudent) 9 | .delete("/:id", controller.deleteOneStudent); 10 | 11 | module.exports = router; 12 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/routes/testing.routes.js: -------------------------------------------------------------------------------- 1 | const controller = require("../controllers/testing.controllers.js"); 2 | const router = require("express").Router(); 3 | 4 | router.get("/appinfo", controller.getAppInfo); 5 | 6 | module.exports = router; 7 | -------------------------------------------------------------------------------- /CRUD-api-testing-with-Hoppscotch/util/db.js: -------------------------------------------------------------------------------- 1 | const harperive = require("harperive"); 2 | 3 | const configuration = { 4 | harperHost: process.env.HARPER_HOST_INSTANCE_URL, 5 | username: process.env.HARPER_INSTANCE_USERNAME, 6 | password: process.env.HARPER_INSTANCE_PASSWORD, 7 | schema: process.env.HARPER_INSTANCE_SCHEMA, 8 | }; 9 | 10 | const db = new harperive.Client(configuration); 11 | 12 | module.exports = db; 13 | -------------------------------------------------------------------------------- /MERN-awesome-blog/Readme.md: -------------------------------------------------------------------------------- 1 | ## MERN awesome Blog -------------------------------------------------------------------------------- /MERN-awesome-blog/client/.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 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-blog/client/public/favicon.ico -------------------------------------------------------------------------------- /MERN-awesome-blog/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | Awesome Mern Blog 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-blog/client/public/logo192.png -------------------------------------------------------------------------------- /MERN-awesome-blog/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-blog/client/public/logo512.png -------------------------------------------------------------------------------- /MERN-awesome-blog/client/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 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .App { 7 | /* text-align: center; */ 8 | } 9 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/Assets/blogLogo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-blog/client/src/Assets/blogLogo.gif -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/Assets/blogLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-blog/client/src/Assets/blogLogo.png -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/api/api.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const url = "http://localhost:4000/api/blogs"; 4 | 5 | export const fetchBlogPosts = () => axios.get(url); 6 | export const addNewBlogPost = (newBlog) => axios.post(url, newBlog); 7 | export const editSingleBlogPost = (id, editedBlogPost) => 8 | axios.patch(`${url}/${id}`, editedBlogPost); 9 | export const upvoteSingleBlogPost = (id) => 10 | axios.patch(`${url}/${id}/likedBlogPost`); 11 | export const removeBlogPost = (id) => axios.delete(`${url}/${id}`); 12 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/BlogPosts/index.js: -------------------------------------------------------------------------------- 1 | import BlogPosts from "./BlogPosts"; 2 | export default BlogPosts; 3 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/BlogPostsForm/index.js: -------------------------------------------------------------------------------- 1 | import BlogPostsForm from "./BlogPostsForm"; 2 | export default BlogPostsForm; 3 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/BlogPostsForm/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from "@material-ui/core/styles"; 2 | 3 | export default makeStyles((theme) => ({ 4 | root: { 5 | "& .MuiTextField-root": { 6 | margin: theme.spacing(1), 7 | }, 8 | }, 9 | paper: { 10 | padding: theme.spacing(5), 11 | }, 12 | chooseFile: { 13 | width: "95%", 14 | margin: "10px 0", 15 | }, 16 | publishButton: { 17 | marginBottom: 10, 18 | }, 19 | form: { 20 | display: "flex", 21 | flexWrap: "wrap", 22 | justifyContent: "center", 23 | }, 24 | })); 25 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/Blogs/Blogs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Grid, CircularProgress } from "@material-ui/core"; 3 | import { useSelector } from "react-redux"; 4 | 5 | import BlogPosts from "../BlogPosts"; 6 | import useStyles from "./styles"; 7 | 8 | const Blogs = ({ setBlogPostId }) => { 9 | const posts = useSelector((state) => state.posts); 10 | const classes = useStyles(); 11 | 12 | console.log("this is post", posts); 13 | 14 | return !posts.length ? ( 15 | 16 | ) : ( 17 | 23 | {posts.map((post) => ( 24 | 25 | 26 | 27 | ))} 28 | 29 | ); 30 | }; 31 | 32 | export default Blogs; 33 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/Blogs/index.js: -------------------------------------------------------------------------------- 1 | import Blogs from "./Blogs"; 2 | export default Blogs; 3 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/components/Blogs/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from "@material-ui/core/styles"; 2 | 3 | export default makeStyles((theme) => ({ 4 | mainContainer: { 5 | display: "flex", 6 | alignItems: "center", 7 | }, 8 | smMargin: { 9 | margin: theme.spacing(1), 10 | }, 11 | actionDiv: { 12 | textAlign: "center", 13 | }, 14 | })); 15 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;1,200;1,300&display=swap"); 2 | 3 | body { 4 | margin: 0; 5 | font-family: "Poppins", sans-serif; 6 | background-image: linear-gradient( 7 | to right, 8 | rgb(242, 112, 156), 9 | rgb(255, 148, 114) 10 | ); 11 | width: 99vw; 12 | align-items: center; 13 | } 14 | 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 17 | monospace; 18 | } 19 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Provider } from "react-redux"; 4 | import { createStore, applyMiddleware, compose } from "redux"; 5 | import thunk from "redux-thunk"; 6 | import { reducers } from "./reducers"; 7 | import App from "./App"; 8 | import "./index.css"; 9 | 10 | const store = createStore(reducers, compose(applyMiddleware(thunk))); 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.getElementById("root") 17 | ); 18 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/reducers/blogPosts.js: -------------------------------------------------------------------------------- 1 | export default (posts = [], action) => { 2 | switch (action.type) { 3 | case "GET_ALL_BLOG_POST": 4 | return action.payload; 5 | case "ADD_NEW_BLOG_POST": 6 | return [...posts, action.payload]; 7 | case "EDIT_SINGLE_BLOG_POST": 8 | return posts.map((post) => 9 | post._id === action.payload._id ? action.payload : post 10 | ); 11 | case "UPVOTE_SINGLE_BLOG_POST": 12 | return posts.map((post) => 13 | post._id === action.payload._id ? action.payload : post 14 | ); 15 | case "DELETE_SINGLE_BLOG_POST": 16 | return posts.filter((post) => post._id !== action.payload); 17 | default: 18 | return posts; 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | 3 | import posts from "./blogPosts"; 4 | 5 | export const reducers = combineReducers({ posts }); 6 | -------------------------------------------------------------------------------- /MERN-awesome-blog/client/src/styles/app.styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from "@material-ui/core/styles"; 2 | 3 | export default makeStyles(() => ({ 4 | navigationBar: { 5 | borderRadius: 10, 6 | margin: "6px 0px", 7 | display: "flex", 8 | flexDirection: "row", 9 | justifyContent: "center", 10 | alignItems: "center", 11 | }, 12 | title: { 13 | color: "#8661d1", 14 | fontFamily: "Poppins", 15 | fontStyle: "bold", 16 | }, 17 | image: { 18 | marginRight: "25px", 19 | }, 20 | })); 21 | -------------------------------------------------------------------------------- /MERN-awesome-blog/server/models/blogs.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const blogSchema = mongoose.Schema({ 4 | title: String, 5 | description: String, 6 | tags: [String], 7 | fileUpload: String, 8 | upvote: { 9 | type: Number, 10 | default: 0, 11 | }, 12 | creator: String, 13 | createdAt: { 14 | type: Date, 15 | default: new Date(), 16 | }, 17 | }); 18 | 19 | var BlogPost = mongoose.model("BlogArticle", blogSchema); 20 | 21 | export default BlogPost; 22 | -------------------------------------------------------------------------------- /MERN-awesome-blog/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "type":"module", 6 | "devDependencies": {}, 7 | "scripts": { 8 | "start": "nodemon server.js" 9 | }, 10 | "dependencies": { 11 | "body-parser": "^1.19.0", 12 | "cors": "^2.8.5", 13 | "dotenv": "^10.0.0", 14 | "express": "^4.17.1", 15 | "mongoose": "^6.0.12", 16 | "nodemon": "^2.0.14" 17 | }, 18 | "keywords": [], 19 | "author": "", 20 | "license": "ISC", 21 | "description": "" 22 | } 23 | -------------------------------------------------------------------------------- /MERN-awesome-blog/server/routes/blogPosts.routes.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { 4 | getAllBlogPosts, 5 | addBlogPost, 6 | getSinglePost, 7 | updateSingleBlogPost, 8 | removeSingleBlogPost, 9 | likeBlogPost, 10 | } from "../controllers/blogPosts.controller.js"; 11 | 12 | const router = express.Router(); 13 | 14 | router.get("/", getAllBlogPosts); 15 | router.post("/", addBlogPost); 16 | router.get("/:id", getSinglePost); 17 | router.patch("/:id", updateSingleBlogPost); 18 | router.delete("/:id", removeSingleBlogPost); 19 | router.patch("/:id/likedBlogPost", likeBlogPost); 20 | 21 | export default router; 22 | -------------------------------------------------------------------------------- /MERN-awesome-blog/server/server.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import bodyParser from "body-parser"; 3 | import mongoose from "mongoose"; 4 | import cors from "cors"; 5 | import dotenv from "dotenv"; 6 | 7 | import blogPosts from "./routes/blogPosts.routes.js"; 8 | 9 | dotenv.config(); 10 | 11 | const app = express(); 12 | 13 | app.use(bodyParser.json({ limit: "50mb", extended: true })); 14 | app.use(bodyParser.urlencoded({ limit: "50mb", extended: true })); 15 | app.use(cors()); 16 | 17 | app.use("/api/blogs", blogPosts); 18 | 19 | const DB_CONNECTION = process.env.DATABASE_URL; 20 | const PORT = process.env.PORT || 6000; 21 | 22 | mongoose 23 | .connect(DB_CONNECTION, { 24 | useNewUrlParser: true, 25 | useUnifiedTopology: true, 26 | }) 27 | .then(() => 28 | app.listen(PORT, () => 29 | console.log(`Server is running at: http://localhost:${PORT}`) 30 | ) 31 | ) 32 | .catch((error) => console.log(error)); 33 | -------------------------------------------------------------------------------- /MERN-awesome-crud/Readme.md: -------------------------------------------------------------------------------- 1 | ![Demo](https://aviyel.com/assets/uploads/files/1635343378933-image-resized.png) 2 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/.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 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | MERN TODO 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/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 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Route } from 'react-router-dom'; 2 | import DisplayTodo from './components/DisplayTodo'; 3 | import CreateTodo from './components/CreateTodo'; 4 | import './App.css'; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 | 11 | 12 | 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/assets/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-awesome-crud/client/src/assets/back.png -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/components/CreateTodo/index.js: -------------------------------------------------------------------------------- 1 | import CreateTodo from './CreateTodo'; 2 | export default CreateTodo; 3 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/components/DisplayTodo/index.js: -------------------------------------------------------------------------------- 1 | import DisplayTodo from './DisplayTodo'; 2 | export default DisplayTodo; 3 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/components/TodoLists/TodoLists.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TodoLists = ({ todoInfos, editHandler, deleteHandler }) => { 4 | const { _id, title, description } = todoInfos; 5 | 6 | return ( 7 |
  • 8 |
    9 |

    {title}

    10 |

    11 |

    {description}

    12 |
    13 |

    14 |
    15 | 18 | 21 |
    22 |
    • 23 | ); 24 | }; 25 | 26 | export default TodoLists; 27 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/components/TodoLists/index.js: -------------------------------------------------------------------------------- 1 | import TodoLists from './TodoLists'; 2 | export default TodoLists; 3 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/components/UpdateTodo/index.js: -------------------------------------------------------------------------------- 1 | import UpdateTodo from './UpdateTodo'; 2 | export default UpdateTodo; 3 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /MERN-awesome-crud/client/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 | -------------------------------------------------------------------------------- /MERN-awesome-crud/server/configurations/database.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | require("dotenv").config(); 3 | 4 | const dbURL = process.env.MONGO_DB_URL; 5 | 6 | const configDatabase = async () => { 7 | try { 8 | await mongoose.connect(dbURL, { 9 | useNewUrlParser: true, 10 | useUnifiedTopology: true, 11 | }); 12 | console.log("Database connected"); 13 | } catch (err) { 14 | console.log(err); 15 | process.exit(1); 16 | } 17 | }; 18 | 19 | module.exports = configDatabase; 20 | -------------------------------------------------------------------------------- /MERN-awesome-crud/server/models/models.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const TodoListSchema = new mongoose.Schema({ 4 | title: { 5 | type: String, 6 | required: true, 7 | }, 8 | description: { 9 | type: String, 10 | }, 11 | date: { 12 | type: Date, 13 | default: Date.now, 14 | }, 15 | }); 16 | 17 | const AppTodo = mongoose.model("todo", TodoListSchema); 18 | 19 | module.exports = AppTodo; 20 | -------------------------------------------------------------------------------- /MERN-awesome-crud/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "nodemon server.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "cors": "^2.8.5", 14 | "dotenv": "^10.0.0", 15 | "express": "^4.17.1", 16 | "mongoose": "^6.0.8", 17 | "nodemon": "^2.0.13" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /MERN-awesome-crud/server/routes/todo.routes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const router = express.Router(); 4 | 5 | const { 6 | listAllTodo, 7 | createOneTodo, 8 | updateOneTodo, 9 | deleteTodo, 10 | } = require("../controllers/controllers.js"); 11 | 12 | router.get("/", listAllTodo); 13 | 14 | router.post("/", createOneTodo); 15 | 16 | router.put("/:id", updateOneTodo); 17 | 18 | router.delete("/:id", deleteTodo); 19 | 20 | module.exports = router; 21 | -------------------------------------------------------------------------------- /MERN-awesome-crud/server/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const cors = require("cors"); 3 | const configDatabase = require("./configurations/database.js"); 4 | const todo = require("./routes/todo.routes.js"); 5 | 6 | const dotenv = require("dotenv"); 7 | 8 | dotenv.config(); 9 | 10 | const app = express(); 11 | 12 | const PORT = process.env.PORT || 5000; 13 | 14 | //connecting to the mongodb database 15 | configDatabase(); 16 | 17 | app.use(cors({ origin: true, credentials: true })); 18 | 19 | // add the middlewares 20 | app.use(express.json({ extended: false })); 21 | app.get("/", (req, res) => 22 | res.send("Hello there!! Cheers !! The server is up and running") 23 | ); 24 | 25 | // using our routes 26 | app.use("/api/todoapp", todo); 27 | 28 | // listen 29 | app.listen(PORT, () => 30 | console.log(`Server is running on http://localhost:${PORT}`) 31 | ); 32 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/.env.sample: -------------------------------------------------------------------------------- 1 | REACT_APP_MAPBOX_TOKEN= //Token name -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/.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 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-roadtrip-mapper/client/public/favicon.ico -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | Road Trip Mappper 15 | 16 | 17 | 18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-roadtrip-mapper/client/public/logo192.png -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-roadtrip-mapper/client/public/logo512.png -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/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 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/src/assets/road trip mapper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-roadtrip-mapper/client/src/assets/road trip mapper.png -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/src/components/RoadTripNav/RoadTripNav.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as ReactNavbar from "react-responsive-animate-navbar"; 3 | // import roadTripSvg from "../../assets/roadtrip.svg"; 4 | 5 | const RoadTripNav = () => { 6 | return ( 7 | 19 | ); 20 | }; 21 | 22 | export default RoadTripNav; -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/src/components/RoadTripNav/index.js: -------------------------------------------------------------------------------- 1 | import RoadTripNav from "./RoadTripNav"; 2 | 3 | export default RoadTripNav; 4 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/src/components/TripEntryForm/index.js: -------------------------------------------------------------------------------- 1 | import TripEntryForm from "./TripEntryForm"; 2 | 3 | export default TripEntryForm; 4 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./styles/index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/readme.md: -------------------------------------------------------------------------------- 1 | ## Road Trip Mapper -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | commonjs: true, 4 | es6: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | 'airbnb-base', 9 | ], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly', 13 | }, 14 | parserOptions: { 15 | ecmaVersion: 2018, 16 | }, 17 | rules: { 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/Procfile: -------------------------------------------------------------------------------- 1 | web: node src/index.js -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/README.md: -------------------------------------------------------------------------------- 1 | # Log Entry 2 | 3 | * Title - Text 4 | * Description - Text 5 | * Comments - Text 6 | * Rating - scale of 1 - 10 7 | * Image - Text - URL 8 | * Latitude - Number 9 | * Longitude - Number 10 | * Created At - DateTime 11 | * Updated At - DateTime 12 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "node src/index.js", 8 | "dev": "nodemon src/index.js", 9 | "lint": "eslint src/" 10 | }, 11 | "keywords": [], 12 | "author": "Pramit Marattha", 13 | "license": "MIT", 14 | "dependencies": { 15 | "body-parser": "^1.19.0", 16 | "cors": "^2.8.5", 17 | "dotenv": "^8.6.0", 18 | "express": "^4.17.1", 19 | "express-rate-limit": "^5.5.1", 20 | "helmet": "^4.6.0", 21 | "mongoose": "^5.13.13", 22 | "morgan": "^1.10.0", 23 | "rate-limit-mongo": "^2.3.2" 24 | }, 25 | "devDependencies": { 26 | "eslint": "^7.15.0", 27 | "eslint-config-airbnb-base": "^14.2.1", 28 | "eslint-plugin-import": "^2.22.1", 29 | "nodemon": "^2.0.15" 30 | }, 31 | "engines": { 32 | "node": "15.4.0", 33 | "npm": "6.14.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/src/middlewares.js: -------------------------------------------------------------------------------- 1 | const notFound = (req, res, next) => { 2 | const error = new Error(`Not Found - ${req.originalUrl}`); 3 | res.status(404); 4 | next(error); 5 | }; 6 | 7 | const errorHandler = (error, req, res, next) => { 8 | const statusCode = res.statusCode === 200 ? 500 : res.statusCode; 9 | res.status(statusCode); 10 | res.json({ 11 | message: error.message, 12 | stack: process.env.NODE_ENV === "production" ? "nope" : error.stack, 13 | }); 14 | }; 15 | 16 | module.exports = { 17 | notFound, 18 | errorHandler, 19 | }; 20 | -------------------------------------------------------------------------------- /MERN-roadtrip-mapper/server/src/routes/logs.routes.js: -------------------------------------------------------------------------------- 1 | const { Router } = require("express"); 2 | 3 | const LogEntry = require("../models/LogEntry.model.js"); 4 | 5 | const { API_KEY } = process.env; 6 | 7 | const router = Router(); 8 | 9 | router.get("/", async (req, res, next) => { 10 | try { 11 | const entries = await LogEntry.find(); 12 | res.json(entries); 13 | } catch (error) { 14 | next(error); 15 | } 16 | }); 17 | 18 | router.post("/", async (req, res, next) => { 19 | try { 20 | if (req.get("X-API-KEY") !== API_KEY) { 21 | res.status(401); 22 | throw new Error("Unauthorized Access"); 23 | } 24 | const logEntry = new LogEntry(req.body); 25 | const createdEntry = await logEntry.save(); 26 | res.json(createdEntry); 27 | } catch (error) { 28 | if (error.name === "ValidationError") { 29 | res.status(422); 30 | } 31 | next(error); 32 | } 33 | }); 34 | 35 | module.exports = router; 36 | -------------------------------------------------------------------------------- /MERN-saas-project/client/.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 | -------------------------------------------------------------------------------- /MERN-saas-project/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/public/favicon.ico -------------------------------------------------------------------------------- /MERN-saas-project/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | Calorie Journal 16 | 17 | 18 | 19 |
    20 | 21 | 22 | -------------------------------------------------------------------------------- /MERN-saas-project/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Calorie Journal", 3 | "name": "Calorie Journal Application", 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 | -------------------------------------------------------------------------------- /MERN-saas-project/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 2 | import "./App.css"; 3 | import "bootstrap/dist/css/bootstrap.min.css"; 4 | 5 | import Navbar from "./components/Navbar"; 6 | import DisplayFoodList from "./components/DisplayFoodList"; 7 | import EditFood from "./components/EditFood"; 8 | import AddFood from "./components/AddFood"; 9 | import AddUser from "./components/AddUser"; 10 | 11 | function App() { 12 | return ( 13 | <> 14 | 15 | 16 |
    17 | 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | 23 |     24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/Calorie Journal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/Calorie Journal.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/delete.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/edit.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/food.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/logo.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/Assets/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/client/src/Assets/user.png -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/AddFood/index.js: -------------------------------------------------------------------------------- 1 | import AddFood from "./AddFood"; 2 | export default AddFood; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/AddUser/index.js: -------------------------------------------------------------------------------- 1 | import AddUser from "./AddUser"; 2 | export default AddUser; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/CalorieChart/index.js: -------------------------------------------------------------------------------- 1 | import CalorieChart from "./CalorieChart"; 2 | export default CalorieChart; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/DisplayFoodList/index.js: -------------------------------------------------------------------------------- 1 | import DisplayFoodList from "./DisplayFoodList"; 2 | export default DisplayFoodList; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/EditFood/index.js: -------------------------------------------------------------------------------- 1 | import EditFood from "./EditFood"; 2 | export default EditFood; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar"; 2 | export default Navbar; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/components/UserChart/index.js: -------------------------------------------------------------------------------- 1 | import UserChart from "./UserChart"; 2 | export default UserChart; 3 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:ital,wght@0,200;0,400;1,200;1,300&display=swap'); 2 | 3 | body { 4 | margin: 0; 5 | font-family: 'Fredoka One', cursive; 6 | font-family: 'Poppins', sans-serif; 7 | background-image: linear-gradient(to right,#00cfde , #05a660); 8 | 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /MERN-saas-project/client/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 reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | reportWebVitals(); 15 | -------------------------------------------------------------------------------- /MERN-saas-project/client/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /MERN-saas-project/server/app.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const cors = require("cors"); 3 | const mongoose = require("mongoose"); 4 | 5 | require("dotenv").config(); 6 | 7 | const app = express(); 8 | 9 | // app config 10 | app.use(cors()); 11 | app.use(express.json()); 12 | 13 | // port and DB config 14 | const DATABASE_CONNECTION = process.env.DATABASE_URL; 15 | const PORT = process.env.PORT || 5000; 16 | 17 | // mongoose connection 18 | mongoose 19 | .connect(DATABASE_CONNECTION, { 20 | useNewUrlParser: true, 21 | useUnifiedTopology: true, 22 | }) 23 | .then(() => 24 | app.listen(PORT, () => 25 | console.log(`Server is running at : http://localhost:${PORT}`) 26 | ) 27 | ) 28 | .catch((error) => console.error(error)); 29 | 30 | // routers 31 | const calorie = require("./routes/calorie.routes.js"); 32 | const users = require("./routes/users.routes.js"); 33 | 34 | app.use("/calorie", calorie); 35 | app.use("/users", users); 36 | -------------------------------------------------------------------------------- /MERN-saas-project/server/models/calorie.model.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const Schema = mongoose.Schema; 4 | 5 | const calorieSchema = new Schema( 6 | { 7 | username: { type: String, required: true }, 8 | description: { type: String, required: true }, 9 | calories: { type: Number, required: true }, 10 | date: { type: Date, required: true }, 11 | }, 12 | { 13 | timestamps: true, 14 | } 15 | ); 16 | 17 | const Calorie = mongoose.model("CalorieJournal", calorieSchema); 18 | 19 | module.exports = Calorie; 20 | -------------------------------------------------------------------------------- /MERN-saas-project/server/models/users.model.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const Schema = mongoose.Schema; 4 | 5 | const userSchema = new Schema( 6 | { 7 | username: { 8 | type: String, 9 | required: true, 10 | unique: true, 11 | trim: true, 12 | minlength: 2, 13 | }, 14 | }, 15 | { 16 | timestamps: true, 17 | } 18 | ); 19 | 20 | const User = mongoose.model("User", userSchema); 21 | 22 | module.exports = User; 23 | -------------------------------------------------------------------------------- /MERN-saas-project/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "nodemon app.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "body-parser": "^1.19.0", 14 | "cors": "^2.8.5", 15 | "dotenv": "^10.0.0", 16 | "express": "^4.17.1", 17 | "mongoose": "^6.0.13", 18 | "nodemon": "^2.0.15" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /MERN-saas-project/server/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/MERN-saas-project/server/readme.md -------------------------------------------------------------------------------- /MERN-saas-project/server/routes/users.routes.js: -------------------------------------------------------------------------------- 1 | const router = require("express").Router(); 2 | let User = require("../models/users.model.js"); 3 | 4 | // get user 5 | router.route("/").get((req, res) => { 6 | User.find() 7 | .then((users) => res.json(users)) 8 | .catch((err) => res.status(400).json("Error: " + err)); 9 | }); 10 | 11 | // add user 12 | router.route("/add").post((req, res) => { 13 | const username = req.body.username; 14 | 15 | const newUser = new User({ username }); 16 | 17 | newUser 18 | .save() 19 | .then(() => res.json("User added Successfully")) 20 | .catch((err) => res.status(400).json("Error: " + err)); 21 | }); 22 | 23 | module.exports = router; 24 | -------------------------------------------------------------------------------- /React-firebase-notebook/.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 | -------------------------------------------------------------------------------- /React-firebase-notebook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-firebase-notebook/public/favicon.ico -------------------------------------------------------------------------------- /React-firebase-notebook/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | React firebase Notebook 17 | 18 | 19 | 20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /React-firebase-notebook/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-firebase-notebook/public/logo192.png -------------------------------------------------------------------------------- /React-firebase-notebook/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-firebase-notebook/public/logo512.png -------------------------------------------------------------------------------- /React-firebase-notebook/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React firebase Notebook", 3 | "name": "React Firebase Notebook app", 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 | -------------------------------------------------------------------------------- /React-firebase-notebook/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .app { 7 | background-image: linear-gradient( 8 | to right, 9 | rgb(242, 112, 156), 10 | rgb(255, 148, 114) 11 | ); 12 | min-height: 100vh; 13 | width: 100vw; 14 | align-items: center; 15 | } 16 | .note-section { 17 | padding: 15px; 18 | } 19 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,100;1,400&display=swap"); 2 | .navbar { 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | width: 99.8vw; 7 | height: 70px; 8 | background: rgba(255, 255, 255, 0.15); 9 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 10 | backdrop-filter: blur(7.5px); 11 | -webkit-backdrop-filter: blur(7.5px); 12 | border-radius: 2px; 13 | border: 1px solid rgba(255, 255, 255, 0.18); 14 | } 15 | 16 | .navbar .heading { 17 | color: #8661d1; 18 | font-size: 20px; 19 | font-weight: 700; 20 | font-family: "Poppins", sans-serif; 21 | } 22 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Navbar.css"; 3 | 4 | const Navbar = () => { 5 | return ( 6 | <> 7 |
    8 |

    📓 React firebase Notebook

    9 |
    10 | 11 | ); 12 | }; 13 | 14 | export default Navbar; 15 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar.js"; 2 | export default Navbar; 3 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/components/NoteAdd/index.js: -------------------------------------------------------------------------------- 1 | import NoteAdd from "./NoteAdd"; 2 | export default NoteAdd; 3 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/components/Notebook/index.js: -------------------------------------------------------------------------------- 1 | import Notebook from "./Notebook"; 2 | export default Notebook; 3 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,100;1,400&display=swap"); 2 | 3 | body { 4 | margin: 0; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 10 | monospace; 11 | } 12 | -------------------------------------------------------------------------------- /React-firebase-notebook/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./App.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/a).javascript-xml-intro/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Introduction to JSX(JavaScript XML) 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/a).javascript-xml-intro/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/b).class-component-counter/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Class based component Counter App 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Counter from './Counter'; 4 | 5 | function App() { 6 | return ( 7 | //initial count to number zero instead of string zero 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/b).class-component-counter/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/c).function-component-counter/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Function based component Counter App 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Counter from './Counter'; 4 | import FunctionCounterHooks from './FunctionCounterHooks'; 5 | 6 | 7 | function App() { 8 | return ( 9 | <> 10 |

    Class Based Counter

    11 | {/* //initial count to number zero instead of string zero */} 12 | 13 | 14 |

    Function based Counter --Counter Hooks

    15 | 16 | 17 | ); 18 | 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/src/FunctionCounterHooks.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | export default function FunctionCountHooks({ initialCount }) { 4 | const [count, setCount] = useState(initialCount) 5 | 6 | return ( 7 |
    8 | 9 | {count} 10 | 11 |
    12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/c).function-component-counter/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/d).react-context/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | React Context 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/src/FunctionCounterHooks.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react'; 2 | import { ThemeContext } from './App'; 3 | 4 | export default function FunctionCountHooks({ initialCount }) { 5 | const [count, setCount] = useState(initialCount) 6 | const style = useContext(ThemeContext) 7 | 8 | return ( 9 |
    10 | 11 | {count} 12 | 13 |
    14 | 15 |
    16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/d).react-context/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/build/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/build/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/build/precache-manifest.edbb1fe1fff394d6c1350c34b30f1632.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "5fe2dd6ae90c933a6b5af05475118e05", 4 | "url": "/index.html" 5 | }, 6 | { 7 | "revision": "699f0f80f086c7261280", 8 | "url": "/static/css/main.5f361e03.chunk.css" 9 | }, 10 | { 11 | "revision": "f72dbd89b3ea74ebcfda", 12 | "url": "/static/js/2.ac73e37f.chunk.js" 13 | }, 14 | { 15 | "revision": "e88a3e95b5364d46e95b35ae8c0dc27d", 16 | "url": "/static/js/2.ac73e37f.chunk.js.LICENSE.txt" 17 | }, 18 | { 19 | "revision": "699f0f80f086c7261280", 20 | "url": "/static/js/main.214e7834.chunk.js" 21 | }, 22 | { 23 | "revision": "8c74a3517b4d2c4148cf", 24 | "url": "/static/js/runtime-main.daaa0316.js" 25 | } 26 | ]); -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Continuous Deployment 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/src/FunctionCounterHooks.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from 'react'; 2 | import { ThemeContext } from './App'; 3 | 4 | export default function FunctionCountHooks({ initialCount }) { 5 | const [count, setCount] = useState(initialCount) 6 | const style = useContext(ThemeContext) 7 | 8 | return ( 9 |
    10 | 11 | {count} 12 | 13 |
    14 | 15 |
    16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/e).continious-deployment-continious-integration/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Kitchen app component breakdown 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/src/Recipe.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Recipe({ name, cookTime, servings, instructions }) { 4 | return ( 5 |
    6 |
    7 |

    {name}

    8 |
    9 | 10 | 11 |
    12 |
    13 |
    14 | Servings: 15 | {servings} 16 |
    17 |
    18 | Cook Time: 19 | {cookTime} 20 |
    21 |
    22 | Instructions: 23 |
    24 | {instructions} 25 |
    26 |
    27 |
    28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/src/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Recipe from './Recipe'; 3 | 4 | export default function RecipeList({ recipes }) { 5 | return ( 6 |
    7 | {recipes.map(recipe => { 8 | return () 9 | })} 10 |
    11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/f).kitchen-app-component-breakdown/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/g).ingredient-jsx/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Recipe-Ingredient-jsx 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/src/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/src/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/src/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Recipe from './Recipe'; 3 | 4 | 5 | export default function RecipeList({ recipes }) { 6 | return ( 7 | <> 8 |
    9 | {recipes.map(recipe => { 10 | return () 11 | })} 12 |
    13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/g).ingredient-jsx/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/h).recipe-ingredient/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Styling Recipe Ingredient 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css" 4 | 5 | 6 | export default function RecipeList({ recipes }) { 7 | return ( 8 |
    9 |
    10 | {recipes.map(recipe => { 11 | return () 12 | })} 13 |
    14 |
    15 | 16 |
    17 |
    18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import '../css/font.css'; 3 | @import '../css/button.css'; 4 | 5 | *,*::before,*::after{ 6 | font-family: dance; 7 | } 8 | 9 | 10 | body{ 11 | padding:0; 12 | margin:0; 13 | } 14 | 15 | 16 | html{ 17 | font-size:25px; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:1px solid black; 3 | min-height:100vh; 4 | width:50%; 5 | 6 | } 7 | 8 | .recipe-list__add-recipe-list-button{ 9 | padding-top:30px; 10 | padding-bottom:30px; 11 | text-align:center; 12 | 13 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/h).recipe-ingredient/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-counter-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Complete Styling Recipe-Ingredient 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css" 4 | 5 | 6 | export default function RecipeList({ recipes }) { 7 | return ( 8 |
    9 |
    10 | {recipes.map(recipe => { 11 | return () 12 | })} 13 |
    14 |
    15 | 16 |
    17 |
    18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | 7 | *,*::before,*::after{ 8 | font-family: dance; 9 | } 10 | 11 | 12 | body{ 13 | padding:0; 14 | margin:0; 15 | } 16 | 17 | 18 | html{ 19 | font-size:25px; 20 | } 21 | 22 | /* utility class */ 23 | .mr-1{ 24 | margin-right: 8px; 25 | } 26 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/i).complete-recipe-ingredient/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Recipe-Ingredient add-delete button Interactivity 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css" 4 | 5 | 6 | export default function RecipeList(props) { 7 | const { recipes, handleRecipeAddButton, handleRecipeDeleteButton } = props 8 | return ( 9 |
    10 |
    11 | {recipes.map(recipe => { 12 | return () 13 | })} 14 |
    15 |
    16 | 17 |
    18 |
    19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | 7 | *,*::before,*::after{ 8 | font-family: dance; 9 | } 10 | 11 | 12 | body{ 13 | padding:0; 14 | margin:0; 15 | } 16 | 17 | 18 | html{ 19 | font-size:25px; 20 | } 21 | 22 | /* utility class */ 23 | .mr-1{ 24 | margin-right: 8px; 25 | } 26 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/j).recipe-ingredient-add-remove-interactivity/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Recipe-Ingredient add-delete by Context 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | 7 | *,*::before,*::after{ 8 | font-family: dance; 9 | } 10 | 11 | 12 | body{ 13 | padding:0; 14 | margin:0; 15 | } 16 | 17 | 18 | html{ 19 | font-size:25px; 20 | } 21 | 22 | /* utility class */ 23 | .mr-1{ 24 | margin-right: 8px; 25 | } 26 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/k).recipe-ingredient-add-remove-context/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | UseEffect-hook-localStorage 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | 7 | *,*::before,*::after{ 8 | font-family: dance; 9 | } 10 | 11 | 12 | body{ 13 | padding:0; 14 | margin:0; 15 | } 16 | 17 | 18 | html{ 19 | font-size:25px; 20 | } 21 | 22 | /* utility class */ 23 | .mr-1{ 24 | margin-right: 8px; 25 | } 26 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/l).useEffect-hook-localstorage/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Edit Recipe Pannel outline jsx 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/components/IngredientEdit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function IngredientEdit() { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | @import 'recipe-edit.css'; 7 | 8 | *,*::before,*::after{ 9 | font-family: dance; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | body{ 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | 20 | html{ 21 | font-size:25px; 22 | } 23 | 24 | /* utility class */ 25 | .mr-1{ 26 | margin-right: 8px; 27 | } 28 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/recipe-edit.css: -------------------------------------------------------------------------------- 1 | .recipe-edit{ 2 | padding:30px; 3 | padding-top:10px; 4 | position:fixed; 5 | right:0; 6 | top:0; 7 | width:50%; 8 | max-height:100%; 9 | overflow-y:auto; 10 | 11 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/m).recipe-ingredient-edit-jsx/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Styling Edit Recipe Pannel outline css 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/components/IngredientEdit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function IngredientEdit() { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | @import 'recipe-edit.css'; 7 | 8 | *,*::before,*::after{ 9 | font-family: dance; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | body{ 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | 20 | html{ 21 | font-size:25px; 22 | } 23 | 24 | /* utility class */ 25 | .mr-1{ 26 | margin-right: 8px; 27 | } 28 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/n).recipe-ingredient-edit-css/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Selected recipe-ingredient state and editing values 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/components/IngredientEdit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function IngredientEdit({ ingredient }) { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | @import 'recipe-edit.css'; 7 | 8 | *,*::before,*::after{ 9 | font-family: dance; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | body{ 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | 20 | html{ 21 | font-size:25px; 22 | } 23 | 24 | /* utility class */ 25 | .mr-1{ 26 | margin-right: 8px; 27 | } 28 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/o).recipe-ingredient-state-recipe-ingredient-value/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Selected recipe-ingredient state and editing Input values 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/components/IngredientEdit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function IngredientEdit({ ingredient, handleIngredientChange }) { 4 | 5 | function handleChange(changes) { 6 | handleIngredientChange(ingredient.id, { ...ingredient, ...changes }) 7 | } 8 | 9 | 10 | return ( 11 | <> 12 | handleChange({ name: e.target.value })}> 13 | handleChange({ amount: e.target.value })}> 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'font.css'; 3 | @import 'recipe.css'; 4 | @import 'recipe-list.css'; 5 | @import 'button.css'; 6 | @import 'recipe-edit.css'; 7 | 8 | *,*::before,*::after{ 9 | font-family: dance; 10 | box-sizing: border-box; 11 | } 12 | 13 | 14 | body{ 15 | padding:0; 16 | margin:0; 17 | } 18 | 19 | 20 | html{ 21 | font-size:25px; 22 | } 23 | 24 | /* utility class */ 25 | .mr-1{ 26 | margin-right: 8px; 27 | } 28 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/p).recipe-ingredient-input-interactivity/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/public/favicon.ico -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Complete Kitchen App 12 | 13 | 14 | 15 | 16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/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 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/components/IngredientEdit.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function IngredientEdit({ ingredient, handleIngredientChange, handleRecipeIngredientDelete }) { 4 | 5 | function handleChange(changes) { 6 | handleIngredientChange(ingredient.id, { ...ingredient, ...changes }) 7 | } 8 | 9 | 10 | return ( 11 | <> 12 | handleChange({ name: e.target.value })}> 13 | handleChange({ amount: e.target.value })}> 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/components/RecipeIngredient.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function RecipeIngredient({ name, amount }) { 4 | 5 | return ( 6 | <> 7 | {name} 8 | {amount} 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/components/RecipeIngredientList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RecipeIngredient from './RecipeIngredient'; 3 | 4 | 5 | export default function RecipeIngredientList({ ingredients }) { 6 | const ingredientsElements = ingredients.map(ingredient => { 7 | return () 8 | }) 9 | return ( 10 |
    11 | {ingredientsElements} 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/components/RecipeList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | import Recipe from './Recipe'; 3 | import "../css/recipe-list.css"; 4 | import { RecipeContext } from './App' 5 | 6 | 7 | export default function RecipeList({ recipes }) { 8 | const { handleRecipeAddButton } = useContext(RecipeContext) 9 | return ( 10 |
    11 |
    12 | {recipes.map(recipe => { 13 | return () 14 | })} 15 |
    16 |
    17 | 18 |
    19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/css/App.css: -------------------------------------------------------------------------------- 1 | @import-normalize; 2 | @import 'backgroundAnim.css'; 3 | @import 'font.css'; 4 | @import 'recipe.css'; 5 | @import 'recipe-list.css'; 6 | @import 'button.css'; 7 | @import 'recipe-edit.css'; 8 | 9 | *,*::before,*::after{ 10 | font-family: dance; 11 | box-sizing: border-box; 12 | } 13 | 14 | 15 | body{ 16 | padding:0; 17 | margin:0; 18 | } 19 | 20 | 21 | html{ 22 | font-size:25px; 23 | } 24 | 25 | /* utility class */ 26 | .mr-1{ 27 | margin-right: 8px; 28 | } 29 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/css/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:dance; 3 | src: url('../fonts/Dance.woff') format(woff); 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/css/recipe-list.css: -------------------------------------------------------------------------------- 1 | .recipe-list{ 2 | border-right:6px solid black; 3 | border-left:6px solid black; 4 | min-height:100vh; 5 | width:50%; 6 | 7 | } 8 | 9 | .recipe-list__add-recipe-list-button{ 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | text-align:center; 13 | 14 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/css/recipe.css: -------------------------------------------------------------------------------- 1 | .recipe { 2 | padding:20px; 3 | padding-bottom: 50px; 4 | border-bottom: 6px solid black 5 | } 6 | 7 | .recipe__header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .recipe__title{ 15 | margin:0; 16 | font-size:1.75rem; 17 | } 18 | 19 | .recipe__row { 20 | margin-top:15px; 21 | 22 | } 23 | 24 | .recipe__label { 25 | font-weight: 900; 26 | margin-right: 8px; 27 | } 28 | 29 | .recipe__value { 30 | color:rgb(88, 86, 86); 31 | 32 | } 33 | 34 | .recipe__value--indented{ 35 | margin-top:10px; 36 | margin-left:30px; 37 | } 38 | 39 | .recipe__instruction{ 40 | white-space:pre-wrap; 41 | } 42 | 43 | .ingredient-grid{ 44 | display:grid; 45 | grid-template-columns: repeat(2,auto); 46 | row-gap:4px; 47 | column-gap:40px; 48 | justify-content:flex-start; 49 | } -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/fonts/Dance.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/fonts/Dance.ttf -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/fonts/Dance.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/fonts/Dance.woff -------------------------------------------------------------------------------- /React-practice-app-project-in-depth-guide/q).complete-kitchen-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/index.css'; 4 | import App from './components/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/bin/template-grabber: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require = require('esm')(module /*, options*/); 4 | require('../src/interfaceCommand.js').interfaceCommand(process.argv); -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/javascript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-template", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "pramit marattha", 11 | "license": "MIT", 12 | "dependencies": { 13 | "esm": "^3.2.18" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/javascript/src/index.js: -------------------------------------------------------------------------------- 1 | console.log(` 2 | Welcome to the Template Grabber 3 | Have a look around 4 | Anything that brain of yours can think of can be found 5 | We've got mountains of templates 6 | Some better, some worse 7 | If none of it's of interest to you, you'd be the first`); 8 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/.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 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/Template-grabber-Node-CLI/projectTemplates/react/public/favicon.ico -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | Template Grabber 17 | 18 | 19 | 20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/public/logoChakati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/Template-grabber-Node-CLI/projectTemplates/react/public/logoChakati.png -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "TemaplateGrabber", 3 | "name": "Template Grabber react template", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logoChakati.png", 12 | "type": "image/png", 13 | "sizes": "512x512" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/assets/templateGrabberLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/Template-grabber-Node-CLI/projectTemplates/react/src/assets/templateGrabberLogo.png -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/components/App/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | @keyframes App-logo-spin { 28 | from { 29 | transform: rotate(0deg); 30 | } 31 | to { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/components/App/App.js: -------------------------------------------------------------------------------- 1 | import templateGrabberLogo from "../../assets/templateGrabberLogo.png"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | return ( 6 |
    7 |
    8 | logo 9 |
    10 |
    11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/components/App/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.js"; 2 | 3 | export default App; 4 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./components/App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Template Grabber 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "start": "vite", 5 | "dev":"vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "react": "^17.0.0", 11 | "react-dom": "^17.0.0" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-react-refresh": "^1.3.1", 15 | "vite": "^2.3.8" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | @keyframes App-logo-spin { 28 | from { 29 | transform: rotate(0deg); 30 | } 31 | to { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "./templateGrabberLogo.png"; 3 | import "./App.css"; 4 | 5 | function App() { 6 | return ( 7 |
    8 |
    9 | logo 10 |

    Template Grabber

    11 |
    12 |
    13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/Template-grabber-Node-CLI/projectTemplates/viteReact/src/favicon.ico -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/main.jsx: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/src/templateGrabberLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/Template-grabber-Node-CLI/projectTemplates/viteReact/src/templateGrabberLogo.png -------------------------------------------------------------------------------- /Template-grabber-Node-CLI/projectTemplates/viteReact/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import reactRefresh from '@vitejs/plugin-react-refresh' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }) 8 | -------------------------------------------------------------------------------- /mern-ebook/MERN eBook.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/mern-ebook/MERN eBook.pdf -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/.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 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/rock-paper-scissor-spock-in-react/public/favicon.ico -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/rock-paper-scissor-spock-in-react/public/logo192.png -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/rock-paper-scissor-spock-in-react/public/logo512.png -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/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 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | .center { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | } 36 | 37 | .row { 38 | flex-direction: row; 39 | } 40 | 41 | @keyframes App-logo-spin { 42 | from { 43 | transform: rotate(0deg); 44 | } 45 | to { 46 | transform: rotate(360deg); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/App.js: -------------------------------------------------------------------------------- 1 | // import logo from './logo.svg'; 2 | // import './App.css'; 3 | 4 | // function App() { 5 | // return ( 6 | //
    7 | //
    8 | // logo 9 | //

    10 | // Edit src/App.js and save to reload. 11 | //

    12 | // 18 | // Learn React 19 | // 20 | //
    21 | //
    22 | // ); 23 | // } 24 | 25 | // export default App; 26 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import Snap from "./Snap"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /rock-paper-scissor-spock-in-react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /web-scraping-with-nodejs/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": ["/**"], 12 | "program": "${workspaceFolder}\\index.js" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /web-scraping-with-nodejs/movies.csv: -------------------------------------------------------------------------------- 1 | "title","rating","imagePoster","ratingAmount" 2 | "The Godfather","9.2/10","https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_QL75_UY281_CR4,0,190,281_.jpg","1.7M" 3 | "The Godfather: Part II","9.0/10","https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_QL75_UY281_CR4,0,190,281_.jpg","1.2M" -------------------------------------------------------------------------------- /web-scraping-with-nodejs/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "The Godfather", 4 | "rating": "9.2/10", 5 | "imagePoster": "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_QL75_UY281_CR4,0,190,281_.jpg", 6 | "ratingAmount": "1.7M", 7 | "releaseYear": "1972", 8 | "moviesGenres": ["Crime", "Drama"] 9 | }, 10 | { 11 | "title": "The Godfather: Part II", 12 | "rating": "9.0/10", 13 | "imagePoster": "https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_QL75_UY281_CR4,0,190,281_.jpg", 14 | "ratingAmount": "1.2M", 15 | "releaseYear": "1974", 16 | "moviesGenres": ["Crime", "Drama"] 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /web-scraping-with-nodejs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webscrapping", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "cheerio": "*", 14 | "json2csv": "^5.0.6", 15 | "nodemon": "^2.0.15", 16 | "request": "^2.88.2", 17 | "request-promise": "^4.2.6", 18 | "request-response": "^0.1.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /web-scraping-with-nodejs/the_godfather.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/web-scraping-with-nodejs/the_godfather.jpg -------------------------------------------------------------------------------- /web-scraping-with-nodejs/the_godfather_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aviyelverse/devrel-tutorial-projects/84b320010aea7c8510974a676b57fe416ba9aa15/web-scraping-with-nodejs/the_godfather_2.jpg --------------------------------------------------------------------------------