├── 1.Pre ├── Destructuring │ ├── array.js │ ├── nested.js │ └── object.js ├── Spread │ ├── array.js │ └── object.js ├── filter&map │ ├── filter.js │ └── map.js └── this │ ├── index.html │ └── script.js ├── 2.React ├── Counter.html ├── index.html ├── movies │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Components │ │ ├── Banner.js │ │ ├── Favourite.js │ │ ├── Movies.js │ │ ├── Navbar.js │ │ └── getMovies.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js └── todo │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Components │ └── Todo.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── 3.Hooks └── hooks │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Components │ ├── Child.js │ ├── Context.js │ ├── Infinite.js │ ├── Navbar.js │ ├── Parent1.js │ ├── Parent2.js │ ├── Ue1.js │ ├── Ue2.js │ ├── Ue3.js │ └── Us.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── ShoppingCart ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── Cart │ │ ├── Cart.css │ │ ├── Cart.js │ │ └── CartItem │ │ │ ├── CartItem.css │ │ │ └── CartItem.js │ ├── Navbar │ │ ├── Navbar.css │ │ └── Navbar.js │ ├── Products │ │ ├── Product │ │ │ ├── Product.css │ │ │ ├── Product.js │ │ │ └── Products.js │ │ ├── Products.js │ │ ├── Products.module.css │ │ ├── book.jpg │ │ ├── smartphone.jpg │ │ └── speaker.jpg │ └── SingleItem │ │ ├── SingleItem.css │ │ └── SingleItem.js │ ├── constants │ └── coupons.js │ ├── index.css │ ├── index.js │ ├── redux │ ├── actions.js │ ├── book.jpg │ ├── shopReducer.js │ ├── smartphone.jpg │ ├── speaker.jpg │ └── store.js │ └── serviceWorker.js ├── firebasedemo ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Components │ ├── Fireauth.js │ ├── Firebase.js │ └── Firestorage.js │ ├── firebase.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── ip ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Button.js │ ├── Child.js │ ├── Counter.js │ ├── HOC.js │ ├── Parent.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ ├── setupTests.js │ └── temp.js ├── key ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── reduxdemo ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Components │ ├── Ball.js │ ├── Bat.js │ └── User.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── redux │ ├── action.js │ ├── ballActions.js │ ├── ballReducer.js │ ├── batReducer.js │ ├── rootReducer.js │ ├── store.js │ ├── userActions.js │ └── userReducer.js │ ├── reportWebVitals.js │ └── setupTests.js ├── reels ├── .firebase │ └── hosting.YnVpbGQ.cache ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Assets │ ├── Instagram.JPG │ ├── bg.jpg │ ├── img1.jpg │ ├── img2.jpg │ ├── img3.jpg │ ├── img4.jpg │ ├── img5.jpg │ └── insta.png │ ├── Components │ ├── AddComment.js │ ├── Comments.js │ ├── Feed.js │ ├── Ioa.js │ ├── Like.js │ ├── Like2.js │ ├── Login.css │ ├── Login.js │ ├── Navbar.js │ ├── Posts.css │ ├── Posts.js │ ├── PrivateRoute.js │ ├── Profile.css │ ├── Profile.js │ ├── Signup.css │ ├── Signup.js │ ├── UploadFile.js │ ├── Video.css │ └── Video.js │ ├── Context │ └── AuthContext.js │ ├── firebase.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ ├── setupTests.js │ └── videos │ ├── vid1.mp4 │ ├── vid2.mp4 │ └── vid3.mp4 └── ui ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── images │ ├── logo.svg │ ├── skin1.svg │ ├── skin2.svg │ ├── skin3.svg │ ├── skin4.svg │ ├── skin5.svg │ ├── skin6.svg │ ├── skin7.svg │ └── skin8.svg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── components ├── PrivateRoute.js └── presentation │ ├── aboutUs.js │ ├── contact.js │ ├── education.js │ ├── finalizePage.js │ ├── footer.js │ ├── gettingStarted.js │ ├── header.js │ ├── landingPage.js │ ├── login.js │ ├── register.js │ └── resumePreview.js ├── constants └── typeCodes.js ├── index.css ├── index.js ├── logo.svg ├── redux ├── actions │ ├── actions.js │ ├── authActions.js │ ├── contactAction.js │ ├── documentActions.js │ └── educationActions.js └── reducers │ ├── authReducer.js │ ├── contactReducer.js │ ├── documentReducer.js │ ├── educationReducer.js │ ├── initialState.json │ └── rootReducer.js ├── reportWebVitals.js ├── setupTests.js └── static ├── images ├── aboutus.jpg ├── logo.png └── resume.png ├── scss.zip └── scss ├── app.scss ├── button.scss ├── common.scss ├── documentStyles.scss ├── footer.scss ├── form.scss ├── getting-started.scss ├── header.scss └── lp.scss /1.Pre/Destructuring/array.js: -------------------------------------------------------------------------------- 1 | let arr = ["Hi","I","am","Udai"]; 2 | 3 | // let a = arr[0]; 4 | // let b = arr[1]; 5 | 6 | //Destructuring 7 | // let [a,b,c,d] = arr 8 | 9 | // let [a,b,,d] = arr 10 | 11 | let [a,b,c,d,extra='Hlo'] = arr 12 | 13 | console.log(a,b,d,extra); -------------------------------------------------------------------------------- /1.Pre/Destructuring/nested.js: -------------------------------------------------------------------------------- 1 | let obj = { 2 | name:"Udai", 3 | add: { 4 | country:"India", 5 | state:{ 6 | code:"DL", 7 | pin:"111111" 8 | } 9 | } 10 | } 11 | 12 | let {name} = obj; 13 | 14 | let {add:{country:abcd}} = obj 15 | 16 | let {add:{state:{code:cd}}} = obj 17 | 18 | console.log(cd) -------------------------------------------------------------------------------- /1.Pre/Destructuring/object.js: -------------------------------------------------------------------------------- 1 | let obj = { 2 | name : "Udai", 3 | state : "Delhi", 4 | country : "India" 5 | } 6 | 7 | // let name = obj.name; 8 | // let state = obj["state"]; 9 | 10 | // let {name,state,country} = obj 11 | // let {name,state,country,extra="deafult value"} = obj 12 | 13 | 14 | let {name:firstname,state,country,extra="deafult value"} = obj 15 | 16 | console.log(firstname,state,country,extra); -------------------------------------------------------------------------------- /1.Pre/Spread/array.js: -------------------------------------------------------------------------------- 1 | let arr = [1,2,3]; 2 | 3 | // let arr2 = arr; 4 | 5 | // arr2.push(4); 6 | 7 | // console.log(arr); 8 | // console.log(arr2); 9 | 10 | let arr2 = [...arr] 11 | 12 | arr2.push(4); 13 | 14 | console.log(arr); 15 | console.log(arr2); -------------------------------------------------------------------------------- /1.Pre/Spread/object.js: -------------------------------------------------------------------------------- 1 | let obj = { 2 | name: "Udai", 3 | add : { 4 | country: "India", 5 | state : { 6 | code : "DL", 7 | pin : "111111" 8 | } 9 | } 10 | } 11 | 12 | // let obj2 = obj; 13 | // obj2.name = "abcd", 14 | 15 | // let obj2 = {...obj} ///SHALLOW COPY 16 | // obj2.name = "abcd", 17 | 18 | 19 | // let obj2 = {...obj,add:{...obj.add}} 20 | // obj2.add.country = "abcd" 21 | 22 | // let obj2 = {...obj,add:{...obj.add,state:{...obj.add.state}}} //DEEP COPY 23 | 24 | // obj2.add.state.code = 10 25 | 26 | // console.log(obj); 27 | // console.log(obj2); 28 | 29 | let obj2 = JSON.parse(JSON.stringify(obj)); 30 | obj2.add.state.code = 10; 31 | console.log(obj); 32 | console.log(obj2); -------------------------------------------------------------------------------- /1.Pre/filter&map/filter.js: -------------------------------------------------------------------------------- 1 | let arr = ["apple","banana","orange","watermelon"] 2 | 3 | let narr = []; 4 | 5 | // for(let i=0;i6){ 8 | // narr.push(fruit); 9 | // } 10 | // } 11 | 12 | narr = arr.filter(function(fruit){ 13 | return fruit.length>6 14 | }) 15 | 16 | console.log(arr); 17 | console.log(narr); -------------------------------------------------------------------------------- /1.Pre/filter&map/map.js: -------------------------------------------------------------------------------- 1 | let arr = [1,2,3,4,5] 2 | 3 | let narr = []; 4 | 5 | // for(let i=0;i{ 10 | // console.log(value,idx); 11 | return value*2; 12 | }) 13 | 14 | console.log(arr); 15 | console.log(narr); -------------------------------------------------------------------------------- /1.Pre/this/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /1.Pre/this/script.js: -------------------------------------------------------------------------------- 1 | // console.log(this); //Windows 2 | 3 | // function fn(){ 4 | // console.log(this); //windows 5 | // } 6 | 7 | // fn(); 8 | 9 | // let obj = { 10 | // name : "Udai", 11 | // func : fn 12 | // } 13 | 14 | // obj.func() //Self obj 15 | 16 | // function fn(){ 17 | // console.log(this); 18 | // function abc(){ 19 | // console.log(this); ///windows object 20 | // } 21 | // abc(); 22 | // } 23 | 24 | // let obj = { 25 | // name:"Udai", 26 | // func : fn 27 | // } 28 | 29 | // obj.func() 30 | 31 | //METHOD 1 : bind function 32 | 33 | // function fn(){ 34 | // console.log(this); 35 | // function abc(){ 36 | // console.log(this); 37 | // } 38 | // let ret = abc.bind(this); 39 | // ret(); 40 | // } 41 | 42 | // let obj = { 43 | // name:"Udai", 44 | // func : fn 45 | // } 46 | 47 | // obj.func() 48 | 49 | //METHOD 2 : Arrow function 50 | 51 | function fn(){ 52 | console.log(this); 53 | abc = () => { 54 | console.log(this); 55 | } 56 | abc(); 57 | } 58 | 59 | let obj = { 60 | name:"Udai", 61 | func : fn 62 | } 63 | 64 | obj.func() 65 | -------------------------------------------------------------------------------- /2.React/Counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 |
14 | 15 | 49 | -------------------------------------------------------------------------------- /2.React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 |
14 | 15 | 57 | -------------------------------------------------------------------------------- /2.React/movies/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /2.React/movies/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movies", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router-dom": "^5.3.0", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2" 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 | -------------------------------------------------------------------------------- /2.React/movies/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/movies/public/favicon.ico -------------------------------------------------------------------------------- /2.React/movies/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 20 | 29 | React App 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /2.React/movies/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/movies/public/logo192.png -------------------------------------------------------------------------------- /2.React/movies/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/movies/public/logo512.png -------------------------------------------------------------------------------- /2.React/movies/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /2.React/movies/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2.React/movies/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 | 40 | .banner-card{ 41 | width: 100vw; 42 | margin-top: 1vh; 43 | margin-bottom: 3vh; 44 | position: relative; 45 | height: 70vh; 46 | color: white; 47 | } 48 | 49 | .banner-img{ 50 | height: 70vh; 51 | width: 100%; 52 | } 53 | 54 | .banner-title{ 55 | position: absolute; 56 | top: 45vh; 57 | left: 5vw; 58 | } 59 | 60 | .banner-text{ 61 | position: absolute; 62 | top: 55vh; 63 | left: 5vw; 64 | height: 4.5rem; 65 | overflow: hidden; 66 | margin-right: 5vw; 67 | } 68 | 69 | .movies-list{ 70 | display: flex; 71 | flex-wrap: wrap; 72 | padding: 1rem; 73 | justify-content: center; 74 | } 75 | 76 | .movies-card{ 77 | width: 20vw; 78 | margin: 1rem; 79 | color: white; 80 | position: relative; 81 | } 82 | 83 | .movies-title{ 84 | position: absolute; 85 | top: 1rem; 86 | left: 1rem; 87 | 88 | } 89 | 90 | .movies-button{ 91 | position: absolute; 92 | bottom: 2rem; 93 | } 94 | /* style={{height:'40vh',width:'20vw'}} */ 95 | .movies-img{ 96 | height: 40vh; 97 | width: 20vw; 98 | } 99 | 100 | .favourites-genres{ 101 | padding: 3rem; 102 | } 103 | 104 | .favourites-table{ 105 | padding: 3rem; 106 | overflow: auto; 107 | } 108 | 109 | @media screen and (max-width:400px){ 110 | .banner-card{ 111 | height:30vh; 112 | } 113 | .banner-img{ 114 | height: 30vh; 115 | } 116 | .banner-title{ 117 | top: 12vh; 118 | left: 5vw 119 | } 120 | .banner-text{ 121 | top: 17vh; 122 | left: 5vw; 123 | } 124 | .movies-card{ 125 | width: 40vw; 126 | margin: 0.1rem; 127 | } 128 | .movies-button{ 129 | width: 80%; 130 | } 131 | .movies-img{ 132 | width: 40vw; 133 | } 134 | } -------------------------------------------------------------------------------- /2.React/movies/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import Navbar from './Components/Navbar'; 3 | import Banner from './Components/Banner'; 4 | import Movies from './Components/Movies'; 5 | import Favourite from './Components/Favourite'; 6 | import {BrowserRouter as Router,Switch,Route, BrowserRouter} from 'react-router-dom'; 7 | import './App.css'; 8 | 9 | function App() { 10 | return ( 11 | 12 | 13 | 14 | ( 15 | <> 16 | 17 | 18 | 19 | )}/> 20 | 21 | 22 | {/* */} 23 | {/* name="udai" */} 24 | {/* */} 25 | 26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /2.React/movies/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 | -------------------------------------------------------------------------------- /2.React/movies/src/Components/Banner.js: -------------------------------------------------------------------------------- 1 | import {movies} from './getMovies'; 2 | import React, { Component } from 'react' 3 | 4 | export default class Banner extends Component { 5 | 6 | render() { 7 | let movie = movies.results[0] 8 | // let movie='' 9 | return ( 10 | <> 11 | { movie == ''? 12 |
13 | Loading... 14 |
: 15 |
16 | {movie.title} 17 | {/*
*/} 18 |

{movie.original_title}

19 | 20 | {/* Go somewhere */} 21 | {/*
*/} 22 |
23 | } 24 | 25 | ) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /2.React/movies/src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | export default class Navbar extends Component { 5 | render() { 6 | return ( 7 |
8 |

Movies App

9 |

Favourites

10 | 11 | 12 |
13 | ) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /2.React/movies/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 | -------------------------------------------------------------------------------- /2.React/movies/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 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /2.React/movies/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2.React/movies/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 | -------------------------------------------------------------------------------- /2.React/movies/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 | -------------------------------------------------------------------------------- /2.React/todo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /2.React/todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2.React/todo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/todo/public/favicon.ico -------------------------------------------------------------------------------- /2.React/todo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /2.React/todo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/todo/public/logo192.png -------------------------------------------------------------------------------- /2.React/todo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/2.React/todo/public/logo512.png -------------------------------------------------------------------------------- /2.React/todo/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /2.React/todo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /2.React/todo/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 | -------------------------------------------------------------------------------- /2.React/todo/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Todo from './Components/Todo'; 3 | 4 | function App() { 5 | return ( 6 | 7 | ); 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /2.React/todo/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 | -------------------------------------------------------------------------------- /2.React/todo/src/Components/Todo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Todo extends Component { 4 | constructor(){ 5 | super(); 6 | this.state={ 7 | tasks:[{task:'Check mails',id:1},{task:'Read article',id:2},{task:'Complete HW',id:3}], 8 | currTask:'' 9 | } 10 | } 11 | handleChange=(e)=>{ 12 | console.log(e.target.value) 13 | this.setState({ 14 | currTask:e.target.value 15 | }) 16 | } 17 | handleSubmit = () => { 18 | this.setState({ 19 | tasks:[...this.state.tasks,{task:this.state.currTask,id:this.state.tasks.length+1}], 20 | currTask:'' 21 | }) 22 | } 23 | handleDelete = (id) => { 24 | let narr = this.state.tasks.filter((taskObj)=>{ 25 | return taskObj.id!=id 26 | }) 27 | this.setState({ 28 | tasks:[...narr] 29 | }) 30 | } 31 | render() { 32 | console.log('render') 33 | return ( 34 |
35 | 36 | 37 |
    38 | { 39 | this.state.tasks.map(function(taskObj){ 40 | return( 41 |
  • 42 |

    {taskObj.task}

    43 | 44 |
    • 45 | ) 46 | }.bind(this) 47 | ) 48 | } 49 |
50 |
51 | ); 52 | } 53 | } 54 | 55 | export default Todo; 56 | -------------------------------------------------------------------------------- /2.React/todo/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 | -------------------------------------------------------------------------------- /2.React/todo/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 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /2.React/todo/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2.React/todo/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 | -------------------------------------------------------------------------------- /2.React/todo/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 | -------------------------------------------------------------------------------- /3.Hooks/hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /3.Hooks/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /3.Hooks/hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/3.Hooks/hooks/public/favicon.ico -------------------------------------------------------------------------------- /3.Hooks/hooks/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /3.Hooks/hooks/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/3.Hooks/hooks/public/logo192.png -------------------------------------------------------------------------------- /3.Hooks/hooks/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/3.Hooks/hooks/public/logo512.png -------------------------------------------------------------------------------- /3.Hooks/hooks/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /3.Hooks/hooks/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | .light{ 32 | color: black; 33 | background-color: white; 34 | } 35 | 36 | .dark{ 37 | color:white; 38 | background-color: black; 39 | } 40 | 41 | @keyframes App-logo-spin { 42 | from { 43 | transform: rotate(0deg); 44 | } 45 | to { 46 | transform: rotate(360deg); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Us from './Components/Us'; 4 | import Ue1 from './Components/Ue1'; 5 | import Ue2 from './Components/Ue2'; 6 | import Infinite from './Components/Infinite'; 7 | import Ue3 from './Components/Ue3' 8 | import context from './Components/Context' 9 | import {useState} from 'react'; 10 | import Navbar from './Components/Navbar'; 11 | import Parent1 from './Components/Parent1'; 12 | import Parent2 from './Components/Parent2'; 13 | 14 | function App() { 15 | const [theme,setTheme] = useState(false); 16 | const [count,setCount] = useState(10); 17 | return ( 18 | 19 | 20 | 21 | {/* */} 22 | {/* */} 23 | {/* */} 24 | {/* */} 25 | {/* */} 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Child.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Child() { 4 | console.log("child called"); 5 | return ( 6 |
7 | Child component 8 |
9 | ) 10 | } 11 | 12 | export default React.memo(Child) 13 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | const context = React.createContext('hello'); 3 | export default context; -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Infinite.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | 3 | function Infinite() { 4 | const [count,setCount] = useState(0); 5 | 6 | useEffect(()=>{ 7 | console.log("useEffect"); 8 | document.title = `Button clicked ${count} times`; 9 | // setCount(100); 10 | // let num = Math.random()*100; 11 | // setCount(num) 12 | //Side effects wala work 13 | }) 14 | 15 | console.log('render') 16 | return ( 17 |
18 |

Current Count {count}

19 | 20 | 21 |
22 | ) 23 | } 24 | 25 | export default Infinite 26 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react' 2 | import context from './Context' 3 | 4 | function Navbar() { 5 | const {theme} = useContext(context); 6 | console.log("Navbar called"); 7 | return ( 8 |
9 | Navbar 10 |
11 | ) 12 | } 13 | 14 | export default Navbar 15 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Parent1.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react' 2 | import Child from './Child' 3 | import context from './Context' 4 | 5 | function Parent1() { 6 | const state = useContext(context) 7 | console.log(state) 8 | console.log("Parent1 called"); 9 | return ( 10 |
11 | Parent1 12 | 13 |
14 | ) 15 | } 16 | 17 | export default Parent1 18 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Parent2.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react' 2 | import context from './Context' 3 | 4 | function Parent2() { 5 | const {theme} = useContext(context) 6 | console.log("Parent2 called"); 7 | return ( 8 |
9 | Parent2 10 |
11 | ) 12 | } 13 | 14 | export default Parent2 15 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Ue1.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | 3 | function Ue1() { 4 | const [count,setCount] = useState(0); 5 | 6 | useEffect(()=>{ 7 | console.log("useEffect"); 8 | document.title = `Button clicked ${count} times`; 9 | //Side effects wala work 10 | }) 11 | 12 | console.log('render') 13 | return ( 14 |
15 |

Current Count {count}

16 | 17 | 18 |
19 | ) 20 | } 21 | 22 | export default Ue1 23 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Ue2.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | 3 | function Ue2() { 4 | const [count,setCount] = useState(0); 5 | 6 | useEffect(()=>{ 7 | console.log("useEffect"); 8 | document.title = `Button clicked ${count} times`; 9 | //Side effects wala work 10 | },[]) 11 | 12 | console.log('render') 13 | return ( 14 |
15 |

Current Count {count}

16 | 17 | 18 |
19 | ) 20 | } 21 | 22 | export default Ue2 23 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Ue3.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | 3 | function Ue3() { 4 | const [count,setCount] = useState(0); 5 | const [txt,setText] = useState({msg:''}) 6 | 7 | useEffect(()=>{ 8 | console.log("useEffect"); 9 | document.title = `Button clicked ${count} times`; 10 | //Side effects wala work 11 | },[count]) 12 | 13 | let changeText=(e)=>{ 14 | txt.msg=e.target.value; 15 | console.log(txt) 16 | setText({...txt}) 17 | } 18 | 19 | console.log('render') 20 | return ( 21 |
22 |

Current Count {count}

23 | 24 | changeText(e)}/> 25 |
26 | ) 27 | } 28 | 29 | export default Ue3 30 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/Components/Us.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | 3 | function Us() { 4 | const [count,setCount] = useState(0); 5 | const [obj,setObj] = useState({msg:'hello'}) 6 | return ( 7 |
8 |

Current Count {count}

9 | 10 |

{obj.msg}

11 | 12 |
13 | ) 14 | } 15 | 16 | export default Us 17 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /3.Hooks/hooks/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | -------------------------------------------------------------------------------- /3.Hooks/hooks/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 | -------------------------------------------------------------------------------- /ShoppingCart/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /ShoppingCart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.3", 7 | "@material-ui/icons": "^4.11.2", 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.5.0", 10 | "@testing-library/user-event": "^7.2.1", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-redux": "^7.2.1", 14 | "react-router-dom": "^5.2.0", 15 | "react-scripts": "3.4.3", 16 | "redux": "^4.0.5", 17 | "redux-devtools-extension": "^2.13.8" 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": "react-app" 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 | -------------------------------------------------------------------------------- /ShoppingCart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/public/favicon.ico -------------------------------------------------------------------------------- /ShoppingCart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /ShoppingCart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/public/logo192.png -------------------------------------------------------------------------------- /ShoppingCart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/public/logo512.png -------------------------------------------------------------------------------- /ShoppingCart/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 | -------------------------------------------------------------------------------- /ShoppingCart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /ShoppingCart/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | width: 100%; 3 | } 4 | 5 | a { 6 | text-decoration: none; 7 | } 8 | -------------------------------------------------------------------------------- /ShoppingCart/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Switch, 5 | Route, 6 | Redirect, 7 | } from "react-router-dom"; 8 | import "./App.css"; 9 | 10 | import { connect } from "react-redux"; 11 | 12 | import Navbar from "./components/Navbar/Navbar"; 13 | import Products from "./components/Products/Products"; 14 | import Cart from "./components/Cart/Cart"; 15 | import SingleItem from "./components/SingleItem/SingleItem"; 16 | 17 | function App({ current }) { 18 | return ( 19 | 20 |
21 | 22 | 23 | 24 | 25 | {!current ? 26 | 27 | : 28 | 29 | } 30 | {/* */} 31 | 32 |
33 | 34 | ); 35 | } 36 | 37 | const mapStateToProps = (state) => { 38 | return{ 39 | current : state.currentItem 40 | } 41 | } 42 | 43 | export default connect(mapStateToProps)(App) -------------------------------------------------------------------------------- /ShoppingCart/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | .container-div 2 | { 3 | min-height: 91vh; 4 | background-color: #dfe6e9; 5 | width: 100%; 6 | display: flex; 7 | flex-wrap: wrap; 8 | } 9 | .items 10 | { 11 | flex-grow: 0; 12 | flex-basis: 70%; 13 | margin-top: 5%; 14 | margin-left: 2%; 15 | margin-right: 2%; 16 | background-color: white; 17 | height: fit-content; 18 | 19 | } 20 | .details-c 21 | { 22 | flex-grow: 0; 23 | flex-basis: 25%; 24 | 25 | } 26 | .details{ 27 | background-color: white; 28 | margin-top: 20%; 29 | border-radius: 5%; 30 | } 31 | .checkout 32 | { 33 | display: flex; 34 | justify-content: center; 35 | padding-bottom: 8%; 36 | } 37 | .coupon 38 | { 39 | display: flex; 40 | justify-content: center; 41 | margin-bottom: 8%; 42 | margin-left: 2%; 43 | margin-right: 2%; 44 | } 45 | 46 | .smsg 47 | { 48 | text-align: center; 49 | margin-bottom: 6%; 50 | color: #2ecc71; 51 | } 52 | .fmsg 53 | { 54 | text-align: center; 55 | margin-bottom: 6%; 56 | color: #c0392b; 57 | } 58 | 59 | .revert 60 | { 61 | display: flex; 62 | justify-content: center; 63 | margin-bottom: 7%; 64 | margin-top: 5%; 65 | } 66 | 67 | @media only screen and (max-width: 700px) { 68 | .container-div 69 | { 70 | display: block; 71 | } 72 | .details{ 73 | margin-top: 2%; 74 | width: 65%; 75 | margin-left: 19%; 76 | } 77 | } 78 | @media only screen and (max-width: 500px) { 79 | .itemContainer 80 | { 81 | display: block !important; 82 | } 83 | .imgc 84 | { 85 | display: flex; 86 | justify-content: center; 87 | } 88 | .imgc img 89 | { 90 | width: 60%; 91 | } 92 | .pc 93 | { 94 | margin-bottom: 5%; 95 | } 96 | } -------------------------------------------------------------------------------- /ShoppingCart/src/components/Cart/CartItem/CartItem.css: -------------------------------------------------------------------------------- 1 | .itemContainer 2 | { 3 | display: flex; 4 | flex-wrap: wrap; 5 | 6 | } 7 | .imgc 8 | { 9 | flex-grow: 0; 10 | flex-basis: 30%; 11 | } 12 | .imgc img{ 13 | max-width: 100%; 14 | height: 45vh; 15 | width: 100%; 16 | margin-top: 2%; 17 | } 18 | .desc 19 | { 20 | flex-grow: 0; 21 | flex-basis: 66%; 22 | margin-left: 2%; 23 | margin-right: 1%; 24 | margin-top: 2%; 25 | } 26 | .itemName{ 27 | color: #0984e3; 28 | margin-bottom: 3%; 29 | margin-top: 1%; 30 | } 31 | .itemQuantity 32 | { 33 | display: inline-block; 34 | margin-bottom: 3%; 35 | } 36 | .itemQuantity input 37 | { 38 | width: 20%; 39 | margin-left: 5%; 40 | } 41 | .pc 42 | { 43 | display: flex; 44 | margin-top: 3%; 45 | margin-bottom: 2%; 46 | } -------------------------------------------------------------------------------- /ShoppingCart/src/components/Cart/CartItem/CartItem.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import { connect } from "react-redux"; 3 | // import { 4 | // adjustItemQty, 5 | // removeFromCart, 6 | // } from "../../../redux/Shopping/shopping-actions"; 7 | import './CartItem.css'; 8 | import DeleteIcon from '@material-ui/icons/Delete'; 9 | import Button from '@material-ui/core/Button'; 10 | import * as actionTypes from '../../../redux/actions' 11 | 12 | function CartItem1({ item, adjustQty, removeFromCart }) { 13 | const [input, setInput] = useState(item.qty); 14 | 15 | const onChangeHandler = (e) => { 16 | if(e.target.value>0) 17 | { 18 | setInput(e.target.value); 19 | adjustQty(item.id, e.target.value); 20 | } 21 | 22 | }; 23 | return ( 24 | <> 25 |
26 |
27 |
28 | {item.title}/ 29 |
30 |
31 |
32 |

{item.title}

33 |
34 |
35 | 36 | 44 |
45 |
46 |

{item.description}

47 |
48 |
49 | 54 |

₹ {item.price}

55 |
56 |
57 |
58 | 59 | ) 60 | } 61 | 62 | const mapDispatchToProps = (dispatch) => { 63 | return{ 64 | removeFromCart : (id) => dispatch({type:actionTypes.REMOVE_FROM_CART,payload:{id:id}}), 65 | adjustQty : (id,qty) => dispatch({type:actionTypes.UPDATE_QTY,payload:{id:id,qty:qty}}) 66 | } 67 | } 68 | 69 | export default connect(null,mapDispatchToProps)(CartItem1); -------------------------------------------------------------------------------- /ShoppingCart/src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .cartNumber{ 2 | position: absolute; 3 | left: 74%; 4 | top: -15%; 5 | font-size: smaller; 6 | } -------------------------------------------------------------------------------- /ShoppingCart/src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { makeStyles } from '@material-ui/core/styles'; 4 | import AppBar from '@material-ui/core/AppBar'; 5 | import Toolbar from '@material-ui/core/Toolbar'; 6 | import Typography from '@material-ui/core/Typography'; 7 | import Button from '@material-ui/core/Button'; 8 | import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; 9 | import { connect } from "react-redux"; 10 | import "./Navbar.css"; 11 | const useStyles = makeStyles((theme) => ({ 12 | root: { 13 | flexGrow: 1, 14 | }, 15 | title: { 16 | flexGrow: 1, 17 | }, 18 | tool:{ 19 | position:"relative" 20 | } 21 | })); 22 | function Navbar2({cart=[]}) { 23 | const classes = useStyles(); 24 | const [cartCount, setCartCount] = useState(0); 25 | 26 | useEffect(() => { 27 | let count = 0; 28 | cart.forEach((item) => { 29 | count += item.qty; 30 | }); 31 | 32 | setCartCount(count); 33 | }, [cart, cartCount]); 34 | 35 | return ( 36 |
37 | 38 | 39 | 40 | 41 | 42 | Redux Shopping 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | ) 52 | } 53 | 54 | const mapStateToProps = (state) => { 55 | return{ 56 | cart : state.cart 57 | } 58 | } 59 | 60 | export default connect(mapStateToProps)(Navbar2); 61 | -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/Product/Product.css: -------------------------------------------------------------------------------- 1 | .MuiCardActions-root 2 | { 3 | justify-content: center !important; 4 | } -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/Product/Products.js: -------------------------------------------------------------------------------- 1 | // import React from "react"; 2 | // import styles from "./Products.module.css"; 3 | // import { connect } from "react-redux"; 4 | // import Product from "./Product/Product"; 5 | 6 | // const Products = ({ products }) => { 7 | // return ( 8 | //
9 | // {products.map((product) => ( 10 | // 11 | // ))} 12 | //
13 | // ); 14 | // }; 15 | 16 | // const mapStateToProps = (state) => { 17 | // return { 18 | // products: state.shop.products, 19 | // }; 20 | // }; 21 | 22 | // export default connect(mapStateToProps)(Products); -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/Products.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Products.module.css"; 3 | import { connect } from "react-redux"; 4 | import Product from "./Product/Product"; 5 | import smartphone from './smartphone.jpg' 6 | import book from './book.jpg' 7 | import speaker from './speaker.jpg' 8 | 9 | const Products = ({products}) => { 10 | return ( 11 |
12 | {products.map((product) => ( 13 | 14 | ))} 15 |
16 | ); 17 | }; 18 | 19 | const mapStateToProps = (state) => { 20 | return{ 21 | products : state.products 22 | } 23 | } 24 | 25 | export default connect(mapStateToProps)(Products) -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/Products.module.css: -------------------------------------------------------------------------------- 1 | .products { 2 | /* width: 100%; 3 | margin-top: 2rem; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; */ 7 | display: flex; 8 | flex-wrap: wrap; 9 | margin-top: 5%; 10 | margin-left: 5%; 11 | margin-right: 5%; 12 | justify-content: space-between; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/components/Products/book.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/smartphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/components/Products/smartphone.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/components/Products/speaker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/components/Products/speaker.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/components/SingleItem/SingleItem.css: -------------------------------------------------------------------------------- 1 | .s-container 2 | { 3 | display: flex; 4 | flex-wrap: wrap; 5 | margin-left: 5%; 6 | margin-right: 5%; 7 | margin-top: 5%; 8 | } 9 | .img-container 10 | { 11 | flex-grow: 1; 12 | flex-basis: 0; 13 | max-width: 100%; 14 | 15 | } 16 | .img-container img{ 17 | height: 70vh; 18 | width: 70%; 19 | } 20 | .detailss 21 | { 22 | flex-grow: 1; 23 | flex-basis: 0; 24 | } 25 | .p-name 26 | { 27 | margin-bottom: 5%; 28 | } 29 | .description 30 | { 31 | line-height: 180%; 32 | } -------------------------------------------------------------------------------- /ShoppingCart/src/components/SingleItem/SingleItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./SingleItem.css"; 3 | import Button from '@material-ui/core/Button'; 4 | import { connect } from "react-redux"; 5 | // import { addToCart } from "../../redux/Shopping/shopping-actions"; 6 | import ShoppingCartOutlinedIcon from '@material-ui/icons/ShoppingCartOutlined'; 7 | import * as actionTypes from '../../redux/actions' 8 | // const SingleItem = ({ current, addToCart }) => { 9 | const SingleItem = ({current,addToCart}) => { 10 | // console.log(props.location); 11 | // const current=props.location.state 12 | 13 | return ( 14 |
15 |
16 | {current.title} 21 |
22 |
23 |

{current.title}

24 |

M.R.P.  ₹ {current.price}

25 |

Description

26 |

{current.description}

27 | 28 | 29 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | const mapStateToProps = (state) => { 42 | return{ 43 | current : state.currentItem 44 | } 45 | } 46 | 47 | const mapDispatchToProps = (dispatch) => { 48 | return{ 49 | addToCart : (id) => dispatch({type:actionTypes.ADD_TO_CART,payload:{id:id}}) 50 | } 51 | } 52 | 53 | export default connect(mapStateToProps,mapDispatchToProps)(SingleItem); -------------------------------------------------------------------------------- /ShoppingCart/src/constants/coupons.js: -------------------------------------------------------------------------------- 1 | export const coupons = { 2 | SAVE10:{ 3 | name:'SAVE10', 4 | discount:10 5 | }, 6 | SAVE20:{ 7 | name:'SAVE20', 8 | discount:20 9 | }, 10 | ABCD:{ 11 | name:'ABCD', 12 | discount:15 13 | } 14 | } -------------------------------------------------------------------------------- /ShoppingCart/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #622ae8; 3 | --secondary-color: #333333; 4 | --light-color: #eeeeee; 5 | --dark-color: #000000; 6 | } 7 | 8 | * { 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | font-family: Arial, Helvetica, sans-serif; 16 | } 17 | -------------------------------------------------------------------------------- /ShoppingCart/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 * as serviceWorker from "./serviceWorker"; 6 | import { Provider } from "react-redux"; 7 | import store from './redux/store' 8 | 9 | // Redux 10 | // import { Provider } from "react-redux"; 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.getElementById("root") 17 | ); 18 | 19 | // If you want your app to work offline and load faster, you can change 20 | // unregister() to register() below. Note this comes with some pitfalls. 21 | // Learn more about service workers: https://bit.ly/CRA-PWA 22 | serviceWorker.unregister(); 23 | -------------------------------------------------------------------------------- /ShoppingCart/src/redux/actions.js: -------------------------------------------------------------------------------- 1 | export const ADD_TO_CART = 'ADD_TO_CART'; 2 | export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'; 3 | export const LOAD_CURRENT_ITEM = 'LOAD_CURRENT_ITEM'; 4 | export const UPDATE_QTY = 'UPDATE_QTY' -------------------------------------------------------------------------------- /ShoppingCart/src/redux/book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/redux/book.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/redux/smartphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/redux/smartphone.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/redux/speaker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ShoppingCart/src/redux/speaker.jpg -------------------------------------------------------------------------------- /ShoppingCart/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import {createStore} from 'redux'; 2 | import shopReducer from './shopReducer'; 3 | import {composeWithDevTools} from 'redux-devtools-extension' 4 | 5 | const store = createStore(shopReducer,composeWithDevTools()); 6 | 7 | export default store; -------------------------------------------------------------------------------- /firebasedemo/.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 | -------------------------------------------------------------------------------- /firebasedemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firebasedemo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "firebase": "^9.0.2", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /firebasedemo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/firebasedemo/public/favicon.ico -------------------------------------------------------------------------------- /firebasedemo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /firebasedemo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/firebasedemo/public/logo192.png -------------------------------------------------------------------------------- /firebasedemo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/firebasedemo/public/logo512.png -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Fireauth from './Components/Fireauth'; 4 | import Firebase from './Components/Firebase'; 5 | import Firestorage from './Components/Firestorage'; 6 | 7 | function App() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/src/Components/Fireauth.js: -------------------------------------------------------------------------------- 1 | import React,{useEffect, useState} from 'react' 2 | import {auth} from '../firebase'; 3 | 4 | function Fireauth() { 5 | const [email,setEmail] = useState(''); 6 | const [password,setPassword] = useState(''); 7 | const [user,setUser] = useState('') 8 | 9 | let create = async()=> { 10 | // console.log(email); 11 | let res = await auth.createUserWithEmailAndPassword(email,password); 12 | console.log(res); 13 | } 14 | 15 | useEffect(()=>{ 16 | let unsub =auth.onAuthStateChanged((user)=> 17 | setUser(user)) 18 | return ()=>{ 19 | unsub(); //cleanUp 20 | } 21 | },[]) 22 | 23 | let logout = async() => { 24 | await auth.signOut(); 25 | } 26 | 27 | let signin = async() => { 28 | await auth.signInWithEmailAndPassword(email,password); 29 | 30 | } 31 | 32 | return ( 33 | <> 34 | { 35 | user==null? 36 |
37 | 38 | setEmail(e.target.value)}/> 39 | 40 | setPassword(e.target.value)}/> 41 | 42 |
: 43 | <> 44 |
{user.email}
45 | 46 | 47 | } 48 | 49 | ) 50 | } 51 | 52 | export default Fireauth 53 | -------------------------------------------------------------------------------- /firebasedemo/src/Components/Firebase.js: -------------------------------------------------------------------------------- 1 | import React,{useEffect, useState} from 'react' 2 | import { database } from '../firebase'; 3 | 4 | function Firebase() { 5 | const [name,setName] = useState(''); 6 | const [age,setAge] = useState(''); 7 | 8 | let createUserInDB = async() => { 9 | // let res = await database.users.add({name,age}) 10 | let res = await database.users.doc('11111111').set({name,age}) ///CREATE COMMAND 11 | console.log(res); 12 | } 13 | 14 | useEffect(async()=>{ 15 | let uid = 'MHNMzdyPvfI6SC18r1Sz'; 16 | // let data = await database.users.orderBy('createdAt','desc').get(); //onSnapShot //READ 17 | let data = await database.users.get(); 18 | // console.log(data.data()) 19 | data.forEach((obj)=>console.log(obj.data())) 20 | }) 21 | 22 | let update = async() => { 23 | 24 | let uid = 'MHNMzdyPvfI6SC18r1Sz'; 25 | await database.users.doc(uid).update({ //UPDATE COMMAND 26 | name,age 27 | }) 28 | } 29 | 30 | let deletee = async() => { 31 | let uid = '11111111'; 32 | await database.users.doc(uid).delete() 33 | } 34 | 35 | return ( 36 | <> 37 |
38 | 39 | setName(e.target.value)} /> 40 | 41 | setAge(e.target.value)}/> 42 | 43 | 44 |
45 | 46 | ) 47 | } 48 | 49 | export default Firebase 50 | -------------------------------------------------------------------------------- /firebasedemo/src/Components/Firestorage.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import {storage} from '../firebase'; 3 | 4 | function Firestorage() { 5 | const [file,setFile] = useState(''); 6 | const upload = () => { 7 | console.log(file) 8 | const uploadTask = storage.ref(`/data/${file.name}`).put(file); 9 | uploadTask.on('state_changed',fn1,fn2,fn3); 10 | function fn1(snapshot){ 11 | let progress = (snapshot.bytesTransferred / snapshot.totalBytes)*100; 12 | console.log(`Upload is ${progress} done.`) 13 | } 14 | function fn2(error){ 15 | console.log('error',error) 16 | } 17 | function fn3(){ 18 | uploadTask.snapshot.ref.getDownloadURL().then((url)=>{ 19 | console.log(url); 20 | }) 21 | } 22 | } 23 | return ( 24 |
25 | 26 | setFile(e.target.files[0])}/> 27 | 28 |
29 | ) 30 | } 31 | 32 | export default Firestorage 33 | -------------------------------------------------------------------------------- /firebasedemo/src/firebase.js: -------------------------------------------------------------------------------- 1 | // import { initializeApp } from "firebase/app"; 2 | import firebase from 'firebase/compat/app'; 3 | import 'firebase/compat/auth'; 4 | import 'firebase/compat/storage'; 5 | import 'firebase/compat/firestore'; 6 | 7 | // TODO: Add SDKs for Firebase products that you want to use 8 | // https://firebase.google.com/docs/web/setup#available-libraries 9 | 10 | // Your web app's Firebase configuration 11 | const firebaseConfig = { 12 | apiKey: "AIzaSyDJlyoCX63q1ZobmP_bvXQYSYQurCXye2A", 13 | authDomain: "yt-demo-e028c.firebaseapp.com", 14 | projectId: "yt-demo-e028c", 15 | storageBucket: "yt-demo-e028c.appspot.com", 16 | messagingSenderId: "734593705283", 17 | appId: "1:734593705283:web:ebca58e9753ae27416bbf6" 18 | }; 19 | 20 | // Initialize Firebase 21 | firebase.initializeApp(firebaseConfig); 22 | 23 | export const auth = firebase.auth(); 24 | 25 | const firestore = firebase.firestore(); 26 | export const database = { 27 | users : firestore.collection('users') 28 | } 29 | 30 | export const storage = firebase.storage() -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /firebasedemo/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 | -------------------------------------------------------------------------------- /ip/.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 | -------------------------------------------------------------------------------- /ip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ip", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "prop-types": "^15.7.2", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /ip/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ip/public/favicon.ico -------------------------------------------------------------------------------- /ip/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /ip/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ip/public/logo192.png -------------------------------------------------------------------------------- /ip/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ip/public/logo512.png -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Parent from './Parent'; 3 | 4 | 5 | function App() { 6 | return ( 7 |
8 |

Hooks

9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/src/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import HOC from './HOC' 3 | 4 | function Button(props) { 5 | return ( 6 |
7 | Hello... 8 |
9 | ) 10 | } 11 | 12 | export default HOC(Button); 13 | -------------------------------------------------------------------------------- /ip/src/Child.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Child(props) { 4 | console.log("child render") 5 | return ( 6 |
7 | {props.count} 8 |
9 | ) 10 | } 11 | 12 | export default React.memo(Child) 13 | -------------------------------------------------------------------------------- /ip/src/Counter.js: -------------------------------------------------------------------------------- 1 | import React, { useState,useReducer } from 'react' 2 | 3 | const initialState = { 4 | count:0 5 | } 6 | 7 | const reducer = (state,action) => { 8 | switch(action.type){ 9 | case 'Inc' : 10 | return {count:state.count+1} 11 | case 'Dec' : 12 | return {count:state.count-1} 13 | } 14 | } 15 | 16 | function Counter() { 17 | // const [count,setCount] = useState(0) 18 | const [state,dispatch] = useReducer(reducer,initialState) 19 | return ( 20 |
21 | {state.count} 22 | 23 | 24 |
25 | ) 26 | } 27 | 28 | export default Counter 29 | -------------------------------------------------------------------------------- /ip/src/HOC.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const styles = { 4 | dark : { 5 | background : 'black', 6 | color:'white' 7 | } 8 | } 9 | 10 | function HOC(WrappedComp) { 11 | return function(args){ 12 | let temp = {} 13 | if(args.dark){ 14 | temp = {...styles.dark} 15 | } 16 | let obj = {...args,style:temp} 17 | return 18 | } 19 | } 20 | 21 | export default HOC 22 | -------------------------------------------------------------------------------- /ip/src/Parent.js: -------------------------------------------------------------------------------- 1 | import React, { useState,useMemo,useCallback } from 'react' 2 | import Child from './Child'; 3 | 4 | function Parent() { 5 | const [count,setCount] = useState(0); 6 | const [text,setText] = useState('Hello'); 7 | const person = { 8 | name : "Udai", 9 | city : "delhi" 10 | } 11 | const memoizedObj = useMemo(()=>person,[]) 12 | function fn(){ 13 | console.log("hhi"); 14 | } 15 | const memoizedfn = useCallback(()=>fn,[]) 16 | 17 | console.log("parent render") 18 | return ( 19 |
20 | 21 | 22 | 23 |
24 | ) 25 | } 26 | 27 | export default Parent 28 | -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/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 | -------------------------------------------------------------------------------- /ip/src/temp.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Route } from 'react-router-dom'; 3 | const Home = () => { 4 | return (
Home
) 5 | } 6 | const Dashboard = () => { 7 | return (
Dashboard
) 8 | } 9 | const Profile = () => { 10 | return (
Profile
) 11 | } 12 | export default App = () => { 13 | return ( 14 | 15 | 16 | 17 | 18 | ) 19 | } -------------------------------------------------------------------------------- /key/.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 | -------------------------------------------------------------------------------- /key/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "key", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /key/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/key/public/favicon.ico -------------------------------------------------------------------------------- /key/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /key/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/key/public/logo192.png -------------------------------------------------------------------------------- /key/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/key/public/logo512.png -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

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

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /key/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 | -------------------------------------------------------------------------------- /reduxdemo/.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 | -------------------------------------------------------------------------------- /reduxdemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reduxdemo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.4", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-redux": "^7.2.5", 13 | "react-scripts": "4.0.3", 14 | "redux": "^4.1.1", 15 | "redux-devtools-extension": "^2.13.9", 16 | "redux-thunk": "^2.3.0", 17 | "web-vitals": "^1.1.2" 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 | -------------------------------------------------------------------------------- /reduxdemo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reduxdemo/public/favicon.ico -------------------------------------------------------------------------------- /reduxdemo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /reduxdemo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reduxdemo/public/logo192.png -------------------------------------------------------------------------------- /reduxdemo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reduxdemo/public/logo512.png -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reduxdemo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reduxdemo/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Bat from './Components/Bat' 4 | import {Provider} from 'react-redux'; 5 | import store from './redux/store'; 6 | import Ball from './Components/Ball'; 7 | import User from './Components/User' 8 | 9 | function App() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reduxdemo/src/Components/Ball.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import { connect } from 'react-redux' 3 | import { buyBall } from '../redux/ballActions' 4 | 5 | function Ball({balls,buyBall,sellBall}) { 6 | const [qty,setQty]= useState(1) 7 | console.log("Ball rerendered") 8 | return ( 9 |
10 |

Balls : {balls}

11 | setQty(e.target.value)}/> 12 | 13 | 14 |
15 | ) 16 | } 17 | 18 | const mapStateToProps= (state) =>{ 19 | return{ 20 | balls : state.ball.balls 21 | } 22 | } 23 | 24 | const mapDispatchToProps = (dispatch) => { 25 | return{ 26 | buyBall : (qty)=> dispatch(buyBall(qty)), 27 | sellBall : ()=>dispatch({type:'SELL_BALL'}) 28 | } 29 | } 30 | 31 | export default connect(mapStateToProps,mapDispatchToProps)(Ball) 32 | -------------------------------------------------------------------------------- /reduxdemo/src/Components/Bat.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import { connect,useSelector,useDispatch } from 'react-redux' 3 | 4 | function Bat(props) { 5 | // const [bat,setBat] = useState(20) //local to the component 6 | // console.log(props.bats) 7 | const bats = useSelector(state=>state.bat.bats) 8 | const dispatch = useDispatch(); 9 | console.log("bat rerendered") 10 | return ( 11 |
12 |

Bats : {bats}

13 | {/* */} 14 | 15 |
16 | ) 17 | } 18 | 19 | // const mapStateToProps = (state) => { // 20 | // return{ 21 | // batss : state.bat.bats 22 | // } 23 | // } 24 | 25 | // const mapDispatchToProps = (dispatch) => { 26 | // return{ 27 | // buyBat : ()=>dispatch({type:"BUY_BAT"}) 28 | // } 29 | // } 30 | 31 | export default (Bat) -------------------------------------------------------------------------------- /reduxdemo/src/Components/User.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | import axios from 'axios'; 3 | import { fetchUserss } from '../redux/userActions'; 4 | import { connect } from 'react-redux'; 5 | 6 | function User({userData,fetchUsers}) { 7 | // const [loading,setLoading] = useState(true); 8 | // const [error,setError] = useState('') 9 | // const [users,setUsers] = useState([]) 10 | console.log("User rerendered") 11 | useEffect(()=>{ 12 | fetchUsers(); 13 | },[]) 14 | 15 | return ( 16 | <> 17 | { 18 | userData.loading?

Loading....

:userData.error!=''?

{userData.error}

: 19 |
    20 | { 21 | userData.users.length>0 && userData.users.map((user)=>( 22 |
  • {user.name}
    • 23 | )) 24 | } 25 |
26 | } 27 | 28 | ) 29 | } 30 | 31 | const mapStateToProps = (state) => { 32 | return{ 33 | userData : state.user 34 | } 35 | } 36 | 37 | const mapDispatchToProps = (dispatch) => { 38 | return{ 39 | fetchUsers : ()=>dispatch(fetchUserss()) 40 | } 41 | } 42 | 43 | export default connect(mapStateToProps,mapDispatchToProps)(User) 44 | -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reduxdemo/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 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /reduxdemo/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reduxdemo/src/redux/action.js: -------------------------------------------------------------------------------- 1 | export const FETCH_REQ = 'FETCH_REQ'; 2 | export const FETCH_SUC = 'FETCH_SUC'; 3 | export const FETCH_FAIL = 'FETCH_FAIL'; -------------------------------------------------------------------------------- /reduxdemo/src/redux/ballActions.js: -------------------------------------------------------------------------------- 1 | export const buyBall = (qty) => { 2 | // 3 | 4 | return { 5 | type : "BUY_BALL", 6 | payload:qty 7 | } 8 | } -------------------------------------------------------------------------------- /reduxdemo/src/redux/ballReducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | balls:50 3 | } 4 | 5 | const BallReducer = (state=initialState,action) => { 6 | switch(action.type){ 7 | case 'BUY_BALL' : 8 | return {...state,balls:state.balls-action.payload} 9 | case 'SELL_BALL' : 10 | return {...state,balls:state.balls+1} 11 | default : 12 | return state; 13 | } 14 | } 15 | 16 | export default BallReducer -------------------------------------------------------------------------------- /reduxdemo/src/redux/batReducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | bats:50 3 | } 4 | 5 | const BatReducer = (state=initialState,action) => { 6 | switch(action.type){ 7 | case 'BUY_BAT' : 8 | return {...state,bats:state.bats-1} 9 | default : 10 | return state; 11 | } 12 | } 13 | 14 | export default BatReducer -------------------------------------------------------------------------------- /reduxdemo/src/redux/rootReducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | import BatReducer from "./batReducer"; 3 | import BallReducer from "./ballReducer"; 4 | import userReducer from "./userReducer"; 5 | 6 | const rootReducer = combineReducers({ 7 | bat : BatReducer, 8 | ball : BallReducer, 9 | user : userReducer 10 | }) 11 | 12 | export default rootReducer; -------------------------------------------------------------------------------- /reduxdemo/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import {createStore,applyMiddleware} from 'redux'; 2 | import BatReducer from './batReducer'; 3 | import {composeWithDevTools} from 'redux-devtools-extension'; 4 | import rootReducer from './rootReducer'; 5 | import thunk from 'redux-thunk' 6 | 7 | const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk))); 8 | 9 | export default store -------------------------------------------------------------------------------- /reduxdemo/src/redux/userActions.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import * as actionTypes from './action' 3 | 4 | const fetchReq=()=>{ 5 | return { 6 | type:actionTypes.FETCH_REQ 7 | } 8 | } 9 | 10 | const fetchSuc = (users) => { 11 | return{ 12 | type:actionTypes.FETCH_SUC, 13 | payload:users 14 | } 15 | } 16 | 17 | const fetchFail = (err) => { 18 | return{ 19 | type:actionTypes.FETCH_FAIL, 20 | payload:err.message 21 | } 22 | } 23 | 24 | export const fetchUserss = () => { 25 | //thunk middleware 26 | return async(dispatch)=>{ 27 | dispatch(fetchReq()) 28 | try{ 29 | let res = await axios.get('https://jsonplaceholder.typicode.com/users'); 30 | let data = res.data 31 | dispatch(fetchSuc(data)) 32 | } 33 | catch(err){ 34 | dispatch(fetchFail(err)) 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /reduxdemo/src/redux/userReducer.js: -------------------------------------------------------------------------------- 1 | import * as actionTypes from './action' 2 | 3 | const initialState = { 4 | loading : false, 5 | error : '', 6 | users : [] 7 | } 8 | 9 | const userReducer = (state=initialState,action) => { 10 | switch(action.type){ 11 | case actionTypes.FETCH_REQ : 12 | return {...state,loading:true} 13 | case actionTypes.FETCH_SUC : 14 | return {...state,loading:false,users:[...action.payload]} 15 | case actionTypes.FETCH_FAIL : 16 | return {...state,loading:false,error:action.payload} 17 | default : return state 18 | } 19 | } 20 | 21 | export default userReducer; -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reduxdemo/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 | -------------------------------------------------------------------------------- /reels/.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "reels-839c5" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /reels/.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 | -------------------------------------------------------------------------------- /reels/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /reels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reels", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.4.1", 7 | "@emotion/styled": "^11.3.0", 8 | "@material-ui/core": "^4.12.3", 9 | "@material-ui/icons": "^4.11.2", 10 | "@mui/icons-material": "^5.0.1", 11 | "@mui/material": "^5.0.0", 12 | "@mui/styles": "^5.0.0", 13 | "@testing-library/jest-dom": "^5.14.1", 14 | "@testing-library/react": "^11.2.7", 15 | "@testing-library/user-event": "^12.8.3", 16 | "firebase": "^9.0.2", 17 | "pure-react-carousel": "^1.27.6", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-responsive-carousel": "^3.2.21", 21 | "react-router-dom": "^5.3.0", 22 | "react-scripts": "4.0.3", 23 | "uuid": "^8.3.2", 24 | "web-vitals": "^1.1.2" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /reels/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/public/favicon.ico -------------------------------------------------------------------------------- /reels/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /reels/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/public/logo192.png -------------------------------------------------------------------------------- /reels/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/public/logo512.png -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Signup from './Components/Signup' 4 | import Login from './Components/Login'; 5 | import Feed from './Components/Feed'; 6 | import {BrowserRouter,Switch,Route} from 'react-router-dom' 7 | import {AuthProvider} from './Context/AuthContext'; 8 | import PrivateRoute from './Components/PrivateRoute'; 9 | import Profile from './Components/Profile'; 10 | import Ioa from './Components/Ioa' 11 | 12 | function App() { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/src/Assets/Instagram.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/Instagram.JPG -------------------------------------------------------------------------------- /reels/src/Assets/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/bg.jpg -------------------------------------------------------------------------------- /reels/src/Assets/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/img1.jpg -------------------------------------------------------------------------------- /reels/src/Assets/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/img2.jpg -------------------------------------------------------------------------------- /reels/src/Assets/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/img3.jpg -------------------------------------------------------------------------------- /reels/src/Assets/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/img4.jpg -------------------------------------------------------------------------------- /reels/src/Assets/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/img5.jpg -------------------------------------------------------------------------------- /reels/src/Assets/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/Assets/insta.png -------------------------------------------------------------------------------- /reels/src/Components/AddComment.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import TextField from '@mui/material/TextField'; 3 | import Button from '@mui/material/Button'; 4 | import { database } from '../firebase'; 5 | 6 | function AddComment({userData,postData}) { 7 | const [text,setText] = useState('') 8 | const handleClick = () => { 9 | let obj = { 10 | text:text, 11 | uProfileImage:userData.profileUrl, 12 | uName : userData.fullname 13 | } 14 | database.comments.add(obj).then((doc)=>{ 15 | database.posts.doc(postData.postId).update({ 16 | comments:[...postData.comments,doc.id] 17 | }) 18 | }) 19 | setText('') 20 | } 21 | return ( 22 |
23 | setText(e.target.value)}/> 24 | 25 |
26 | ) 27 | } 28 | 29 | export default AddComment 30 | -------------------------------------------------------------------------------- /reels/src/Components/Comments.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | import CircularProgress from '@mui/material/CircularProgress'; 3 | import Avatar from '@mui/material/Avatar'; 4 | import {database} from '../firebase' 5 | 6 | function Comments({postData}) { 7 | const [comments,setComments] = useState(null) 8 | useEffect(async()=>{ 9 | let arr = [] 10 | for(let i=0;i 18 | { 19 | comments==null? : 20 | <> 21 | { 22 | comments.map((comment,index)=>( 23 |
24 | 25 |

  {comment.uName}   {comment.text}

26 |
27 | )) 28 | } 29 | 30 | } 31 | 32 | ) 33 | } 34 | 35 | export default Comments 36 | -------------------------------------------------------------------------------- /reels/src/Components/Feed.js: -------------------------------------------------------------------------------- 1 | import React,{useContext,useEffect,useState} from 'react' 2 | import { AuthContext } from '../Context/AuthContext' 3 | import { database } from '../firebase' 4 | import UploadFile from './UploadFile' 5 | import Posts from './Posts' 6 | import Navbar from './Navbar'; 7 | function Feed() { 8 | const {user,logout} = useContext(AuthContext) 9 | const [userData,setUserData] = useState('') 10 | useEffect(()=>{ 11 | const unsub = database.users.doc(user.uid).onSnapshot((snapshot)=>{ 12 | setUserData(snapshot.data()) 13 | }) 14 | return ()=> {unsub()} 15 | },[user]) 16 | return ( 17 | <> 18 | 19 |
20 | {/*
21 |

Welcome to feed

22 | 23 |
*/} 24 | 25 | 26 |
27 | 28 | ) 29 | } 30 | 31 | export default Feed 32 | -------------------------------------------------------------------------------- /reels/src/Components/Ioa.js: -------------------------------------------------------------------------------- 1 | import React,{useEffect} from 'react' 2 | import vid1 from '../videos/vid1.mp4'; 3 | import vid2 from '../videos/vid2.mp4'; 4 | import vid3 from '../videos/vid3.mp4'; 5 | 6 | function Ioa() { 7 | const callback = (entries) => { 8 | entries.forEach((entry)=>{ 9 | let ele = entry.target.childNodes[0] 10 | console.log(ele) 11 | ele.play().then(()=>{ 12 | if(!ele.paused && !entry.isIntersecting){ 13 | ele.pause() 14 | } 15 | }) 16 | }) 17 | } 18 | let observer = new IntersectionObserver(callback, {threshold:0.6}); 19 | useEffect(()=>{ 20 | const elements = document.querySelectorAll(".videos") 21 | elements.forEach((element)=>{ 22 | observer.observe(element) 23 | }) 24 | },[]) 25 | return ( 26 |
27 |
28 |
30 |
31 |
33 |
34 |
36 |
37 | ) 38 | } 39 | 40 | export default Ioa 41 | -------------------------------------------------------------------------------- /reels/src/Components/Like.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react'; 2 | import FavoriteIcon from '@mui/icons-material/Favorite'; 3 | import { database } from '../firebase'; 4 | 5 | function Like({userData,postData}) { 6 | const [like,setLike] = useState(null); 7 | useEffect(()=>{ 8 | let check = postData.likes.includes(userData.userId)?true:false 9 | setLike(check) 10 | },[postData]) 11 | const handleLike = () => { 12 | if(like==true){ 13 | let narr = postData.likes.filter((el)=>el!=userData.userId) 14 | database.posts.doc(postData.postId).update({ 15 | likes:narr 16 | }) 17 | }else{ 18 | let narr = [...postData.likes,userData.userId] 19 | database.posts.doc(postData.postId).update({ 20 | likes:narr 21 | }) 22 | } 23 | } 24 | return ( 25 |
26 | { 27 | like!=null? 28 | <> 29 | { 30 | like==true? : 31 | } 32 | : 33 | <> 34 | } 35 |
36 | ) 37 | } 38 | 39 | export default Like 40 | -------------------------------------------------------------------------------- /reels/src/Components/Like2.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react'; 2 | import FavoriteIcon from '@mui/icons-material/Favorite'; 3 | import { database } from '../firebase'; 4 | 5 | function Like({userData,postData}) { 6 | const [like,setLike] = useState(null); 7 | useEffect(()=>{ 8 | let check = postData.likes.includes(userData.userId)?true:false 9 | setLike(check) 10 | },[postData]) 11 | const handleLike = () => { 12 | if(like==true){ 13 | let narr = postData.likes.filter((el)=>el!=userData.userId) 14 | database.posts.doc(postData.postId).update({ 15 | likes:narr 16 | }) 17 | }else{ 18 | let narr = [...postData.likes,userData.userId] 19 | database.posts.doc(postData.postId).update({ 20 | likes:narr 21 | }) 22 | } 23 | } 24 | return ( 25 |
26 | { 27 | like!=null? 28 | <> 29 | { 30 | like==true? : 31 | } 32 | : 33 | <> 34 | } 35 |
36 | ) 37 | } 38 | 39 | export default Like 40 | -------------------------------------------------------------------------------- /reels/src/Components/Login.css: -------------------------------------------------------------------------------- 1 | .loginWrapper{ 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | .loginCard{ 7 | width: 27vw; 8 | margin-top: 10%; 9 | } 10 | 11 | .insta-logo{ 12 | width: 100%; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | margin-top: 3%; 17 | } 18 | 19 | .insta-logo img{ 20 | width: 15vw; 21 | } 22 | 23 | .imgcar{ 24 | margin-top: 8vh; 25 | height: 590px; 26 | width: 441px; 27 | position: relative; 28 | } 29 | 30 | .car{ 31 | height: 423px; 32 | width: 241px; 33 | position: absolute; 34 | left: 143px; 35 | top: 93px; 36 | } -------------------------------------------------------------------------------- /reels/src/Components/Posts.css: -------------------------------------------------------------------------------- 1 | .video-container{ 2 | height: 80vh; 3 | border-radius: 20px; 4 | background-color: white; 5 | overflow: scroll; 6 | scroll-snap-type: y mandatory; 7 | scrollbar-width: none; 8 | } 9 | 10 | .video-container::-webkit-scrollbar { 11 | display: none; 12 | } 13 | 14 | .videos{ 15 | position: relative; 16 | } 17 | 18 | .fa{ 19 | position: absolute; 20 | bottom: 7%; 21 | left: 10%; 22 | } 23 | 24 | .fa h4{ 25 | margin: 0; 26 | color: white; 27 | margin-top: 8%; 28 | margin-left: 25%; 29 | } 30 | 31 | .icon-styling{ 32 | position: absolute; 33 | bottom: 2%; 34 | left: 12%; 35 | } 36 | 37 | .like{ 38 | cursor: pointer; 39 | color : #e74c3c 40 | } 41 | 42 | .unlike{ 43 | cursor: pointer; 44 | color: white; 45 | } 46 | 47 | .chat-styling{ 48 | color: white; 49 | position: absolute; 50 | bottom: 2%; 51 | left: 25%; 52 | } 53 | 54 | .modal-container{ 55 | display: flex; 56 | height: 100%; 57 | width: 100%; 58 | } 59 | 60 | .video-modal{ 61 | width: 50%; 62 | height: 100%; 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | } 67 | 68 | .video-modal video{ 69 | height: 85vh; 70 | } 71 | 72 | .comment-modal{ 73 | width: 50%; 74 | height: 100%; 75 | } 76 | 77 | .unlike2{ 78 | color: black; 79 | cursor: pointer; 80 | } 81 | 82 | .card1{ 83 | height: 70vh; 84 | } -------------------------------------------------------------------------------- /reels/src/Components/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | import { Redirect } from 'react-router'; 3 | import {Route} from 'react-router-dom'; 4 | import { AuthContext } from '../Context/AuthContext'; 5 | 6 | function PrivateRoute({component:Component,...rest}) { 7 | const {user} = useContext(AuthContext) 8 | return ( 9 | { 10 | return user? : 11 | }} /> 12 | ) 13 | } 14 | 15 | export default PrivateRoute 16 | -------------------------------------------------------------------------------- /reels/src/Components/Profile.css: -------------------------------------------------------------------------------- 1 | .spacer{ 2 | min-height: 12vh; 3 | } 4 | .container{ 5 | min-height: 88vh; 6 | margin-left: 18%; 7 | margin-right: 18%; 8 | } 9 | .upper-part{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .profile-img{ 16 | flex-basis: 50%; 17 | } 18 | 19 | .info{ 20 | flex-basis: 40%; 21 | } 22 | 23 | .profile-img img{ 24 | height: 8rem; 25 | width: 8rem; 26 | border-radius: 50%; 27 | margin-left: 10%; 28 | } 29 | 30 | .profile-videos{ 31 | display: flex; 32 | flex-wrap: wrap; 33 | } 34 | 35 | .profile-videos video{ 36 | height: 20rem; 37 | padding: 0.5rem; 38 | } -------------------------------------------------------------------------------- /reels/src/Components/Signup.css: -------------------------------------------------------------------------------- 1 | .signupWrapper{ 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | .signupCard{ 7 | width: 27vw; 8 | margin-top: 5%; 9 | } 10 | 11 | .insta-logo{ 12 | width: 100%; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | margin-top: 3%; 17 | } 18 | 19 | .insta-logo img{ 20 | width: 15vw; 21 | } 22 | 23 | @media only screen and (max-width:620px){ 24 | .signupCard{ 25 | width: 60%; 26 | } 27 | .insta-logo img{ 28 | width: 35%; 29 | } 30 | } -------------------------------------------------------------------------------- /reels/src/Components/Video.css: -------------------------------------------------------------------------------- 1 | .videos-styling{ 2 | width: 100%; 3 | height: 80vh; 4 | scroll-snap-align: start; 5 | } -------------------------------------------------------------------------------- /reels/src/Components/Video.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Video.css' 3 | import ReactDOM from 'react-dom' 4 | 5 | function Video(props) { 6 | const handleClick = (e) => { 7 | e.preventDefault(); 8 | e.target.muted = !e.target.muted 9 | } 10 | const handleScroll = (e) => { 11 | let next = ReactDOM.findDOMNode(e.target).parentNode.nextSibling 12 | if(next){ 13 | next.scrollIntoView() 14 | e.target.muted = true 15 | } 16 | } 17 | return ( 18 | 20 | ) 21 | } 22 | 23 | export default Video 24 | -------------------------------------------------------------------------------- /reels/src/Context/AuthContext.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect} from 'react' 2 | import { auth } from '../firebase'; 3 | 4 | export const AuthContext = React.createContext(); 5 | export function AuthProvider({children}){ 6 | const [user,setUser] = useState(); 7 | const [loading,setLoading] = useState(true) 8 | 9 | function signup(email,password){ 10 | return auth.createUserWithEmailAndPassword(email,password); 11 | } 12 | 13 | function login(email,password){ 14 | return auth.signInWithEmailAndPassword(email,password); 15 | } 16 | 17 | function logout(){ 18 | return auth.signOut() 19 | } 20 | 21 | useEffect(()=>{ 22 | const unsub = auth.onAuthStateChanged((user)=>{ 23 | setUser(user); 24 | setLoading(false); 25 | }) 26 | return ()=>{ 27 | unsub(); 28 | } 29 | },[]) 30 | 31 | const store={ 32 | user, 33 | signup, 34 | login, 35 | logout 36 | } 37 | 38 | return( 39 | 40 | {!loading && children} 41 | 42 | ) 43 | } -------------------------------------------------------------------------------- /reels/src/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase/compat/app'; 2 | import 'firebase/compat/auth'; 3 | import 'firebase/compat/storage'; 4 | import 'firebase/compat/firestore'; 5 | 6 | // TODO: Add SDKs for Firebase products that you want to use 7 | // https://firebase.google.com/docs/web/setup#available-libraries 8 | 9 | // Your web app's Firebase configuration 10 | const firebaseConfig = { 11 | apiKey: "AIzaSyCbyyW6nx_nMWXkcsp7DfL5cTZj5M1o8dk", 12 | authDomain: "reels-839c5.firebaseapp.com", 13 | projectId: "reels-839c5", 14 | storageBucket: "reels-839c5.appspot.com", 15 | messagingSenderId: "235859540876", 16 | appId: "1:235859540876:web:10b334434e243d32cc34a9" 17 | }; 18 | 19 | // Initialize Firebase 20 | firebase.initializeApp(firebaseConfig); 21 | 22 | export const auth = firebase.auth(); 23 | 24 | const firestore = firebase.firestore(); 25 | export const database = { 26 | users : firestore.collection('users'), 27 | posts : firestore.collection('posts'), 28 | comments : firestore.collection('comments'), 29 | getTimeStamp : firebase.firestore.FieldValue.serverTimestamp, 30 | } 31 | 32 | export const storage = firebase.storage() -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/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 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /reels/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/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 | -------------------------------------------------------------------------------- /reels/src/videos/vid1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/videos/vid1.mp4 -------------------------------------------------------------------------------- /reels/src/videos/vid2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/videos/vid2.mp4 -------------------------------------------------------------------------------- /reels/src/videos/vid3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/reels/src/videos/vid3.mp4 -------------------------------------------------------------------------------- /ui/.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 | -------------------------------------------------------------------------------- /ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "firebase": "^9.1.0", 10 | "firebase-tools": "^9.18.0", 11 | "html2canvas": "^1.0.0-rc.7", 12 | "immutability-helper": "^3.1.1", 13 | "jspdf": "^2.3.1", 14 | "node-sass": "^6.0.1", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-redux": "^7.2.5", 18 | "react-redux-firebase": "^3.10.0", 19 | "react-router-dom": "^5.2.0", 20 | "react-scripts": "4.0.3", 21 | "redux": "^4.1.1", 22 | "redux-devtools-extension": "^2.13.9", 23 | "redux-firestore": "^0.15.0", 24 | "redux-thunk": "^2.3.0", 25 | "uuid": "^8.3.2", 26 | "web-vitals": "^1.1.2" 27 | }, 28 | "scripts": { 29 | "start": "react-scripts start", 30 | "build": "react-scripts build", 31 | "test": "react-scripts test", 32 | "eject": "react-scripts eject" 33 | }, 34 | "eslintConfig": { 35 | "extends": [ 36 | "react-app", 37 | "react-app/jest" 38 | ] 39 | }, 40 | "browserslist": { 41 | "production": [ 42 | ">0.2%", 43 | "not dead", 44 | "not op_mini all" 45 | ], 46 | "development": [ 47 | "last 1 chrome version", 48 | "last 1 firefox version", 49 | "last 1 safari version" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/public/favicon.ico -------------------------------------------------------------------------------- /ui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ui/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/public/logo192.png -------------------------------------------------------------------------------- /ui/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/public/logo512.png -------------------------------------------------------------------------------- /ui/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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /ui/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /ui/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 | -------------------------------------------------------------------------------- /ui/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './static/scss/app.scss'; 4 | import 'react-router-dom'; 5 | import { Route,Switch } from 'react-router-dom'; 6 | import Header from './components/presentation/header'; 7 | import Footer from './components/presentation/footer'; 8 | import LandingPage from './components/presentation/landingPage'; 9 | import GettingStarted from './components/presentation/gettingStarted'; 10 | import Login from './components/presentation/login'; 11 | import Register from './components/presentation/register'; 12 | import AboutUs from './components/presentation/aboutUs'; 13 | import Contacts from './components/presentation/contact'; 14 | import Education from './components/presentation/education'; 15 | import Finalize from './components/presentation/finalizePage'; 16 | import PrivateRoute from './components/PrivateRoute'; 17 | 18 | function App() { 19 | return ( 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /ui/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 | -------------------------------------------------------------------------------- /ui/src/components/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Route,Redirect} from 'react-router-dom'; 3 | import{isLoaded,isEmpty} from 'react-redux-firebase' 4 | import { connect } from 'react-redux'; 5 | 6 | function PrivateRoute({auth,component:Component,...remainingprops}) { 7 | 8 | return ( 9 | ( 10 | isLoaded(auth) && !isEmpty(auth) ? 11 | : 12 | )} /> 13 | ) 14 | } 15 | 16 | const mapStateToProps = (state) => { 17 | return { 18 | auth : state.firebase.auth 19 | } 20 | } 21 | 22 | export default connect(mapStateToProps)(PrivateRoute) 23 | -------------------------------------------------------------------------------- /ui/src/components/presentation/aboutUs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import aboutUs from "../../static/images/aboutus.jpg"; 3 | 4 | import { NavLink } from "react-router-dom"; 5 | const AboutUs = () => { 6 | 7 | return ( 8 |
9 |
10 |
11 |

12 | Do you have any comments or questions? Our team will be happy to assist you. Send us a message. 13 |

14 | 15 |

16 | support@pepcoding.com 17 |

18 | 19 |

20 | We are here to answer any questions regarding our resume generator, do not hesitate to contact us for 21 | any reason. We will respond in less than 24 hours from receipt of the email. Thanks for trusting us 22 |

23 |
24 |
25 | logo 26 |
27 |
28 |
29 | 30 | ); 31 | } 32 | 33 | export default AboutUs; -------------------------------------------------------------------------------- /ui/src/components/presentation/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | const footer = () => { 4 | return ( 5 | 6 |
7 |
8 |
9 | 10 | ); 11 | }; 12 | export default footer; 13 | -------------------------------------------------------------------------------- /ui/src/components/presentation/gettingStarted.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {skinCodes} from '../../constants/typeCodes'; 3 | // import * as actionTypes from '../../actions/actionTypes'; 4 | // import { bindActionCreators } from 'redux'; 5 | 6 | // import { withRouter } from "react-router-dom"; 7 | import { useHistory } from "react-router-dom"; 8 | // import { setSkin } from '../../redux/actions/documentActions'; 9 | import { connect } from 'react-redux'; 10 | import {setSkin,updateSkin} from '../../redux/actions/documentActions'; 11 | function GettingStarted(props) { 12 | let history = useHistory(); 13 | const onChange = (skinCd) => { 14 | if(props.document.id){ 15 | props.updateDocument(skinCd) 16 | }else{ 17 | props.setDocument(skinCd) 18 | } 19 | history.push('/contact'); 20 | } 21 | 22 | 23 | return ( 24 |
25 |
26 |

27 | Select a resume template to get started

28 |

29 | You’ll be able to edit and change this template later! 30 |

31 |
32 | { 33 | skinCodes.map((value,index) => { 34 | return(
35 | 36 | 37 | 38 |
); 39 | 40 | }) 41 | } 42 |
43 | 44 |
45 |
46 | ); 47 | 48 | } 49 | 50 | 51 | const mapStateToProps = (state) => { 52 | return{ 53 | document : state.document 54 | } 55 | } 56 | 57 | const mapDispatchToProps = (dispatch) => { 58 | return{ 59 | setDocument : (skinCd) => dispatch(setSkin(skinCd)), 60 | updateDocument : (skinCd) => dispatch(updateSkin(skinCd)) 61 | } 62 | } 63 | 64 | 65 | export default connect(mapStateToProps,mapDispatchToProps)(GettingStarted) 66 | 67 | -------------------------------------------------------------------------------- /ui/src/components/presentation/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import logo from "../../static/images/logo.png"; 4 | import { isLoaded,isEmpty } from "react-redux-firebase"; 5 | import * as authActions from '../../redux/actions/authActions' 6 | import { connect } from "react-redux"; 7 | 8 | function LoggesOut(props) { 9 | return ( 10 |
    11 |
  • 12 | 13 | Register 14 | 15 |
    • 16 |
  • 17 | 18 | Sign In 19 | 20 |
    • 21 |
22 | ) 23 | } 24 | 25 | const Header = (props) => { 26 | const auth = props.auth; 27 | const handleLogOut=()=>{ 28 | props.signOut(); 29 | console.log('The user will sign out'); 30 | } 31 | 32 | return ( 33 |
34 | 72 |
73 | 74 | ); 75 | }; 76 | 77 | const mapStateToProps=(state)=>{ 78 | return{ 79 | auth: state.firebase.auth 80 | } 81 | } 82 | const mapDispatchToProps= (dispatch)=>{ 83 | return { 84 | signOut:()=>dispatch(authActions.signout()) 85 | } 86 | } 87 | export default connect(mapStateToProps,mapDispatchToProps)(Header); 88 | -------------------------------------------------------------------------------- /ui/src/components/presentation/landingPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from "../../static/images/resume.png"; 3 | import { NavLink } from "react-router-dom"; 4 | const Lp = () => { 5 | return ( 6 | 7 |
8 |
9 |

Create a resume that stands out

10 |

Create a Resume that perfectally describes your skils and match job profile.

11 |

12 |
13 | Get Started for Free 14 | 15 | 16 |
17 | logo 18 |
19 |
20 | 21 | ); 22 | } 23 | 24 | export default Lp; -------------------------------------------------------------------------------- /ui/src/components/presentation/resumePreview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {fieldCd} from './../../constants/typeCodes' 3 | function ResumePreview(props){ 4 | // console.log('Resume Preview'); 5 | const rvContact=(key, valToAppend)=>{ 6 | if(props.contactSection){ 7 | return props.contactSection[key]?props.contactSection[key] + (valToAppend?valToAppend:'') :''; 8 | } 9 | return ''; 10 | } 11 | 12 | const rvEducation=(key, valToAppend)=>{ 13 | if(props.educationSection){ 14 | return props.educationSection[key]?props.educationSection[key] + (valToAppend?valToAppend:'') :''; 15 | } 16 | return ''; 17 | } 18 | 19 | return ( 20 |
21 |
22 |

{rvContact(fieldCd.FirstName,' ') + rvContact(fieldCd.LastName)}

23 |

{rvContact(fieldCd.City,', ') + rvContact(fieldCd.State,', ') + rvContact(fieldCd.Country,', ') + rvContact(fieldCd.ZipCode,', ')}

24 |

{rvContact(fieldCd.Email ) }

25 |

{rvContact(fieldCd.Phone) }

26 |
27 | 28 |
29 |

PROFESSIONAL SUMMARY

30 |
31 |

{rvContact(fieldCd.ProfSummary)}

32 |
33 | 34 |
35 |

EDUCATIONAL DETAILS

36 |
37 |

{rvEducation(fieldCd.SchoolName)}

38 |

{rvEducation(fieldCd.Degree)}

39 |

{rvEducation(fieldCd.City)}

40 |

{rvEducation(fieldCd.GraduationCGPA)}

41 |

{rvEducation(fieldCd.GraduationDate)}

42 |

{rvEducation(fieldCd.GraduationYear)}

43 |
44 | 45 |
46 | ) 47 | } 48 | export default ResumePreview; -------------------------------------------------------------------------------- /ui/src/constants/typeCodes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export const skinCodes = ['skin1', 'skin2', 'skin3','skin4' ]; 4 | 5 | // export const fontSize = ['small', 'medium', 'large' ]; 6 | 7 | // export const fontFamily = ['Josefin', 'Roboto', 'Montserrat' ]; 8 | // export const colors = ['blue', 'teal', 'green', 'yellow' ]; 9 | 10 | export const fieldCd = { 11 | FirstName: "FNAM", 12 | LastName: "LNAM", 13 | Profession:"PROF", 14 | ProfSummary:"PRSU", 15 | Phone: "PHON", 16 | City: "CITY", 17 | Company: "COMP", 18 | Degree: "DGRE", 19 | FreeFormat: "FRFM", 20 | GraduationCGPA: "GRCG", 21 | GraduationYear: "GRYR", 22 | GraduationDate: "GRDT", 23 | HomePhone: "HPHN", 24 | JobCity: "JCIT", 25 | JobDescription: "JDES", 26 | JobEndDate: "EDDT", 27 | JobStartDate: "JSTD", 28 | JobState: "JSTA", 29 | JobTitle: "JTIT", 30 | 31 | Location: "LOCN", 32 | SchoolCity: "SCIT", 33 | SchoolName: "SCHO", 34 | SchoolState: "SSTA", 35 | State: "STAT", 36 | Street: "STRT", 37 | ZipCode: "ZIPC", 38 | Email: "EMAI", 39 | IsEmailHidden: "EHID", 40 | SchoolCountry: "SCNT", 41 | JobCountry: "JCNT", 42 | Country: "CNTY" 43 | 44 | }; 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ui/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 | -------------------------------------------------------------------------------- /ui/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import { BrowserRouter } from 'react-router-dom'; 5 | import {createStore,applyMiddleware} from 'redux' 6 | import rootReducer from './redux/reducers/rootReducer'; 7 | import {composeWithDevTools} from 'redux-devtools-extension' 8 | import { Provider } from 'react-redux'; 9 | import firebase from 'firebase/compat/app'; 10 | import 'firebase/compat/firestore'; 11 | import 'firebase/compat/auth'; 12 | import thunk from 'redux-thunk'; 13 | import { reduxFirestore, getFirestore } from 'redux-firestore'; 14 | import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'; 15 | import { createFirestoreInstance } from 'redux-firestore'; 16 | 17 | const firebaseConfig = { 18 | apiKey: "AIzaSyBMaW34uo1zaUMIeT0wdORiO-8D21bur6o", 19 | authDomain: "resume-yt-9e26e.firebaseapp.com", 20 | projectId: "resume-yt-9e26e", 21 | storageBucket: "resume-yt-9e26e.appspot.com", 22 | messagingSenderId: "1070979660486", 23 | appId: "1:1070979660486:web:969255fdd64ff32b6a35c7" 24 | }; 25 | 26 | firebase.initializeApp(firebaseConfig); 27 | firebase.firestore() 28 | 29 | const reduxStore = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),reduxFirestore(firebase))) //binding for redux to get firestore 30 | 31 | ReactDOM.render( 32 | 33 | 34 | 39 | 40 | 41 | 42 | 43 | , 44 | document.getElementById('root') 45 | ); -------------------------------------------------------------------------------- /ui/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ui/src/redux/actions/actions.js: -------------------------------------------------------------------------------- 1 | export const SET_SKIN = "SET_SKIN" 2 | export const UPDATE_SKIN = "UPDATE_SKIN" 3 | 4 | export const SET_CONTACT = 'SET_CONTACT' 5 | export const UPDATE_CONTACT = "UPDATE_CONTACT" 6 | 7 | export const SET_EDUCATION = 'SET_EDUCATION' 8 | export const UPDATE_EDUCATION = 'UPDATE_EDUCATION' 9 | 10 | export const SIGN_IN ="SIGN_IN"; 11 | export const SIGN_IN_FAILED ="SIGN_IN_FAILED"; 12 | export const SIGN_IN_SUCCESS ="SIGN_IN_SUCCESS"; 13 | export const SIGN_IN_REQUEST ="SIGN_REQUEST"; 14 | 15 | export const REGISTER ="REGISTER"; 16 | export const REGISTER_FAILED ="REGISTER_FAILED"; 17 | export const REGISTER_SUCCESS ="REGISTER_SUCCESS"; 18 | export const REGISTER_REQUEST ="REGISTER_REQUEST"; 19 | 20 | export const SIGN_OUT ="SIGN_OUT"; 21 | export const SIGN_OUT_FAILED ="SIGN_OUT_FAILED"; 22 | export const SIGN_OUT_SUCCESS ="SIGN_OUT_SUCCESS"; 23 | export const SIGN_OUT_REQUEST ="SIGN_OUT_REQUEST"; 24 | 25 | export const REMOVE_ERROR = "REMOVE_ERROR" -------------------------------------------------------------------------------- /ui/src/redux/actions/contactAction.js: -------------------------------------------------------------------------------- 1 | import * as contactActions from './actions' 2 | 3 | export const setContact = (contact) => { 4 | return { 5 | type:contactActions.SET_CONTACT, 6 | pay : contact 7 | } 8 | } 9 | 10 | export const updateContact = (contact) => { 11 | return { 12 | type:contactActions.UPDATE_CONTACT, 13 | payload:contact 14 | } 15 | } -------------------------------------------------------------------------------- /ui/src/redux/actions/documentActions.js: -------------------------------------------------------------------------------- 1 | import * as documentActions from './actions' 2 | import { v4 as uuidv4 } from 'uuid'; 3 | import documentReducer from '../reducers/documentReducer'; 4 | 5 | export const setSkin = (skinCd) => { 6 | return { 7 | type:documentActions.SET_SKIN, 8 | payload:{ 9 | skinCd : skinCd, 10 | id : uuidv4() 11 | } 12 | } 13 | } 14 | 15 | export const updateSkin = (skinCd) => { 16 | return { 17 | type:documentActions.UPDATE_SKIN, 18 | payload:{ 19 | skinCd:skinCd 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /ui/src/redux/actions/educationActions.js: -------------------------------------------------------------------------------- 1 | import * as educationActions from './actions' 2 | 3 | export const setEducation = (education) => { 4 | return { 5 | type:educationActions.SET_EDUCATION, 6 | payload : education 7 | } 8 | } 9 | 10 | export const updateEducation = (education) => { 11 | return { 12 | type:educationActions.UPDATE_EDUCATION, 13 | payload:education 14 | } 15 | } -------------------------------------------------------------------------------- /ui/src/redux/reducers/authReducer.js: -------------------------------------------------------------------------------- 1 | import initialState from './initialState.json'; 2 | import * as authActions from '../actions/actions'; 3 | 4 | const authReducer = (state=initialState.auth,action) => { 5 | switch(action.type){ 6 | case authActions.SIGN_IN_REQUEST : 7 | return {...state,loading:true} 8 | case authActions.SIGN_IN_SUCCESS : 9 | return {...state,loading:false} 10 | case authActions.SIGN_OUT_FAILED : 11 | return {...state,loading:false,error:action.error.message} 12 | case authActions.REGISTER_REQUEST : 13 | return {...state,loading:true} 14 | case authActions.REGISTER_SUCCESS : 15 | return {...state,loading:false} 16 | case authActions.REGISTER_FAILED : 17 | return {...state,loading:false,error:action.error.message} 18 | case authActions.REMOVE_ERROR : 19 | return {...state,error:''} 20 | default : return state 21 | } 22 | } 23 | 24 | export default authReducer -------------------------------------------------------------------------------- /ui/src/redux/reducers/contactReducer.js: -------------------------------------------------------------------------------- 1 | import initialState from './initialState.json' 2 | import * as contactActions from '../actions/actions' 3 | 4 | const contactReducer = (state=initialState.contact,action) => { 5 | switch(action.type){ 6 | case contactActions.SET_CONTACT : 7 | return {...action.pay} 8 | case contactActions.UPDATE_CONTACT : 9 | return {...action.payload} 10 | default : return state 11 | } 12 | } 13 | 14 | export default contactReducer; -------------------------------------------------------------------------------- /ui/src/redux/reducers/documentReducer.js: -------------------------------------------------------------------------------- 1 | import initialState from './initialState.json' 2 | import * as documentActions from '../actions/actions' 3 | 4 | const documentReducer = (state=initialState.document,action) => { 5 | switch(action.type){ 6 | case documentActions.SET_SKIN : 7 | return {...state,id:action.payload.id,skinCd:action.payload.skinCd} 8 | case documentActions.UPDATE_SKIN : 9 | return {...state,skinCd:action.payload.skinCd} 10 | default : return state 11 | } 12 | } 13 | 14 | export default documentReducer; -------------------------------------------------------------------------------- /ui/src/redux/reducers/educationReducer.js: -------------------------------------------------------------------------------- 1 | import initialState from './initialState.json'; 2 | import * as educationActions from '../actions/actions'; 3 | 4 | const educationReducer = (state=initialState.education,action) => { 5 | switch(action.type){ 6 | case educationActions.SET_EDUCATION : 7 | return {...action.payload} 8 | case educationActions.UPDATE_EDUCATION : 9 | return {...action.payload} 10 | default : return state 11 | } 12 | } 13 | 14 | export default educationReducer -------------------------------------------------------------------------------- /ui/src/redux/reducers/initialState.json: -------------------------------------------------------------------------------- 1 | { 2 | "document" : { 3 | "id":null, 4 | "skinCd":"" 5 | }, 6 | "education" : null, 7 | "contact" : null, 8 | "auth":{ 9 | "loading":false, 10 | "error":"" 11 | } 12 | } -------------------------------------------------------------------------------- /ui/src/redux/reducers/rootReducer.js: -------------------------------------------------------------------------------- 1 | import {combineReducers} from 'redux' 2 | import documentReducer from './documentReducer' 3 | import contactReducer from './contactReducer' 4 | import educationReducer from './educationReducer' 5 | import authReducer from './authReducer' 6 | import { firebaseReducer } from 'react-redux-firebase' 7 | import { firestoreReducer } from 'redux-firestore' 8 | 9 | const rootReducer = combineReducers({ 10 | document : documentReducer, 11 | contact : contactReducer, 12 | education : educationReducer, 13 | firebase : firebaseReducer, 14 | firestore : firestoreReducer, 15 | auth : authReducer 16 | }) 17 | 18 | export default rootReducer -------------------------------------------------------------------------------- /ui/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 | -------------------------------------------------------------------------------- /ui/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 | -------------------------------------------------------------------------------- /ui/src/static/images/aboutus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/src/static/images/aboutus.jpg -------------------------------------------------------------------------------- /ui/src/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/src/static/images/logo.png -------------------------------------------------------------------------------- /ui/src/static/images/resume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/src/static/images/resume.png -------------------------------------------------------------------------------- /ui/src/static/scss.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udai1931/ReactYT/c62f96d43d33fe586fffc24243241125f88bb736/ui/src/static/scss.zip -------------------------------------------------------------------------------- /ui/src/static/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import 'common'; 2 | @import 'lp'; 3 | @import 'header'; 4 | @import 'getting-started'; 5 | @import 'form'; 6 | @import 'button'; 7 | @import 'documentStyles' -------------------------------------------------------------------------------- /ui/src/static/scss/button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | 3 | border-radius: 5px; 4 | height: 4rem; 5 | padding: 1%; 6 | border: none; 7 | position: relative; 8 | background: linear-gradient(45deg, #1DBFAF 0, #1EAEDB 85%, #1EAEDB 100%); 9 | color: white; 10 | 11 | &:hover { 12 | color: black; 13 | background: white; 14 | border: 2px solid #5ae4ce; 15 | } 16 | &.small{ 17 | border: 2px solid #5ae4ce; 18 | padding: 7px !important; 19 | border-radius: 0.6rem; 20 | } 21 | } 22 | 23 | .btn-back { 24 | width: 70%; 25 | display: flex; 26 | flex-direction: column; 27 | margin-bottom: 1.5rem; 28 | margin-top: 20px 0px; 29 | } -------------------------------------------------------------------------------- /ui/src/static/scss/documentStyles.scss: -------------------------------------------------------------------------------- 1 | .skin1{ 2 | 3 | padding:3%; 4 | .contact-name{ 5 | color: cornflowerblue; 6 | 7 | font-size: 3rem; 8 | font-weight: bold; 9 | padding: 5px 0px; 10 | } 11 | .address{ 12 | padding: 5px 0px; 13 | } 14 | .educationSection{ 15 | 16 | .heading{ 17 | color: darkcyan; 18 | font-size: 1.7rem; 19 | width: 100%; 20 | 21 | } 22 | } 23 | } 24 | 25 | .divider{ 26 | width: 100%; 27 | border-bottom: 1px solid darkcyan; 28 | } -------------------------------------------------------------------------------- /ui/src/static/scss/footer.scss: -------------------------------------------------------------------------------- 1 | 2 | .footer { 3 | height: 255px; 4 | background: #292727; 5 | margin-top: 50px; 6 | } -------------------------------------------------------------------------------- /ui/src/static/scss/form.scss: -------------------------------------------------------------------------------- 1 | 2 | .form-card { 3 | width: 55%; 4 | 5 | box-shadow: 0 2px 9px rgba(186, 186, 186, 0.5); 6 | } 7 | .form-section { 8 | display: flex; 9 | flex-direction: row; 10 | justify-content: space-around; 11 | flex-wrap: wrap; 12 | } 13 | 14 | .form-heading { 15 | font-size: 3.5rem; 16 | } 17 | 18 | .input-group { 19 | width: 44%; 20 | display: flex; 21 | flex-direction: column; 22 | margin-bottom: 1.5rem 23 | } 24 | 25 | .input-group.full { 26 | width: 94%; 27 | } 28 | 29 | .input-group label { 30 | font-size: 2rem; 31 | font-weight: 500; 32 | color: #597181; 33 | margin-bottom: 4px 34 | } 35 | 36 | .input-group .effect { 37 | position: relative; 38 | overflow: hidden; 39 | border-radius: 4px 40 | } 41 | 42 | .input-group .effect>span { 43 | display: block; 44 | position: absolute; 45 | left: 0; 46 | top: 0; 47 | width: 2px; 48 | height: 100%; 49 | background-color: #5ae4ce; 50 | transform: scaleY(0); 51 | transition: transform .15s ease-in-out; 52 | transform-origin: center 53 | } 54 | 55 | .input-group .effect .icon { 56 | display: block; 57 | position: absolute; 58 | left: 12px; 59 | top: 10px; 60 | height: 100% 61 | } 62 | 63 | .input-group .effect .icon svg { 64 | width: 16px; 65 | height: 16px; 66 | color: rgba(52, 88, 218, .2) 67 | } 68 | 69 | .input-group .effect .icon svg.green { 70 | color: #03ad03 !important 71 | } 72 | 73 | .input-group .effect input:focus+span { 74 | transform: scaleY(1); 75 | border: none; 76 | } 77 | 78 | .input-group .effect input:focus+span+.icon svg { 79 | color: #5ae4ce 80 | } 81 | 82 | input { 83 | outline: none !important; 84 | } 85 | 86 | .input-group input { 87 | border: none; 88 | background-color: #f2f5fa; 89 | padding: 15px 1rem; 90 | border-radius: 4px; 91 | font-size: 1.5rem; 92 | color: #545d69; 93 | font-weight: 500; 94 | transition: all .2s ease-in-out; 95 | border-left: 0 solid #3458da; 96 | width: 100% 97 | } 98 | 99 | .input-group .error { 100 | margin-top: 3px; 101 | color: #ff4848; 102 | font-size: .8rem 103 | } 104 | 105 | .input-group.iconned input { 106 | padding-left: calc(1rem + 22px) 107 | } 108 | 109 | .form-buttons { 110 | width: 70%; 111 | display: flex; 112 | flex-direction: column; 113 | margin-bottom: 1.5rem; 114 | 115 | } 116 | 117 | .form-buttons .btn { 118 | margin: 20px 0px; 119 | } 120 | -------------------------------------------------------------------------------- /ui/src/static/scss/getting-started.scss: -------------------------------------------------------------------------------- 1 | .gettingStarted { 2 | 3 | 4 | 5 | 6 | .selected-skin{ 7 | border: 2px solid teal; 8 | } 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | } -------------------------------------------------------------------------------- /ui/src/static/scss/header.scss: -------------------------------------------------------------------------------- 1 | 2 | .header { 3 | position: absolute; 4 | top: 0; 5 | left:0px; 6 | width: 100%; 7 | z-index: 9990; 8 | background-color: #FFF; 9 | border-left: none !important; 10 | border-top: none !important; 11 | border-right: none !important; 12 | box-shadow: 0 1px 5px 0 #FFF; 13 | /* padding: 0 3rem 0 2.6rem; */ 14 | /* background: red; */ 15 | border: 1px solid #ebebeb; 16 | height: 53px; 17 | box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .25); 18 | .header-links{ 19 | width: 100%; 20 | } 21 | } 22 | 23 | .logo { 24 | background-size: 59px 50px; 25 | height: 50px; 26 | width: 50px; 27 | padding: 0px 5px; 28 | } 29 | 30 | 31 | .nav { 32 | display: flex; 33 | flex-direction: row; 34 | height: 100%; 35 | ul { 36 | float: right; 37 | justify-content: flex-end; 38 | display: flex; 39 | align-items: center; 40 | flex: 1 1; 41 | height: 100%; 42 | margin: 0px; 43 | width: auto; 44 | } 45 | 46 | li { 47 | vertical-align: middle; 48 | display: inline-block; 49 | height: auto; 50 | margin-bottom: 0; 51 | box-sizing: border-box; 52 | width: auto; 53 | z-index: 9999; 54 | margin: 0px 6px; 55 | } 56 | 57 | 58 | .signin { 59 | padding-left: 0; 60 | padding-right: 0 61 | } 62 | 63 | .signup { 64 | border: 2px solid #5ae4ce; 65 | padding: 7px !important; 66 | border-radius: 0.6rem; 67 | } 68 | 69 | .signup:hover { 70 | background: linear-gradient(45deg, #1DBFAF 0, #1EAEDB 85%, #1EAEDB 100%); 71 | } 72 | 73 | .signup a:hover { 74 | color: white !important; 75 | } 76 | 77 | .signin a:hover { 78 | color: black !important; 79 | } 80 | 81 | 82 | 83 | 84 | 85 | .header-link-container{ 86 | width: 80%; 87 | 88 | } 89 | 90 | .logo-container{ 91 | width: 20%; 92 | 93 | } 94 | } 95 | 96 | -------------------------------------------------------------------------------- /ui/src/static/scss/lp.scss: -------------------------------------------------------------------------------- 1 | .lp-page{ 2 | 3 | .lp-resume { 4 | height: 300px; 5 | width: 400px; 6 | } 7 | 8 | } --------------------------------------------------------------------------------