├── blog-app ├── src │ ├── App.css │ ├── main.jsx │ ├── components │ │ ├── Banner.jsx │ │ ├── Header.jsx │ │ └── Blogs.jsx │ ├── App.jsx │ ├── pages │ │ └── Home.jsx │ └── index.css ├── postcss.config.js ├── tailwind.config.js ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── breaking-bad ├── src │ ├── App.css │ ├── image │ │ └── logo.png │ ├── service │ │ └── api.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── components │ │ ├── Characters.jsx │ │ ├── Character.jsx │ │ └── Header.jsx │ └── App.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── .gitignore └── package.json ├── image-finder ├── src │ ├── App.css │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── services │ │ └── api.js │ ├── components │ │ ├── Image.jsx │ │ ├── Images.jsx │ │ ├── NavBar.jsx │ │ ├── Breadcrumb.jsx │ │ └── SnackBar.jsx │ ├── index.js │ └── App.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── .gitignore └── package.json ├── corona-dashboard ├── src │ ├── App.css │ ├── images │ │ └── COVID19.jpg │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── service │ │ └── api.js │ └── components │ │ ├── Card.jsx │ │ ├── Countries.jsx │ │ ├── Chart.jsx │ │ └── Cards.jsx ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── .gitignore └── package.json ├── crud-app ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── Assets │ │ └── Images │ │ │ ├── youtube.png │ │ │ ├── NotFound.jpg │ │ │ └── InstaTele.jpeg │ ├── Component │ │ ├── NotFound.jsx │ │ ├── NavBar.jsx │ │ └── CodeForInterview.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── Service │ │ └── api.js │ ├── App.css │ ├── Database │ │ └── db.json │ └── App.js ├── .gitignore └── package.json ├── imdb-clone ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── pages │ │ ├── index.js │ │ └── Home.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── services │ │ └── api.js │ ├── constants │ │ ├── routes.js │ │ └── constant.js │ ├── reportWebVitals.js │ ├── index.css │ ├── index.js │ ├── App.css │ ├── App.js │ └── component │ │ ├── UpNext.jsx │ │ ├── MoviesList.jsx │ │ ├── Banner.jsx │ │ └── Slides.jsx ├── .gitignore └── package.json ├── live-score ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── images │ │ └── VS_logo.png │ ├── setupTests.js │ ├── App.test.js │ ├── App.js │ ├── index.css │ ├── reportWebVitals.js │ ├── services │ │ └── cricket-api.js │ ├── index.js │ ├── App.css │ └── components │ │ └── NavBar.js ├── debug.log ├── .gitignore └── package.json ├── todo-app ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── components │ │ ├── EmptyTodo.jsx │ │ ├── Todo.jsx │ │ ├── Todos.jsx │ │ ├── Header.jsx │ │ └── AddTodo.jsx │ ├── index.css │ ├── reportWebVitals.js │ ├── App.css │ ├── index.js │ └── App.js ├── .gitignore └── package.json ├── weather-app ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── assets │ │ └── images │ │ │ └── bg.jpg │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── services │ │ └── api.js │ ├── App.css │ ├── index.js │ ├── pages │ │ └── Home.jsx │ └── components │ │ ├── Information.jsx │ │ └── Form.jsx ├── server │ ├── index.js │ └── server.js ├── .gitignore └── package.json ├── codepen-clone ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── App.css │ ├── setupTests.js │ ├── App.test.js │ ├── App.js │ ├── components │ │ ├── Home.jsx │ │ ├── Result.jsx │ │ └── Code.jsx │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ └── context │ │ └── DataProvider.jsx ├── .gitignore └── package.json ├── expense-tracker ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── Components │ │ ├── Balance.jsx │ │ ├── Transactions.jsx │ │ ├── Transaction.jsx │ │ ├── ExpenseCard.jsx │ │ └── NewTransaction.jsx │ └── App.css ├── .gitignore └── package.json ├── game-of-thrones ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── App.css │ ├── images │ │ └── logo.jpg │ ├── setupTests.js │ ├── App.test.js │ ├── App.js │ ├── service │ │ └── api.js │ ├── index.css │ ├── reportWebVitals.js │ ├── components │ │ ├── header.jsx │ │ ├── Characters.jsx │ │ └── Character.jsx │ └── index.js ├── .gitignore └── package.json ├── postman-clone ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── App.js │ ├── index.css │ ├── reportWebVitals.js │ ├── components │ │ ├── SnackBar.jsx │ │ ├── ErrorScreen.jsx │ │ ├── Header.jsx │ │ ├── CreateJsonText.jsx │ │ └── Response.jsx │ ├── index.js │ ├── App.css │ ├── service │ │ └── api.js │ ├── context │ │ └── DataProvider.jsx │ └── utils │ │ └── common-utils.js ├── .gitignore └── package.json ├── recipe-finder ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── constants │ │ └── constant.js │ ├── setupTests.js │ ├── App.test.js │ ├── components │ │ ├── common │ │ │ ├── Header.jsx │ │ │ └── NavBar.jsx │ │ ├── RecipeList.jsx │ │ ├── Search.jsx │ │ └── RecipeListItem.jsx │ ├── index.css │ ├── reportWebVitals.js │ ├── pages │ │ ├── Home.jsx │ │ └── Recipes.jsx │ ├── index.js │ ├── App.js │ ├── services │ │ └── api.js │ └── App.css ├── .gitignore └── package.json ├── reddit-memes ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── pages │ │ └── Home.jsx │ ├── services │ │ └── api.js │ ├── index.css │ ├── reportWebVitals.js │ ├── components │ │ ├── Header.jsx │ │ ├── Meme.jsx │ │ └── Memes.jsx │ ├── index.js │ └── App.css ├── .gitignore └── package.json ├── google-keep-clone ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── utils │ │ └── common-utils.js │ ├── setupTests.js │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── context │ │ └── DataProvider.jsx │ └── components │ │ ├── notes │ │ └── EmptyNotes.jsx │ │ ├── Home.jsx │ │ ├── HeaderBar.jsx │ │ ├── archives │ │ └── Archives.jsx │ │ ├── delete │ │ └── DeleteNotes.jsx │ │ └── NavList.jsx ├── .gitignore └── package.json ├── users-processing-service ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ └── App.css ├── .gitignore └── package.json └── .gitignore /blog-app/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /breaking-bad/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image-finder/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /corona-dashboard/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /crud-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /imdb-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /live-score/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /todo-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /weather-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /breaking-bad/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /codepen-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /corona-dashboard/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /expense-tracker/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /game-of-thrones/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /image-finder/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /postman-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /recipe-finder/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reddit-memes/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /crud-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/public/favicon.ico -------------------------------------------------------------------------------- /crud-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/public/logo192.png -------------------------------------------------------------------------------- /crud-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/public/logo512.png -------------------------------------------------------------------------------- /google-keep-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /todo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/todo-app/public/favicon.ico -------------------------------------------------------------------------------- /todo-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/todo-app/public/logo192.png -------------------------------------------------------------------------------- /todo-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/todo-app/public/logo512.png -------------------------------------------------------------------------------- /game-of-thrones/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | background-color: #000000; 4 | color: #fff 5 | } 6 | -------------------------------------------------------------------------------- /imdb-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/imdb-clone/public/favicon.ico -------------------------------------------------------------------------------- /imdb-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/imdb-clone/public/logo192.png -------------------------------------------------------------------------------- /imdb-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/imdb-clone/public/logo512.png -------------------------------------------------------------------------------- /live-score/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/live-score/public/favicon.ico -------------------------------------------------------------------------------- /live-score/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/live-score/public/logo192.png -------------------------------------------------------------------------------- /live-score/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/live-score/public/logo512.png -------------------------------------------------------------------------------- /users-processing-service/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /weather-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/weather-app/public/favicon.ico -------------------------------------------------------------------------------- /weather-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/weather-app/public/logo192.png -------------------------------------------------------------------------------- /weather-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/weather-app/public/logo512.png -------------------------------------------------------------------------------- /breaking-bad/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/breaking-bad/public/favicon.ico -------------------------------------------------------------------------------- /breaking-bad/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/breaking-bad/public/logo192.png -------------------------------------------------------------------------------- /breaking-bad/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/breaking-bad/public/logo512.png -------------------------------------------------------------------------------- /breaking-bad/src/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/breaking-bad/src/image/logo.png -------------------------------------------------------------------------------- /codepen-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/codepen-clone/public/favicon.ico -------------------------------------------------------------------------------- /codepen-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/codepen-clone/public/logo192.png -------------------------------------------------------------------------------- /codepen-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/codepen-clone/public/logo512.png -------------------------------------------------------------------------------- /image-finder/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/image-finder/public/favicon.ico -------------------------------------------------------------------------------- /image-finder/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/image-finder/public/logo192.png -------------------------------------------------------------------------------- /image-finder/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/image-finder/public/logo512.png -------------------------------------------------------------------------------- /live-score/src/images/VS_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/live-score/src/images/VS_logo.png -------------------------------------------------------------------------------- /postman-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/postman-clone/public/favicon.ico -------------------------------------------------------------------------------- /postman-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/postman-clone/public/logo192.png -------------------------------------------------------------------------------- /postman-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/postman-clone/public/logo512.png -------------------------------------------------------------------------------- /recipe-finder/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/recipe-finder/public/favicon.ico -------------------------------------------------------------------------------- /recipe-finder/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/recipe-finder/public/logo192.png -------------------------------------------------------------------------------- /recipe-finder/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/recipe-finder/public/logo512.png -------------------------------------------------------------------------------- /reddit-memes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/reddit-memes/public/favicon.ico -------------------------------------------------------------------------------- /reddit-memes/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/reddit-memes/public/logo192.png -------------------------------------------------------------------------------- /reddit-memes/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/reddit-memes/public/logo512.png -------------------------------------------------------------------------------- /blog-app/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /corona-dashboard/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/corona-dashboard/public/favicon.ico -------------------------------------------------------------------------------- /corona-dashboard/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/corona-dashboard/public/logo192.png -------------------------------------------------------------------------------- /corona-dashboard/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/corona-dashboard/public/logo512.png -------------------------------------------------------------------------------- /expense-tracker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/expense-tracker/public/favicon.ico -------------------------------------------------------------------------------- /expense-tracker/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/expense-tracker/public/logo192.png -------------------------------------------------------------------------------- /expense-tracker/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/expense-tracker/public/logo512.png -------------------------------------------------------------------------------- /game-of-thrones/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/game-of-thrones/public/favicon.ico -------------------------------------------------------------------------------- /game-of-thrones/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/game-of-thrones/public/logo192.png -------------------------------------------------------------------------------- /game-of-thrones/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/game-of-thrones/public/logo512.png -------------------------------------------------------------------------------- /game-of-thrones/src/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/game-of-thrones/src/images/logo.jpg -------------------------------------------------------------------------------- /crud-app/src/Assets/Images/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/src/Assets/Images/youtube.png -------------------------------------------------------------------------------- /google-keep-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/google-keep-clone/public/favicon.ico -------------------------------------------------------------------------------- /google-keep-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/google-keep-clone/public/logo192.png -------------------------------------------------------------------------------- /google-keep-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/google-keep-clone/public/logo512.png -------------------------------------------------------------------------------- /imdb-clone/src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default as Home } from './Home'; 2 | export { default as CategoryMovie } from './CategoryMovie'; -------------------------------------------------------------------------------- /weather-app/src/assets/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/weather-app/src/assets/images/bg.jpg -------------------------------------------------------------------------------- /corona-dashboard/src/images/COVID19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/corona-dashboard/src/images/COVID19.jpg -------------------------------------------------------------------------------- /crud-app/src/Assets/Images/NotFound.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/src/Assets/Images/NotFound.jpg -------------------------------------------------------------------------------- /crud-app/src/Assets/Images/InstaTele.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/crud-app/src/Assets/Images/InstaTele.jpeg -------------------------------------------------------------------------------- /users-processing-service/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/users-processing-service/public/favicon.ico -------------------------------------------------------------------------------- /users-processing-service/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/users-processing-service/public/logo192.png -------------------------------------------------------------------------------- /users-processing-service/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kunaltyagi9/React-Projects/HEAD/users-processing-service/public/logo512.png -------------------------------------------------------------------------------- /reddit-memes/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Home from './pages/Home'; 4 | 5 | function App() { 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /weather-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Home from "./pages/Home"; 3 | 4 | function App() { 5 | return ( 6 | 7 | ); 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /breaking-bad/src/service/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export const fetchData = async (text) => { 4 | return await axios.get(`https://breakingbadapi.com/api/characters?name=${text}`) 5 | } -------------------------------------------------------------------------------- /users-processing-service/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Users from "./components/Users"; 4 | 5 | 6 | function App() { 7 | return ( 8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /recipe-finder/src/constants/constant.js: -------------------------------------------------------------------------------- 1 | export const logo = 'https://ourrecipes.in/wp-content/uploads/2021/09/our-recipes-logo-retina.png'; 2 | 3 | 4 | export const API_URL = 'https://forkify-api.herokuapp.com/api'; -------------------------------------------------------------------------------- /weather-app/server/index.js: -------------------------------------------------------------------------------- 1 | 2 | require('ignore-styles') 3 | 4 | require('@babel/register')({ 5 | ignore: [/(node_modules)/], 6 | presets: ['@babel/preset-env', '@babel/preset-react'] 7 | }) 8 | 9 | require('./server') 10 | -------------------------------------------------------------------------------- /codepen-clone/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | .CodeMirror { 3 | height: 340px !important; 4 | color: #fff; 5 | } 6 | 7 | .CodeMirror-gutters { 8 | background: #1d1e22 !important; 9 | } 10 | 11 | .CodeMirror-scroll { 12 | background: #1d1e22; 13 | } -------------------------------------------------------------------------------- /blog-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /crud-app/src/Component/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import notfound from '../Assets/Images/NotFound.jpg'; 2 | 3 | const NotFound = () => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default NotFound; -------------------------------------------------------------------------------- /crud-app/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 | -------------------------------------------------------------------------------- /google-keep-clone/src/utils/common-utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export const reorder = (list, startIndex, endIndex) => { 4 | const result = Array.from(list); 5 | const [removed] = result.splice(startIndex, 1); 6 | result.splice(endIndex, 0, removed); 7 | 8 | return result; 9 | }; -------------------------------------------------------------------------------- /todo-app/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 | -------------------------------------------------------------------------------- /blog-app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 3000, 9 | open: true 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /breaking-bad/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 | -------------------------------------------------------------------------------- /codepen-clone/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 | -------------------------------------------------------------------------------- /image-finder/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 | -------------------------------------------------------------------------------- /imdb-clone/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 | -------------------------------------------------------------------------------- /live-score/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /recipe-finder/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /weather-app/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 | -------------------------------------------------------------------------------- /corona-dashboard/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 | -------------------------------------------------------------------------------- /expense-tracker/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 | -------------------------------------------------------------------------------- /game-of-thrones/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 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /crud-app/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 | -------------------------------------------------------------------------------- /todo-app/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 | -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /blog-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /breaking-bad/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 | -------------------------------------------------------------------------------- /codepen-clone/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 | -------------------------------------------------------------------------------- /image-finder/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 | -------------------------------------------------------------------------------- /imdb-clone/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 | -------------------------------------------------------------------------------- /live-score/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /recipe-finder/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /weather-app/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 | -------------------------------------------------------------------------------- /codepen-clone/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | //components 3 | import Home from './components/Home'; 4 | import DataProvider from './context/DataProvider'; 5 | 6 | function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /corona-dashboard/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 | -------------------------------------------------------------------------------- /expense-tracker/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 | -------------------------------------------------------------------------------- /game-of-thrones/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 | -------------------------------------------------------------------------------- /google-keep-clone/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | //components 3 | import Home from './components/Home'; 4 | import DataProvider from './context/DataProvider'; 5 | 6 | function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /postman-clone/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | //components 3 | import Home from './components/Home'; 4 | 5 | import DataProvider from './context/DataProvider'; 6 | 7 | function App() { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /reddit-memes/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Header from "../components/Header"; 4 | import Memes from "../components/Memes"; 5 | 6 | const Home = () => { 7 | 8 | return ( 9 |
10 |
11 | 12 |
13 | ) 14 | } 15 | 16 | export default Home; -------------------------------------------------------------------------------- /game-of-thrones/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Header from './components/header'; 3 | import Characters from './components/Characters'; 4 | 5 | 6 | function App() { 7 | return ( 8 |
9 |
10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /game-of-thrones/src/service/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const API_URL = 'http://localhost:3002/characters'; 4 | 5 | export const getData = async () => { 6 | try { 7 | return await axios.get(API_URL); 8 | } catch (error) { 9 | console.log('Error while calling getData api ', error); 10 | } 11 | } -------------------------------------------------------------------------------- /blog-app/src/components/Banner.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | const Banner = () => { 5 | const bannerImage = "https://enesst.com/uploads/blog/page-banner/blog-page.png"; 6 | 7 | return ( 8 |
9 | banner 10 |
11 | ) 12 | } 13 | 14 | export default Banner; -------------------------------------------------------------------------------- /todo-app/src/components/EmptyTodo.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Text } from '@chakra-ui/react'; 3 | 4 | const EmptyTodo = () => { 5 | return ( 6 | No Todo Items 12 | ) 13 | } 14 | 15 | export default EmptyTodo; -------------------------------------------------------------------------------- /codepen-clone/src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | //components 4 | import Code from './Code'; 5 | import Result from './Result'; 6 | import Header from './Header'; 7 | 8 | const Home = () => { 9 | return ( 10 | <> 11 |
12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default Home; -------------------------------------------------------------------------------- /live-score/debug.log: -------------------------------------------------------------------------------- 1 | [0111/222613.638:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [0122/114421.359:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | [0123/093043.458:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 4 | -------------------------------------------------------------------------------- /blog-app/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | const Header = () => { 4 | const logo = "https://1000logos.net/wp-content/uploads/2022/10/Pringles-logo.png"; 5 | 6 | return ( 7 |
8 | logo 9 |
10 | ) 11 | } 12 | 13 | export default Header; -------------------------------------------------------------------------------- /blog-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /blog-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | import Home from './pages/Home' 6 | 7 | function App() { 8 | const [count, setCount] = useState(0) 9 | 10 | return ( 11 | <> 12 | 13 | 14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /live-score/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import './App.css'; 3 | import NavBar from './components/NavBar'; 4 | import TabPanel from './components/TabPanel'; 5 | 6 | function App() { 7 | 8 | return ( 9 |
10 | 11 | 12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /imdb-clone/src/services/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export const getCategoryMovies = async (API_URL) => { 4 | try { 5 | const response = await axios.get(API_URL); 6 | return response.data; 7 | } catch (error) { 8 | console.log('Error while getting popular movies data ', error.message); 9 | return error.response.data; 10 | } 11 | } -------------------------------------------------------------------------------- /imdb-clone/src/constants/routes.js: -------------------------------------------------------------------------------- 1 | const APP_PATH = 'imdb'; 2 | 3 | export const routePath = { 4 | home : `/${APP_PATH}/`, 5 | categories : `/${APP_PATH}/categories`, 6 | movie : `${APP_PATH}/movie`, 7 | movies : `${APP_PATH}/movies`, 8 | topRated : `${APP_PATH}/movies`, 9 | upcoming : `${APP_PATH}/movies`, 10 | invalid : `${APP_PATH}/*` 11 | } -------------------------------------------------------------------------------- /recipe-finder/src/components/common/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | const Header = (props) => { 5 | 6 | return ( 7 |
8 |
9 |

{props.title}

10 | {props.children} 11 |
12 |
13 | ) 14 | } 15 | 16 | export default Header; -------------------------------------------------------------------------------- /blog-app/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Header from "../components/Header"; 3 | import Banner from "../components/Banner"; 4 | import Blogs from "../components/Blogs"; 5 | 6 | const Home = () => { 7 | 8 | return ( 9 |
10 |
11 | 12 | 13 |
14 | ) 15 | } 16 | 17 | export default Home; -------------------------------------------------------------------------------- /reddit-memes/src/services/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const API_URL = 'https://www.reddit.com/r/memes.json'; 4 | 5 | export const getMemes = async () => { 6 | try { 7 | const response = await axios.get(API_URL); 8 | return response.data; 9 | } catch (error) { 10 | console.log('Error while calling the api ', error.message); 11 | return error.response; 12 | } 13 | } -------------------------------------------------------------------------------- /blog-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /crud-app/.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 | -------------------------------------------------------------------------------- /imdb-clone/.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 | -------------------------------------------------------------------------------- /live-score/.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 | -------------------------------------------------------------------------------- /todo-app/.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 | -------------------------------------------------------------------------------- /weather-app/.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 | -------------------------------------------------------------------------------- /breaking-bad/.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 | -------------------------------------------------------------------------------- /codepen-clone/.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 | -------------------------------------------------------------------------------- /corona-dashboard/.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 | -------------------------------------------------------------------------------- /expense-tracker/.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 | -------------------------------------------------------------------------------- /game-of-thrones/.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 | -------------------------------------------------------------------------------- /image-finder/.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 | -------------------------------------------------------------------------------- /postman-clone/.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 | -------------------------------------------------------------------------------- /recipe-finder/.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 | -------------------------------------------------------------------------------- /reddit-memes/.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 | -------------------------------------------------------------------------------- /breaking-bad/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 | -------------------------------------------------------------------------------- /crud-app/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 | -------------------------------------------------------------------------------- /google-keep-clone/.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 | -------------------------------------------------------------------------------- /image-finder/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 | -------------------------------------------------------------------------------- /live-score/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /todo-app/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 | -------------------------------------------------------------------------------- /weather-app/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 | -------------------------------------------------------------------------------- /breaking-bad/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 | -------------------------------------------------------------------------------- /codepen-clone/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 | -------------------------------------------------------------------------------- /corona-dashboard/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 | -------------------------------------------------------------------------------- /crud-app/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 | -------------------------------------------------------------------------------- /expense-tracker/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 | -------------------------------------------------------------------------------- /game-of-thrones/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 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /image-finder/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 | -------------------------------------------------------------------------------- /imdb-clone/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 | -------------------------------------------------------------------------------- /live-score/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /recipe-finder/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /todo-app/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 | -------------------------------------------------------------------------------- /users-processing-service/.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 | -------------------------------------------------------------------------------- /weather-app/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 | -------------------------------------------------------------------------------- /codepen-clone/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 | -------------------------------------------------------------------------------- /corona-dashboard/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 | -------------------------------------------------------------------------------- /expense-tracker/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 | -------------------------------------------------------------------------------- /game-of-thrones/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 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /recipe-finder/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 | -------------------------------------------------------------------------------- /image-finder/src/services/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const URL = 'https://pixabay.com/api/'; 4 | const API_KEY = '20259577-c93c75abc878a636931b34317'; 5 | 6 | export const getImages = async (text, count) => { 7 | try{ 8 | const data = await axios.get(`${URL}/?key=${API_KEY}&q=${text}&image_type=photo&per_page=${count}&safesearch=true`) 9 | return data; 10 | }catch(error){ 11 | console.log(error) 12 | } 13 | } -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /image-finder/src/components/Image.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Card, styled } from '@mui/material'; 3 | 4 | const StyledImage = styled('img')({ 5 | height: 300, 6 | width: '100%', 7 | objectFit: 'cover' 8 | } 9 | ); 10 | 11 | const Image = ({ image }) => { 12 | 13 | return ( 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | export default Image; -------------------------------------------------------------------------------- /imdb-clone/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 | background-color: #000000; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /blog-app/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /postman-clone/src/components/SnackBar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Snackbar } from "@mui/material" 3 | 4 | const SnackBar = ({ errorMsg, error, setError }) => { 5 | 6 | const handleClose = () => { 7 | setError(false); 8 | } 9 | 10 | return ( 11 | 17 | ) 18 | } 19 | 20 | export default SnackBar; -------------------------------------------------------------------------------- /reddit-memes/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { AppBar, Toolbar } from '@mui/material'; 4 | 5 | const Header = () => { 6 | 7 | const logo = 'https://1000logos.net/wp-content/uploads/2017/05/Reddit-logo.jpg'; 8 | 9 | return ( 10 | 11 | 12 | logo 13 | 14 | 15 | ) 16 | } 17 | 18 | export default Header; -------------------------------------------------------------------------------- /reddit-memes/src/components/Meme.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Card, styled } from '@mui/material'; 4 | 5 | const StyledCard = styled(Card)({ 6 | '&:hover': { 7 | transform: 'scale(1.5)', 8 | borderRadius: 0, 9 | height: 200 10 | } 11 | }) 12 | 13 | const Meme = ({ meme }) => { 14 | return ( 15 | 16 | meme 17 | 18 | ) 19 | } 20 | 21 | export default Meme; -------------------------------------------------------------------------------- /image-finder/src/components/Images.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Grid } from '@mui/material'; 4 | import Image from './Image'; 5 | 6 | const Images = ({ data }) => { 7 | 8 | return ( 9 | 10 | { 11 | data.map(image => ( 12 | 13 | 14 | 15 | )) 16 | } 17 | 18 | ) 19 | } 20 | 21 | export default Images; -------------------------------------------------------------------------------- /todo-app/src/components/Todo.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Text, IconButton, HStack, StackDivider } from "@chakra-ui/react"; 4 | import { FaTrash } from 'react-icons/fa'; 5 | 6 | 7 | const Todo = ({ todo, deleteTodo }) => { 8 | return ( 9 | 10 | {todo.text} 11 | } 12 | isRound={true} 13 | onClick={() => deleteTodo(todo.id)} 14 | /> 15 | 16 | ) 17 | } 18 | 19 | export default Todo; -------------------------------------------------------------------------------- /weather-app/src/services/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const API_KEY = '8d2a110b6ad468ae1a0e459757cf659d'; 4 | const API_URL = 'http://api.openweathermap.org/data/2.5/weather'; 5 | 6 | export const getWeather = async (city, country) => { 7 | try { 8 | let response = await axios.get(`${API_URL}?q=${city},${country}&appid=${API_KEY}&units=metric`); 9 | return response.data; 10 | } catch (error) { 11 | console.log('Error while calling the api ', error.message); 12 | return error.response; 13 | } 14 | } -------------------------------------------------------------------------------- /live-score/src/services/cricket-api.js: -------------------------------------------------------------------------------- 1 | const KEY = "XZ1BGzJPlUeirXLuqRyPD211P8X2"; 2 | 3 | 4 | export const getMatches = () => { 5 | const url = `https://cricapi.com/api/matches?apikey=${KEY}`; 6 | 7 | return fetch(url) 8 | .then((res) => res.json()) 9 | .catch((error) => console.log(error)); 10 | }; 11 | 12 | export const getMatchDetail = (id) => { 13 | const url = `https://cricapi.com/api/cricketScore?apikey=${KEY}&unique_id=${id}`; 14 | 15 | return fetch(url) 16 | .then((res) => res.json()) 17 | .catch((error) => console.log(error)); 18 | }; -------------------------------------------------------------------------------- /recipe-finder/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Button } from "semantic-ui-react"; 3 | import Header from "../components/common/Header"; 4 | import { Link } from "react-router-dom"; 5 | 6 | const Home = () => { 7 | 8 | return ( 9 |
10 |
18 | ) 19 | } 20 | 21 | export default Home; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | crud-app/node_modules 2 | crud-app/package-lock.json 3 | todo-app/node_modules 4 | todo-app/package-lock.json 5 | postman-clone/node_modules 6 | postman-clone/package-lock.json 7 | codepen-clone/node_modules 8 | codepen-clone/package-lock.json 9 | expense-tracker/node_modules 10 | expense-tracker/package-lock.json 11 | breaking-bad/node_modules 12 | breaking-bad/package-lock.json 13 | invoice-app/node_modules 14 | invoice-app/package-lock.json 15 | imdb-clone/node_modules 16 | imdb-clone/package-lock.json 17 | website-dev 18 | quiz-app 19 | chat-bot 20 | chatbot 21 | photo-editor -------------------------------------------------------------------------------- /crud-app/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 | // 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 | -------------------------------------------------------------------------------- /breaking-bad/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 | // 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 | -------------------------------------------------------------------------------- /codepen-clone/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 | // 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 | -------------------------------------------------------------------------------- /image-finder/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 | // 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 | -------------------------------------------------------------------------------- /live-score/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 | // 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 | -------------------------------------------------------------------------------- /postman-clone/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 | // 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 | -------------------------------------------------------------------------------- /corona-dashboard/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 | // 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 | -------------------------------------------------------------------------------- /expense-tracker/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 | // 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 | -------------------------------------------------------------------------------- /game-of-thrones/src/components/header.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { AppBar, Toolbar, styled } from '@mui/material'; 4 | import logo from '../images/logo.jpg'; 5 | 6 | const StyledHeader = styled(AppBar)` 7 | background: #000000 8 | `; 9 | 10 | const Image = styled('img')({ 11 | width: 250 12 | }); 13 | 14 | 15 | const Header = () => { 16 | 17 | return ( 18 | 19 | 20 | got 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default Header; -------------------------------------------------------------------------------- /game-of-thrones/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 | // 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 | -------------------------------------------------------------------------------- /google-keep-clone/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 | // 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 | -------------------------------------------------------------------------------- /live-score/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .loader { 6 | border: 16px solid #f3f3f3; 7 | border-radius: 50%; 8 | border-top: 16px solid #3498db; 9 | width: 120px; 10 | height: 120px; 11 | -webkit-animation: spin 2s linear infinite; /* Safari */ 12 | animation: spin 2s linear infinite; 13 | } 14 | 15 | /* Safari */ 16 | @-webkit-keyframes spin { 17 | 0% { -webkit-transform: rotate(0deg); } 18 | 100% { -webkit-transform: rotate(360deg); } 19 | } 20 | 21 | @keyframes spin { 22 | 0% { transform: rotate(0deg); } 23 | 100% { transform: rotate(360deg); } 24 | } -------------------------------------------------------------------------------- /expense-tracker/src/Components/Balance.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Typography, styled, Box } from '@mui/material'; 3 | 4 | const BalanceText = styled(Typography)` 5 | font-size: 25px; 6 | margin-bottom: 20px; 7 | ` 8 | 9 | const Balance = ({ transactions }) => { 10 | 11 | const amount = transactions.map(transaction => transaction.amount); 12 | const total = amount.reduce((amount, item) => (amount += item), 0).toFixed(2); 13 | 14 | return ( 15 | 16 | Balance: ₹{total} 17 | 18 | ) 19 | } 20 | 21 | export default Balance; -------------------------------------------------------------------------------- /recipe-finder/src/components/common/NavBar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Menu } from 'semantic-ui-react'; 3 | import { logo } from '../../constants/constant'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | const NavBar = () => { 7 | 8 | return ( 9 | 10 | 11 | logo 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export default NavBar; -------------------------------------------------------------------------------- /crud-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 | -------------------------------------------------------------------------------- /imdb-clone/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 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 | -------------------------------------------------------------------------------- /reddit-memes/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 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 | -------------------------------------------------------------------------------- /todo-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 | -------------------------------------------------------------------------------- /blog-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /breaking-bad/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 | -------------------------------------------------------------------------------- /codepen-clone/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 | -------------------------------------------------------------------------------- /image-finder/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 | -------------------------------------------------------------------------------- /image-finder/src/components/NavBar.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { AppBar, Toolbar, Typography, styled } from '@mui/material'; 4 | import { Collections as CollectionsIcon } from '@mui/icons-material'; 5 | 6 | const Component = styled(AppBar)` 7 | background: #445A6F; 8 | `; 9 | 10 | const NavBar = () => { 11 | 12 | return ( 13 | 14 | 15 | 16 | Image Finder 17 | 18 | 19 | ) 20 | } 21 | 22 | export default NavBar; -------------------------------------------------------------------------------- /imdb-clone/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 | -------------------------------------------------------------------------------- /live-score/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /recipe-finder/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /weather-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 | -------------------------------------------------------------------------------- /corona-dashboard/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 | -------------------------------------------------------------------------------- /expense-tracker/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 | -------------------------------------------------------------------------------- /game-of-thrones/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 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /users-processing-service/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 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 | -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /breaking-bad/src/components/Characters.jsx: -------------------------------------------------------------------------------- 1 | 2 | import Character from './Character'; 3 | import { Grid, Box } from '@mui/material'; 4 | 5 | 6 | const Characters = ({ data }) => { 7 | 8 | return ( 9 | 10 | 11 | { 12 | data.map(item => ( 13 | 14 | 15 | 16 | )) 17 | } 18 | 19 | 20 | ) 21 | } 22 | 23 | export default Characters; -------------------------------------------------------------------------------- /recipe-finder/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'semantic-ui-css/semantic.min.css' 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /codepen-clone/src/context/DataProvider.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from 'react'; 2 | 3 | 4 | export const DataContext = createContext(null); 5 | 6 | const DataProvider = ({ children }) => { 7 | 8 | const [html, setHtml] = useState(''); 9 | const [js, setJs] = useState(''); 10 | const [css, setCss] = useState(''); 11 | 12 | return ( 13 | 21 | {children} 22 | 23 | ) 24 | } 25 | 26 | export default DataProvider; -------------------------------------------------------------------------------- /blog-app/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 7 | line-height: 1.5; 8 | font-weight: 400; 9 | 10 | color-scheme: light dark; 11 | color: rgba(255, 255, 255, 0.87); 12 | background-color: #242424; 13 | 14 | font-synthesis: none; 15 | text-rendering: optimizeLegibility; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | @media (prefers-color-scheme: light) { 25 | :root { 26 | color: #213547; 27 | background-color: #ffffff; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /crud-app/src/Service/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const usersUrl = 'http://localhost:3002/users'; 4 | 5 | 6 | export const getUsers = async (id) => { 7 | id = id || ''; 8 | try { 9 | return await axios.get(`${usersUrl}/${id}`); 10 | } catch (error) { 11 | console.log('Error while calling getUsers api ', error); 12 | } 13 | } 14 | 15 | export const addUser = async (user) => { 16 | return await axios.post(`${usersUrl}`, user); 17 | } 18 | 19 | export const deleteUser = async (id) => { 20 | return await axios.delete(`${usersUrl}/${id}`); 21 | } 22 | 23 | export const editUser = async (id, user) => { 24 | return await axios.put(`${usersUrl}/${id}`, user) 25 | } -------------------------------------------------------------------------------- /recipe-finder/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | import NavBar from './components/common/NavBar'; 5 | import Home from './pages/Home'; 6 | import Recipes from './pages/Recipes'; 7 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 8 | import RecipeDetails from './components/RecipeDetails'; 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | } /> 16 | } /> 17 | } /> 18 | 19 | 20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /crud-app/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 | -------------------------------------------------------------------------------- /imdb-clone/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 | -------------------------------------------------------------------------------- /todo-app/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 | -------------------------------------------------------------------------------- /weather-app/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 | -------------------------------------------------------------------------------- /postman-clone/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 | -------------------------------------------------------------------------------- /reddit-memes/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 | -------------------------------------------------------------------------------- /todo-app/src/components/Todos.jsx: -------------------------------------------------------------------------------- 1 | import { VStack, StackDivider, Text } from "@chakra-ui/react" 2 | 3 | //components 4 | import Todo from './Todo'; 5 | import EmptyTodo from './EmptyTodo'; 6 | 7 | const Todos = ({ todos, deleteTodo }) => { 8 | 9 | return ( 10 | } 12 | borderWidth={todos.length > 0 ? '1px' : 'none' } 13 | alignItems='stretch' 14 | mt={8} 15 | > 16 | { 17 | todos.length > 0 ? todos.map(todo => ( 18 | 19 | )) : 20 | } 21 | 22 | ) 23 | } 24 | 25 | export default Todos; -------------------------------------------------------------------------------- /weather-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM, { hydrateRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | // const root = ReactDOM.createRoot(document.getElementById('root')); 8 | // root.render( 9 | // 10 | // 11 | // 12 | // ); 13 | 14 | const container = document.getElementById('app'); 15 | hydrateRoot(container, ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /google-keep-clone/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 | -------------------------------------------------------------------------------- /google-keep-clone/src/context/DataProvider.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from 'react'; 2 | 3 | export const DataContext = createContext(null); 4 | 5 | const DataProvider = ({ children }) => { 6 | 7 | const [notes, setNotes] = useState([]); 8 | const [archiveNotes, setAcrchiveNotes] = useState([]); 9 | const [deleteNotes, setDeleteNotes] = useState([]); 10 | 11 | return ( 12 | 21 | {children} 22 | 23 | ) 24 | } 25 | 26 | export default DataProvider; -------------------------------------------------------------------------------- /live-score/src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; 3 | import SportsCricketIcon from '@material-ui/icons/SportsCricket'; 4 | import { amber } from '@material-ui/core/colors'; 5 | 6 | class NavBar extends Component { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | Cricket Info 15 | 16 | 17 | 18 | ) 19 | } 20 | } 21 | 22 | export default NavBar; -------------------------------------------------------------------------------- /users-processing-service/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 | -------------------------------------------------------------------------------- /crud-app/src/Component/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import { AppBar, Toolbar, styled } from '@mui/material'; 2 | import { NavLink } from 'react-router-dom'; 3 | 4 | const Header = styled(AppBar)` 5 | background: #111111; 6 | `; 7 | 8 | const Tabs = styled(NavLink)` 9 | color: #FFFFFF; 10 | margin-right: 20px; 11 | text-decoration: none; 12 | font-size: 20px; 13 | `; 14 | 15 | const NavBar = () => { 16 | 17 | return ( 18 |
19 | 20 | Code for Interview 21 | All Users 22 | Add User 23 | 24 |
25 | ) 26 | } 27 | 28 | export default NavBar; -------------------------------------------------------------------------------- /todo-app/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 | import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /google-keep-clone/src/components/notes/EmptyNotes.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { LightbulbOutlined as Lightbulb } from '@mui/icons-material'; 4 | import { Typography, Box, styled } from '@mui/material'; 5 | 6 | const Light = styled(Lightbulb)` 7 | font-size: 120px; 8 | color: #F5F5F5; 9 | ` 10 | 11 | const Text = styled(Typography)` 12 | color: #80868b; 13 | font-size: 22px 14 | ` 15 | 16 | const Container = styled(Box)` 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | margin-top: 20vh 21 | ` 22 | 23 | const EmptyNotes = () => { 24 | return ( 25 | 26 | 27 | Notes you add appear here 28 | 29 | ) 30 | } 31 | 32 | export default EmptyNotes; -------------------------------------------------------------------------------- /todo-app/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Heading, IconButton, Box, useColorMode } from '@chakra-ui/react'; 3 | import { FaSun, FaMoon } from 'react-icons/fa'; 4 | 5 | const Header = () => { 6 | const { colorMode, toggleColorMode } = useColorMode(); 7 | return ( 8 | 9 | : } 11 | isRound={true} 12 | mr={5} 13 | onClick={toggleColorMode} 14 | /> 15 | Todo App 19 | 20 | ) 21 | } 22 | 23 | export default Header; -------------------------------------------------------------------------------- /recipe-finder/src/services/api.js: -------------------------------------------------------------------------------- 1 | 2 | import axios from 'axios'; 3 | import { API_URL } from '../constants/constant'; 4 | 5 | export const getRecipes = async (searchedQuery) => { 6 | try { 7 | let response = await axios.get(`${API_URL}/search?q=${searchedQuery}`); 8 | return response.data; 9 | } catch (error) { 10 | console.log('Error while calling the api ', error.message); 11 | return error.response 12 | } 13 | } 14 | 15 | export const getRecipe = async (searchedQuery) => { 16 | try { 17 | let response = await axios.get(`${API_URL}/get?rId=${searchedQuery}`); 18 | return response.data; 19 | } catch (error) { 20 | console.log('Error while calling the api ', error.message); 21 | return error.response 22 | } 23 | } -------------------------------------------------------------------------------- /crud-app/src/Database/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "name": "Mohd Shami", 5 | "username": "mohdshami", 6 | "email": "shami@gmail.com", 7 | "phone": "7896547896", 8 | "id": 4 9 | }, 10 | { 11 | "name": "Shikhar Dhawan", 12 | "username": "dhawansikhar", 13 | "email": "dhawan@gmail.com", 14 | "phone": "4569874563", 15 | "id": 6 16 | }, 17 | { 18 | "name": "Virat Kohli", 19 | "username": "viratkohli", 20 | "email": "viratkohli@gmail.com", 21 | "phone": "8596589658", 22 | "id": 7 23 | }, 24 | { 25 | "name": "Pankaj Tripathi", 26 | "username": "pankajtripathi", 27 | "email": "pankaj@gmail.com", 28 | "phone": "9658965236", 29 | "id": 8 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /image-finder/src/components/Breadcrumb.jsx: -------------------------------------------------------------------------------- 1 | import { Box, InputBase, styled } from '@mui/material'; 2 | 3 | const Component = styled(Box)` 4 | background: #F6F6F6; 5 | & > div { 6 | margin: 10px; 7 | } 8 | `; 9 | 10 | 11 | const BreadCrumb = ({ onTextChange, onCountChange }) => { 12 | 13 | return ( 14 | 15 | onTextChange(e.target.value)} 17 | placeholder="Search images" 18 | /> 19 | onCountChange(e.target.value)} 21 | placeholder="Number of images" 22 | type="number" 23 | /> 24 | 25 | ) 26 | } 27 | 28 | export default BreadCrumb; -------------------------------------------------------------------------------- /postman-clone/src/service/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | import { getHeadersAndParams } from '../utils/common-utils'; 4 | 5 | export const getData = async (formData, jsonText, paramData, headerData) => { 6 | 7 | const apiType = formData.type.toLowerCase(); 8 | const apiUrl = formData.url; 9 | const apiHeaders = getHeadersAndParams(headerData); 10 | const apiParams = getHeadersAndParams(paramData); 11 | 12 | try { 13 | return await axios({ 14 | method: apiType, 15 | url: apiUrl, 16 | body: jsonText, 17 | headers: apiHeaders, 18 | params: apiParams 19 | }) 20 | } catch (error) { 21 | console.log('Error while getting the response ', error); 22 | return 'error'; 23 | } 24 | } -------------------------------------------------------------------------------- /corona-dashboard/src/service/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | 4 | const url = "https://covid19.mathdro.id/api"; 5 | 6 | 7 | export const fetchData = async (country) => { 8 | let changedUrl = url; 9 | if(country){ 10 | changedUrl = `${url}/countries/${country}`; 11 | } 12 | try{ 13 | const { data: { confirmed, recovered, deaths, lastUpdate } } = await axios.get(changedUrl); 14 | return { confirmed, recovered, deaths, lastUpdate }; 15 | }catch(error){ 16 | return error; 17 | } 18 | } 19 | 20 | export const fetchCountries = async() => { 21 | try{ 22 | const { data: { countries } } = await axios.get(`${url}/countries`); 23 | return countries.map(country => country.name ); 24 | }catch(error){ 25 | return error; 26 | } 27 | } -------------------------------------------------------------------------------- /image-finder/src/components/SnackBar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Box, Snackbar, Alert, styled } from '@mui/material'; 3 | 4 | const MuiAlert = styled(Alert)` 5 | color: #fff; 6 | background-color: #000000; 7 | `; 8 | 9 | const SnackBar = ({ open, toggleSnack }) => { 10 | 11 | const handleClose = (event, reason) => { 12 | if (reason === 'clickaway') { 13 | return; 14 | } 15 | toggleSnack(false); 16 | }; 17 | 18 | return ( 19 | 20 | 21 | 22 | Number of Images should be between 3 and 200 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default SnackBar; -------------------------------------------------------------------------------- /postman-clone/src/components/ErrorScreen.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Box, Typography } from '@mui/material'; 3 | import { makeStyles } from '@mui/styles'; 4 | 5 | const useStyles = makeStyles({ 6 | error: { 7 | // objectFit: 'cover', 8 | width: '80%', 9 | height: 'auto', 10 | objectPosition: 'center 0%', 11 | margin: 'auto' 12 | } 13 | }) 14 | 15 | const ErrorScreen = () => { 16 | const classes = useStyles(); 17 | const error = 'https://i.stack.imgur.com/01tZQ.png'; 18 | 19 | return ( 20 | 21 | Response 22 | 23 | error 24 | 25 | 26 | ) 27 | } 28 | 29 | export default ErrorScreen; -------------------------------------------------------------------------------- /crud-app/src/Component/CodeForInterview.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Box, Typography, styled } from '@mui/material'; 3 | import Youtube from '../Assets/Images/youtube.png'; 4 | import InstaTele from '../Assets/Images/InstaTele.jpeg'; 5 | 6 | const Header = styled(Box)` 7 | margin: 50px; 8 | & > div { 9 | margin-top: 50px; 10 | } 11 | `; 12 | 13 | const Image = styled('img')({ 14 | width: '50%', 15 | height: '50%' 16 | }); 17 | 18 | const CodeForInterview = () => { 19 | 20 | return ( 21 |
22 | Code for Interview 23 | 24 | 25 | 26 | 27 |
28 | ) 29 | } 30 | 31 | export default CodeForInterview; -------------------------------------------------------------------------------- /imdb-clone/src/constants/constant.js: -------------------------------------------------------------------------------- 1 | export const logoURL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/2560px-IMDB_Logo_2016.svg.png'; 2 | 3 | export const POPULAR_API_URL = 'https://api.themoviedb.org/3/movie/popular?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US'; 4 | export const UPCOMING_API_URL = 'https://api.themoviedb.org/3/movie/upcoming?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US'; 5 | export const TOPRATED_API_URL = 'https://api.themoviedb.org/3/movie/top_rated?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US'; 6 | export const NOWPLAYING_API_URL = 'https://api.themoviedb.org/3/movie/now_playing?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US'; 7 | 8 | export const type = { 9 | popular: 'Most Popular', 10 | upcoming: 'Upcoming', 11 | toprated: 'Top Rated' 12 | } -------------------------------------------------------------------------------- /reddit-memes/src/components/Memes.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { getMemes } from "../services/api"; 3 | import { Grid } from "@mui/material"; 4 | import Meme from "./Meme"; 5 | 6 | const Memes = () => { 7 | const [memes, setMemes] = useState([]) 8 | 9 | useEffect(() => { 10 | const getData = async () => { 11 | let response = await getMemes(); 12 | setMemes(response.data.children); 13 | } 14 | getData(); 15 | }, []) 16 | 17 | return ( 18 | 19 | { 20 | memes.map(meme => ( 21 | 22 | 23 | 24 | )) 25 | } 26 | 27 | ) 28 | } 29 | 30 | export default Memes; -------------------------------------------------------------------------------- /crud-app/src/App.js: -------------------------------------------------------------------------------- 1 | import AllUsers from './Component/AllUsers'; 2 | import AddUser from './Component/AddUser'; 3 | import EditUser from './Component/EditUser'; 4 | import NavBar from './Component/NavBar'; 5 | import NotFound from './Component/NotFound'; 6 | import CodeForInterview from './Component/CodeForInterview'; 7 | 8 | import { BrowserRouter, Route, Routes } from 'react-router-dom'; 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | } /> 16 | } /> 17 | } /> 18 | } /> 19 | } /> 20 | 21 | 22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /recipe-finder/src/components/RecipeList.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Container, Header, Grid } from "semantic-ui-react"; 3 | import RecipeListItem from "./RecipeListItem"; 4 | 5 | const RecipeList = ({ recipes, searchedQuery }) => { 6 | 7 | return ( 8 | 9 |
14 | 15 | { 16 | recipes && recipes.map(recipe => ( 17 | 18 | 19 | 20 | )) 21 | } 22 | 23 | 24 | ) 25 | } 26 | 27 | export default RecipeList; -------------------------------------------------------------------------------- /breaking-bad/src/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | import Header from './components/Header'; 4 | import Characters from './components/Characters'; 5 | 6 | import { Box } from '@mui/material'; 7 | import { fetchData } from './service/api'; 8 | 9 | const App = () => { 10 | const [text, setText] = useState("") 11 | const [data, setData] = useState([]) 12 | 13 | useEffect(() => { 14 | const getData = async () => { 15 | const result = await fetchData(text) 16 | setData(result.data) 17 | console.log(result); 18 | } 19 | getData(); 20 | }, [text]); 21 | 22 | const getText = (text) => { 23 | setText(text); 24 | console.log(text); 25 | } 26 | 27 | return ( 28 | 29 |
30 | 31 | 32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /imdb-clone/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 5 | 6 | import { routePath } from './constants/routes'; 7 | 8 | // components 9 | import { Home, CategoryMovie } from './pages'; 10 | 11 | function App() { 12 | return ( 13 |
14 | 15 | 16 | } /> 17 | } /> 18 | {/* } /> */} 19 | {/* } /> */} 20 | } /> 21 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /google-keep-clone/src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 3 | import { Box } from '@mui/material'; 4 | 5 | //components 6 | import SwipeDrawer from './SwipeDrawer'; 7 | import Notes from './notes/Notes'; 8 | import Archives from './archives/Archives'; 9 | import DeleteNotes from './delete/DeleteNotes'; 10 | 11 | const Home = () => { 12 | return ( 13 | 14 | 15 | 16 | 17 | } /> 18 | } /> 19 | } /> 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | export default Home; -------------------------------------------------------------------------------- /blog-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.6.6", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "autoprefixer": "^10.4.17", 22 | "eslint": "^8.55.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.5", 26 | "postcss": "^8.4.33", 27 | "tailwindcss": "^3.4.1", 28 | "vite": "^5.0.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /postman-clone/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { makeStyles } from "@mui/styles"; 3 | import { AppBar, Toolbar } from "@mui/material"; 4 | 5 | const useStyles = makeStyles({ 6 | logo: { 7 | width: 100, 8 | padding: 5 9 | }, 10 | navbar: { 11 | background: ['#000', '!important'], 12 | position: ['static', '!important'], 13 | height: [50, '!important'] 14 | } 15 | }) 16 | 17 | const Header = () => { 18 | const classes = useStyles(); 19 | const logo = 'https://miro.medium.com/max/802/1*dLWPk_rziSpWhPx1UWONbQ@2x.png'; 20 | 21 | return ( 22 | <> 23 | logo 24 | {/* 25 | 26 | 27 | */} 28 | 29 | ) 30 | } 31 | 32 | export default Header; -------------------------------------------------------------------------------- /expense-tracker/src/Components/Transactions.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Typography, List, Divider, styled, Box } from '@mui/material'; 4 | import Transaction from './Transaction'; 5 | 6 | const Component = styled(Box)` 7 | & > h5 { 8 | margin-bottom: 10px; 9 | } 10 | `; 11 | 12 | const Transactions = ({ transactions, deleteTransaction }) => { 13 | 14 | return ( 15 | 16 | Transaction History 17 | 18 | 19 | { 20 | transactions.map(transaction => { 21 | return 22 | }) 23 | } 24 | 25 | 26 | ) 27 | } 28 | 29 | export default Transactions; -------------------------------------------------------------------------------- /expense-tracker/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | background-color: #F6F6F6; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | min-height: 100vh; 7 | margin: 0; 8 | font-family: 'Lato', sans-serif; 9 | } 10 | 11 | .App-logo { 12 | height: 40vmin; 13 | pointer-events: none; 14 | } 15 | 16 | @media (prefers-reduced-motion: no-preference) { 17 | .App-logo { 18 | animation: App-logo-spin infinite 20s linear; 19 | } 20 | } 21 | 22 | .App-header { 23 | background-color: #282c34; 24 | min-height: 100vh; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | justify-content: center; 29 | font-size: calc(10px + 2vmin); 30 | color: white; 31 | } 32 | 33 | .App-link { 34 | color: #61dafb; 35 | } 36 | 37 | @keyframes App-logo-spin { 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | to { 42 | transform: rotate(360deg); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /recipe-finder/src/App.css: -------------------------------------------------------------------------------- 1 | .bg-image { 2 | position: relative; 3 | background: linear-gradient(rgba(8, 8, 8, 0.3), rgba(8, 8, 8, 0.3)), url('https://thumbs.dreamstime.com/b/wooden-table-food-top-view-cafe-102532611.jpg'); 4 | min-height: 100vh; 5 | background-position: center; 6 | background-repeat: no-repeat; 7 | background-size: cover; 8 | } 9 | 10 | .text-content { 11 | text-align: center; 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | 18 | .header-title { 19 | text-transform: uppercase; 20 | letter-spacing: 16px; 21 | color: #fff; 22 | font-size: 80px; 23 | margin-bottom: 32px; 24 | } 25 | 26 | .search-box { 27 | padding-top: 100px !important; 28 | padding-bottom: 20px !important; 29 | } 30 | 31 | .search-heading { 32 | font-size: 30px; 33 | margin-bottom: 16px; 34 | } 35 | 36 | .detailsPageContent { 37 | padding-top: 100px !important 38 | } -------------------------------------------------------------------------------- /recipe-finder/src/pages/Recipes.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import Search from "../components/Search"; 3 | import RecipeList from "../components/RecipeList"; 4 | import { getRecipes } from "../services/api"; 5 | 6 | const Recipes = () => { 7 | const [searchedQuery, setSearchedQuery] = useState('pizza'); 8 | const [recipes, setRecipes] = useState([]); 9 | 10 | useEffect(() => { 11 | getSearchedResult(); 12 | }, [searchedQuery]) 13 | 14 | const getSearchedResult = async () => { 15 | let result = await getRecipes(searchedQuery); 16 | if (result && result.recipes) { 17 | setRecipes(result.recipes); 18 | } 19 | } 20 | 21 | return ( 22 | <> 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default Recipes; -------------------------------------------------------------------------------- /postman-clone/src/context/DataProvider.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { useState, createContext } from 'react'; 3 | 4 | export const DataContext = createContext(null); 5 | 6 | const DataProvider = ({ children }) => { 7 | 8 | const [formData, setFormData] = useState({ url: '', type: 'POST' }) 9 | const [jsonText, setJsonText] = useState(''); 10 | const [paramData, setParamData] = useState([]); 11 | const [headerData, setHeaderData] = useState([]); 12 | 13 | return ( 14 | 26 | {children} 27 | 28 | ) 29 | } 30 | 31 | export default DataProvider; -------------------------------------------------------------------------------- /expense-tracker/src/Components/Transaction.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { ListItemText, ListItem, styled, ListItemIcon } from '@mui/material'; 3 | import DeleteIcon from '@mui/icons-material/Delete'; 4 | 5 | const List = styled(ListItem)` 6 | display: flex; 7 | marginTop: 10px; 8 | border: 1px solid #F6F6F6; 9 | `; 10 | 11 | const Transaction = ({transaction, deleteTransaction}) => { 12 | 13 | const sign = transaction.amount >= 0 ? '₹' : '-₹'; 14 | const amount = sign + Math.abs(transaction.amount); 15 | const color = transaction.amount >=0 ? 'Green' : 'Red'; 16 | 17 | 18 | return ( 19 | 20 | 21 | deleteTransaction(transaction.id)} /> 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default Transaction; -------------------------------------------------------------------------------- /game-of-thrones/src/components/Characters.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { Box, Grid } from '@mui/material'; 3 | // import { data } from '../constants/data'; 4 | import Character from './Character'; 5 | 6 | import { getData } from '../service/api'; 7 | 8 | const Characters = () => { 9 | 10 | const [data, setData] = useState([]); 11 | 12 | useEffect(() => { 13 | getCharacters(); 14 | }, []) 15 | 16 | const getCharacters = async () => { 17 | let response = await getData(); 18 | setData(response.data); 19 | } 20 | 21 | return ( 22 | 23 | 24 | { 25 | data.map((value, index) => ( 26 | 27 | )) 28 | } 29 | 30 | 31 | ) 32 | 33 | } 34 | 35 | export default Characters; -------------------------------------------------------------------------------- /breaking-bad/src/components/Character.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Card, styled, Tooltip, Typography } from '@mui/material'; 3 | 4 | const Image = styled('img')({ 5 | height: 300, 6 | width: '100%', 7 | objectFit: 'cover' 8 | }) 9 | 10 | const Character = ({ item }) => { 11 | 12 | return ( 13 | 14 | 16 | Name: {item.name} 17 | Real Name: {item.portrayed} 18 | Nickname: {item.nickname} 19 | Birthday: {item.birthday} 20 | Status: {item.status} 21 | 22 | } 23 | 24 | arrow placement="top"> 25 | character 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Character; -------------------------------------------------------------------------------- /postman-clone/src/utils/common-utils.js: -------------------------------------------------------------------------------- 1 | 2 | const checkValidJson = (text) => { 3 | if (/^[\],:{}\s]*$/.test(text.replace(/\\["\\\/bfnrtu]/g, '@'). 4 | replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']'). 5 | replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { 6 | return true; 7 | }else{ 8 | return false; 9 | } 10 | } 11 | 12 | export const checkParams = (formData, jsonText, paramData, headerData, setErrorMsg) => { 13 | 14 | if(!formData.url) { 15 | setErrorMsg('Request URL is empty!'); 16 | return false; 17 | } 18 | 19 | if(!checkValidJson(jsonText)) { 20 | setErrorMsg('Text is not valid json'); 21 | return false; 22 | } 23 | 24 | return true; 25 | } 26 | 27 | export const getHeadersAndParams = (objArr) => { 28 | let obj = {}; 29 | objArr.forEach(data => { 30 | if (data.hasOwnProperty('check') && data.check) { 31 | obj = { ...obj, [data.key]: data.value }; 32 | } 33 | }) 34 | return obj; 35 | } -------------------------------------------------------------------------------- /weather-app/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Box, styled } from '@mui/material'; 3 | import Sunset from '../assets/images/bg.jpg'; 4 | import Form from '../components/Form'; 5 | import Information from '../components/Information'; 6 | 7 | const Component = styled(Box)({ 8 | height: '100vh', 9 | display: 'flex', 10 | alignItems: 'center', 11 | margin: '0 auto', 12 | width: '65%' 13 | }) 14 | 15 | const Image = styled(Box)({ 16 | backgroundImage: `url(${Sunset})`, 17 | width: '27%', 18 | height: '80%', 19 | backgroundSize: 'cover', 20 | borderRadius: '20px 0 0 20px' 21 | }) 22 | 23 | const Home = () => { 24 | const [result, setResult] = useState({}) 25 | 26 | return ( 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Home; -------------------------------------------------------------------------------- /live-score/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "live-score", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.2", 7 | "@material-ui/icons": "^4.11.2", 8 | "@testing-library/jest-dom": "^5.11.8", 9 | "@testing-library/react": "^11.2.3", 10 | "@testing-library/user-event": "^12.6.0", 11 | "react": "^17.0.1", 12 | "react-dom": "^17.0.1", 13 | "react-scripts": "4.0.1", 14 | "web-vitals": "^0.2.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postman-clone/src/components/CreateJsonText.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import { TextareaAutosize, Typography } from '@mui/material'; 4 | 5 | import { DataContext } from '../context/DataProvider'; 6 | 7 | const textareaStyle = { 8 | width: '100%', 9 | padding: 10, 10 | background: `url(http://i.imgur.com/2cOaJ.png)`, 11 | backgroundAttachment: 'local', 12 | backgroundRepeat: 'no-repeat', 13 | paddingLeft: 35, 14 | paddingTop: 10, 15 | borderColor: '#ccc' 16 | } 17 | 18 | const CreateJsonText = () => { 19 | 20 | const { setJsonText } = useContext(DataContext); 21 | 22 | const onValueChange = (e) => { 23 | setJsonText(e.target.value); 24 | } 25 | 26 | return ( 27 | <> 28 | JSON 29 | onValueChange(e)} 34 | /> 35 | 36 | ) 37 | } 38 | 39 | export default CreateJsonText; -------------------------------------------------------------------------------- /google-keep-clone/src/components/HeaderBar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { AppBar, Toolbar, Typography, IconButton } from '@mui/material'; 3 | import { Menu } from '@mui/icons-material'; 4 | import { styled } from '@mui/material/styles'; 5 | 6 | const Header = styled(AppBar)` 7 | z-index: 1201; 8 | background: #fff; 9 | height: 70px; 10 | box-shadow: inset 0 -1px 0 0 #dadce0; 11 | ` 12 | 13 | const Heading = styled(Typography)` 14 | color: #5F6368; 15 | font-size: 24px; 16 | margin-left: 25px; 17 | ` 18 | 19 | 20 | const HeaderBar = ({ open, handleDrawer }) => { 21 | const logo = 'https://seeklogo.com/images/G/google-keep-logo-0BC92EBBBD-seeklogo.com.png'; 22 | 23 | return ( 24 |
25 | 26 | handleDrawer()} 28 | sx={{ marginRight: '20px'}} 29 | edge="start" 30 | > 31 | 32 | 33 | logo 34 | Keep 35 | 36 |
37 | ) 38 | } 39 | 40 | export default HeaderBar; -------------------------------------------------------------------------------- /weather-app/server/server.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import fs from 'fs' 3 | 4 | import express from 'express' 5 | import React from 'react' 6 | import ReactDOMServer from 'react-dom/server' 7 | 8 | import App from '../src/App' 9 | 10 | const PORT = 8080 11 | const app = express() 12 | 13 | const router = express.Router() 14 | 15 | const serverRenderer = (req, res, next) => { 16 | fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => { 17 | if (err) { 18 | console.error(err) 19 | return res.status(500).send('An error occurred') 20 | } 21 | return res.send( 22 | data.replace( 23 | '
', 24 | `
${ReactDOMServer.renderToString()}
` 25 | ) 26 | ) 27 | }) 28 | } 29 | router.use('^/$', serverRenderer) 30 | 31 | router.use( 32 | express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }) 33 | ) 34 | 35 | // tell the app to use the above rules 36 | app.use(router) 37 | 38 | // app.use(express.static('./build')) 39 | app.listen(PORT, () => { 40 | console.log(`SSR running on port ${PORT}`) 41 | }) 42 | -------------------------------------------------------------------------------- /google-keep-clone/src/components/archives/Archives.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import { Box, Grid } from '@mui/material'; 4 | import { styled } from '@mui/material/styles'; 5 | 6 | import { DataContext } from '../../context/DataProvider'; 7 | 8 | //components 9 | import Archive from './Archive'; 10 | 11 | const DrawerHeader = styled('div')(({ theme }) => ({ 12 | ...theme.mixins.toolbar, 13 | })); 14 | 15 | const Archives = () => { 16 | 17 | const { archiveNotes } = useContext(DataContext); 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | { 25 | archiveNotes.map(archive => ( 26 | 27 | 28 | 29 | )) 30 | } 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Archives; -------------------------------------------------------------------------------- /corona-dashboard/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import { Grid, CardContent, Box, Typography, Card, makeStyles } from '@material-ui/core'; 2 | import CountUp from 'react-countup'; 3 | 4 | const useStyle = makeStyles({ 5 | header: { 6 | background: '#F5F5F5', 7 | padding: 10 8 | } 9 | }) 10 | 11 | const CardComponent = ({cardTitle, value, desc, lastUpdate}) => { 12 | const classes = useStyle(); 13 | return ( 14 | 15 | 16 | {cardTitle} 17 | 18 | 19 | 20 | 21 | 22 | {desc} 23 | {new Date(lastUpdate).toDateString()} 24 | 25 | 26 | ); 27 | } 28 | 29 | export default CardComponent; -------------------------------------------------------------------------------- /recipe-finder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "recipe-finder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.3.4", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.8.2", 13 | "react-scripts": "5.0.1", 14 | "semantic-ui-css": "^2.5.0", 15 | "semantic-ui-react": "^2.1.4", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /reddit-memes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reddit-memes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.6", 7 | "@emotion/styled": "^11.10.6", 8 | "@mui/material": "^5.11.12", 9 | "@testing-library/jest-dom": "^5.16.5", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "axios": "^1.3.4", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /expense-tracker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expense-tracker", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.9.0", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/icons-material": "^5.6.2", 9 | "@mui/material": "^5.6.3", 10 | "@testing-library/jest-dom": "^5.11.10", 11 | "@testing-library/react": "^11.2.5", 12 | "@testing-library/user-event": "^12.8.3", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.1.1" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /todo-app/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { VStack, Box } from '@chakra-ui/react'; 3 | 4 | //components 5 | import Header from "./components/Header"; 6 | import Todos from './components/Todos'; 7 | import AddTodo from './components/AddTodo'; 8 | 9 | const initialTodo = [ 10 | { 11 | id: 1, 12 | text: 'Hello' 13 | } 14 | ]; 15 | 16 | function App() { 17 | 18 | const [todos, setTodos] = useState(() => JSON.parse(localStorage.getItem('todos')) || []) //initialTodo 19 | 20 | useEffect(() => { 21 | localStorage.setItem('todos', JSON.stringify(todos)) 22 | }, [todos]) 23 | 24 | const deleteTodo = (id) => { 25 | const updatedTodo = todos.filter(todo => todo.id !== id); 26 | setTodos(updatedTodo); 27 | } 28 | 29 | return ( 30 | 31 |
32 | 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /google-keep-clone/src/components/delete/DeleteNotes.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import { Box, Grid } from '@mui/material'; 4 | import { styled } from '@mui/material/styles'; 5 | 6 | import { DataContext } from '../../context/DataProvider'; 7 | 8 | //components 9 | import DeleteNote from './DeleteNote'; 10 | 11 | const DrawerHeader = styled('div')(({ theme }) => ({ 12 | ...theme.mixins.toolbar, 13 | })); 14 | 15 | const DeleteNotes = () => { 16 | 17 | const { deleteNotes } = useContext(DataContext); 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | { 25 | deleteNotes.map(deleteNote => ( 26 | 27 | 28 | 29 | )) 30 | } 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default DeleteNotes; -------------------------------------------------------------------------------- /recipe-finder/src/components/Search.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Grid, Form, Input } from 'semantic-ui-react'; 3 | 4 | const Search = ({ setSearchedQuery }) => { 5 | const [value, setValue] = useState(""); 6 | 7 | const onFormSubmit = () => { 8 | setSearchedQuery(value); 9 | } 10 | 11 | return ( 12 | 13 | 14 |

15 | Search Recipes with Our Recipe 16 |

17 |

Input Recipes seperated by comma

18 | 19 | setValue(e.target.value)} 23 | value={value} 24 | /> 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | export default Search; -------------------------------------------------------------------------------- /users-processing-service/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users-processing-service", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.5", 7 | "@emotion/styled": "^11.10.5", 8 | "@mui/material": "^5.10.15", 9 | "@testing-library/jest-dom": "^5.16.5", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "axios": "^1.2.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /corona-dashboard/src/components/Countries.jsx: -------------------------------------------------------------------------------- 1 | import { Typography, NativeSelect } from "@material-ui/core"; 2 | import { useEffect, useState } from "react"; 3 | import { fetchCountries } from "../service/api"; 4 | 5 | 6 | 7 | const Countries = ({ handleCountryChange }) => { 8 | 9 | const [ countries, setCountries ] = useState([]); 10 | 11 | useEffect(() => { 12 | const fetchApi = async() => { 13 | setCountries(await fetchCountries()); 14 | } 15 | fetchApi(); 16 | }, []) 17 | 18 | return ( 19 | <> 20 | Reported Cases or Deaths by Country or Territory 21 | handleCountryChange(e.target.value)}> 22 | 23 | { countries.map((country, i) => { 24 | return ( 25 | 26 | ) 27 | })} 28 | 29 | 30 | ) 31 | } 32 | 33 | export default Countries; -------------------------------------------------------------------------------- /breaking-bad/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "breaking-bad", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.9.0", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/icons-material": "^5.6.2", 9 | "@mui/material": "^5.6.3", 10 | "@testing-library/jest-dom": "^5.11.9", 11 | "@testing-library/react": "^11.2.3", 12 | "@testing-library/user-event": "^12.6.2", 13 | "axios": "^0.27.2", 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1", 16 | "react-scripts": "4.0.1", 17 | "web-vitals": "^0.2.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /corona-dashboard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "corona-dashboard", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.3", 7 | "@testing-library/jest-dom": "^5.11.9", 8 | "@testing-library/react": "^11.2.3", 9 | "@testing-library/user-event": "^12.6.2", 10 | "axios": "^0.21.1", 11 | "chart.js": "^2.9.4", 12 | "react": "^17.0.1", 13 | "react-chartjs-2": "^2.11.1", 14 | "react-countup": "^4.3.3", 15 | "react-dom": "^17.0.1", 16 | "react-scripts": "4.0.1", 17 | "web-vitals": "^0.2.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /image-finder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-finder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.9.3", 7 | "@emotion/styled": "^11.9.3", 8 | "@mui/icons-material": "^5.8.3", 9 | "@mui/material": "^5.8.3", 10 | "@testing-library/jest-dom": "^5.11.9", 11 | "@testing-library/react": "^11.2.5", 12 | "@testing-library/user-event": "^12.7.0", 13 | "axios": "^0.27.2", 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1", 16 | "react-scripts": "4.0.2", 17 | "web-vitals": "^1.1.0" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /todo-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/react": "^1.6.6", 7 | "@emotion/react": "^11.4.1", 8 | "@emotion/styled": "^11.3.0", 9 | "@testing-library/jest-dom": "^5.14.1", 10 | "@testing-library/react": "^11.2.7", 11 | "@testing-library/user-event": "^12.8.3", 12 | "framer-motion": "^4.1.17", 13 | "nanoid": "^3.1.25", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-icons": "^4.2.0", 17 | "react-scripts": "4.0.3", 18 | "web-vitals": "^1.1.2" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /codepen-clone/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codepen-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.7.1", 7 | "@emotion/styled": "^11.6.0", 8 | "@mui/icons-material": "^5.3.1", 9 | "@mui/material": "^5.3.1", 10 | "@testing-library/jest-dom": "^5.16.1", 11 | "@testing-library/react": "^12.1.2", 12 | "@testing-library/user-event": "^13.5.0", 13 | "codemirror": "^5.65.1", 14 | "react": "^17.0.2", 15 | "react-codemirror2": "^7.2.1", 16 | "react-dom": "^17.0.2", 17 | "react-scripts": "5.0.0", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /imdb-clone/src/component/UpNext.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Typography, Box, styled } from "@mui/material"; 4 | 5 | 6 | const Component = styled(Box)` 7 | width: 40%; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: baseline; 11 | padding-left: 20px; 12 | & > p { 13 | color: #F5C518; 14 | font-weight: 600; 15 | font-size: 18px; 16 | margin-bottom: 10px; 17 | } 18 | `; 19 | 20 | const Wrapper = styled(Box)` 21 | color: #FFFFFF; 22 | display: flex; 23 | & > p { 24 | margin-left: 20px; 25 | } 26 | ` 27 | 28 | const Poster = styled('img')({ 29 | width: 88 30 | }) 31 | 32 | const UpNext = ({ movies }) => { 33 | return ( 34 | 35 | Up next 36 | { 37 | movies.splice(0, 3).map(movie => ( 38 | 39 | 40 | {movie.original_title} 41 | 42 | )) 43 | } 44 | 45 | ) 46 | } 47 | 48 | export default UpNext; 49 | -------------------------------------------------------------------------------- /recipe-finder/src/components/RecipeListItem.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Button, Card } from 'semantic-ui-react'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | const RecipeListItem = ({ recipe }) => { 7 | 8 | return ( 9 | 10 | thumbnail 11 | 12 | 13 | 14 |

{recipe.publisher}

15 | 16 | 17 | 18 |