├── .gitignore ├── .vscode └── settings.json ├── Day1 ├── README.md └── assignment1 │ └── src │ ├── MyComponent.js │ ├── index.html │ └── style.css ├── Day11 └── github-api-project-ts │ └── logo-no-background.png ├── Day12 ├── README12.md └── github-api-project-ts │ ├── .editorconfig │ ├── .eslintrc.json │ ├── .gitignore │ ├── .prettierrc │ ├── .vscode │ └── settings.json │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── assets │ │ ├── icons │ │ │ └── index.ts │ │ └── images │ │ │ ├── banner-logo.png │ │ │ └── logo-no-background.png │ ├── components │ │ ├── Buttons │ │ │ └── ShowButton │ │ │ │ ├── NavigationButton.tsx │ │ │ │ └── navigationButton.styles.module.css │ │ ├── Card │ │ │ ├── Card.tsx │ │ │ └── card.styles.module.css │ │ ├── ErrorPage │ │ │ ├── ErrorPage.tsx │ │ │ └── errors.css │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ └── InputError.tsx │ │ ├── Loader │ │ │ ├── Loader.tsx │ │ │ └── loader.styles.module.css │ │ ├── Select │ │ │ └── Option.tsx │ │ ├── SelectByCity │ │ │ ├── SelectByCity.tsx │ │ │ ├── SelectHeading.tsx │ │ │ └── selectByCity.styles.module.css │ │ └── index.ts │ ├── containers │ │ ├── Header │ │ │ ├── Header.tsx │ │ │ └── header.styles.module.css │ │ ├── MemberInfo │ │ │ ├── MemberInfo.tsx │ │ │ └── memberInfo.module.css │ │ ├── Members │ │ │ ├── Members.tsx │ │ │ ├── member.styles.module.css │ │ │ └── membersData.ts │ │ ├── NavBar │ │ │ ├── NavBarUI │ │ │ │ ├── AppModeIcon.tsx │ │ │ │ ├── NavbarHeader.tsx │ │ │ │ └── NavbarUi.tsx │ │ │ ├── Navbar.styles.module.css │ │ │ └── Navbar.tsx │ │ ├── Navigator │ │ │ ├── Navigator.tsx │ │ │ └── navigator.styles.module.css │ │ ├── SearchGithubUsers │ │ │ ├── SearchGithubUsers.tsx │ │ │ ├── SearchGithubUsersUI │ │ │ │ └── Heading.tsx │ │ │ └── searchGithubUsers.styles.module.css │ │ └── index.ts │ ├── contexts │ │ └── ThemeContext │ │ │ ├── ThemeContext.ts │ │ │ ├── ThemeContextProvider.tsx │ │ │ └── index.ts │ ├── hooks │ │ ├── index.ts │ │ ├── typesHooks.ts │ │ └── useFetchUsersByCity.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── miscellaneous │ │ ├── ChildClassBasedComponent.tsx │ │ └── ParentClassBasedComponent.tsx │ ├── pages │ │ ├── AuthPages │ │ │ ├── Login │ │ │ │ ├── Form.tsx │ │ │ │ ├── Login.tsx │ │ │ │ ├── LoginForm.tsx │ │ │ │ ├── LoginInputs.tsx │ │ │ │ ├── login.styles.ts │ │ │ │ └── login.types.ts │ │ │ └── Logout │ │ │ │ └── Logout.tsx │ │ ├── HomePage │ │ │ ├── HomePage.tsx │ │ │ └── homePage.styles.module.css │ │ ├── index.ts │ │ └── utils.ts │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── routes │ │ ├── ProtectedRoute.tsx │ │ └── index.tsx │ ├── services │ │ ├── index.ts │ │ └── mockData.ts │ ├── setupTests.ts │ ├── slices │ │ └── loginSlice.ts │ ├── store │ │ └── index.ts │ ├── types │ │ └── index.ts │ └── utils │ │ └── state-city-data.json │ └── tsconfig.json ├── Day13 └── README.md ├── Day2 ├── README.md ├── babelTranspiler │ ├── .babelrc │ ├── package-lock.json │ ├── package.json │ └── src │ │ └── index.js ├── react-app │ ├── .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 ├── react-typescript-app │ ├── .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.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json ├── withParcel │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ └── src │ │ ├── index.html │ │ └── script.js ├── withWebpack │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── index.html │ │ └── index.js │ └── webpack.config.js └── withWebpackTypeScript │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── index.css │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── Day3 ├── README.md ├── package-lock.json ├── package.json └── src │ ├── Headings.js │ ├── Navbar.js │ ├── assets │ ├── logo.png │ └── project.png │ ├── index.html │ ├── index.js │ └── style.css ├── Day4and5 ├── README.md ├── README2.md ├── package-lock.json ├── package.json ├── public │ ├── avengers-logo-files │ │ ├── png │ │ │ ├── logo-black.png │ │ │ ├── logo-color.png │ │ │ ├── logo-no-background.png │ │ │ └── logo-white.png │ │ └── svg │ │ │ ├── logo-black.svg │ │ │ ├── logo-color.svg │ │ │ ├── logo-no-background.svg │ │ │ └── logo-white.svg │ └── index.html └── src │ ├── App.js │ ├── App.styles.css │ ├── components │ ├── Card │ │ ├── Card.jsx │ │ └── Card.styles.module.css │ ├── Cards │ │ ├── Cards.jsx │ │ └── Cards.styles.module.css │ ├── Header │ │ ├── Header.jsx │ │ └── Header.styles.module.css │ └── SearchComponent │ │ ├── Search.jsx │ │ └── Search.styles.module.css │ ├── index.js │ ├── pages │ └── HomePage │ │ ├── AvengersData.json │ │ └── HomePage.jsx │ └── utils │ └── index.js ├── Day6 ├── README6.md └── github-api-project-ts │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.tsx │ ├── assets │ │ ├── icons │ │ │ └── index.js │ │ └── images │ │ │ └── logo-no-background.png │ ├── components │ │ ├── Card │ │ │ ├── Card.tsx │ │ │ └── card.styles.module.css │ │ └── index.ts │ ├── containers │ │ ├── Header │ │ │ ├── Header.tsx │ │ │ └── header.styles.module.css │ │ ├── Members │ │ │ ├── Members.tsx │ │ │ ├── member.styles.module.css │ │ │ └── membersData.ts │ │ ├── NavBar │ │ │ ├── Navbar.styles.module.css │ │ │ └── Navbar.tsx │ │ └── index.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages │ │ ├── HomePage │ │ │ └── HomePage.tsx │ │ └── index.ts │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── services │ │ ├── index.ts │ │ └── mockData.ts │ ├── setupTests.ts │ └── types │ │ └── index.ts │ └── tsconfig.json ├── Day7n8n9n10 ├── README10.md ├── README7.md ├── README8.md ├── README9.md └── github-api-project-ts │ ├── .eslintrc.json │ ├── .gitignore │ ├── .prettierrc │ ├── .vscode │ └── settings.json │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── assets │ │ ├── icons │ │ │ └── index.ts │ │ └── images │ │ │ └── logo-no-background.png │ ├── components │ │ ├── Buttons │ │ │ └── ShowButton │ │ │ │ ├── NavigationButton.tsx │ │ │ │ └── navigationButton.styles.module.css │ │ ├── Card │ │ │ ├── Card.tsx │ │ │ └── card.styles.module.css │ │ ├── ErrorPage │ │ │ ├── ErrorPage.tsx │ │ │ └── errors.css │ │ ├── Loader │ │ │ ├── Loader.tsx │ │ │ └── loader.styles.module.css │ │ ├── Select │ │ │ └── Option.tsx │ │ ├── SelectByCity │ │ │ ├── SelectByCity.tsx │ │ │ ├── SelectHeading.tsx │ │ │ └── selectByCity.styles.module.css │ │ └── index.ts │ ├── containers │ │ ├── Header │ │ │ ├── Header.tsx │ │ │ └── header.styles.module.css │ │ ├── MemberInfo │ │ │ ├── MemberInfo.tsx │ │ │ └── memberInfo.module.css │ │ ├── Members │ │ │ ├── Members.tsx │ │ │ ├── member.styles.module.css │ │ │ └── membersData.ts │ │ ├── NavBar │ │ │ ├── NavBarUI │ │ │ │ ├── AppModeIcon.tsx │ │ │ │ ├── NavbarHeader.tsx │ │ │ │ └── NavbarUi.tsx │ │ │ ├── Navbar.styles.module.css │ │ │ └── Navbar.tsx │ │ ├── Navigator │ │ │ ├── Navigator.tsx │ │ │ └── navigator.styles.module.css │ │ ├── SearchGithubUsers │ │ │ ├── SearchGithubUsers.tsx │ │ │ ├── SearchGithubUsersUI │ │ │ │ └── Heading.tsx │ │ │ └── searchGithubUsers.styles.module.css │ │ └── index.ts │ ├── contexts │ │ └── ThemeContext │ │ │ ├── ThemeContext.ts │ │ │ ├── ThemeContextProvider.tsx │ │ │ └── index.ts │ ├── hooks │ │ └── useFetchUsersByCity.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── miscellaneous │ │ ├── ChildClassBasedComponent.tsx │ │ └── ParentClassBasedComponent.tsx │ ├── pages │ │ ├── HomePage │ │ │ ├── HomePage.tsx │ │ │ └── homePage.styles.module.css │ │ └── index.ts │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── routes │ │ └── index.tsx │ ├── services │ │ ├── index.ts │ │ └── mockData.ts │ ├── setupTests.ts │ ├── types │ │ └── index.ts │ └── utils │ │ └── state-city-data.json │ └── tsconfig.json ├── LICENSE ├── README.md ├── Revision ├── Basic_React │ ├── way1 │ │ ├── index.html │ │ └── script.js │ └── way2 │ │ ├── MyReactElement.js │ │ ├── README.md │ │ ├── React.js │ │ ├── ReactElement.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── script.js │ │ └── styles.css ├── COMPONENTvsELEMENT_REACT │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── script.js ├── UnderstandingUseEffect │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── script.js ├── UnderstandingUseMemo │ ├── React.js │ ├── ReactDOM.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── script.js ├── UnderstandingUseState │ ├── public │ │ └── index.html │ └── src │ │ └── index.js ├── custom-components │ ├── index.html │ └── script.js ├── machine_coding │ └── nestedComments │ │ ├── CommentsComponent.js │ │ ├── index.html │ │ ├── index.js │ │ ├── nestedCommentsData.js │ │ ├── package-lock.json │ │ └── package.json ├── stateInReact │ ├── component.js │ └── index.html └── typesOfComponents │ └── createClassComponent │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── script.js ├── TEACHING_LIBRARIES ├── 01-typescript │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── index.ts │ │ ├── mutations.js │ │ └── mutations.ts │ └── tsconfig.json └── 02-react-query │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── script.js └── miscellaneous ├── cypress-testing └── unit-testing-with-cypress │ ├── README.md │ └── cypress-unit-testing-project │ ├── .gitignore │ ├── cypress.config.js │ ├── cypress │ ├── component │ │ └── Movielist.cy.js │ └── support │ │ └── index.ts │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── MovieList.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── indexedDbDemo └── index.html ├── react-native ├── .expo-shared │ └── assets.json ├── .gitignore ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── data.json │ ├── favicon.png │ ├── icon.png │ ├── images │ │ ├── beach.jpg │ │ ├── forest.jpg │ │ └── mountain.jpg │ └── splash.png ├── babel.config.js ├── package-lock.json ├── package.json └── src │ ├── components │ └── ImageDetail.js │ └── screens │ ├── ComponentsScreen.js │ ├── CounterScreen.js │ ├── HomeScreen.js │ ├── ImageScreen.js │ ├── ListScreen.js │ └── TextInputScreen.js ├── react-router-docs-tutorials ├── .gitignore ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── contacts.js │ ├── error-page.jsx │ ├── index.css │ ├── main.jsx │ └── routes │ │ ├── contact.jsx │ │ ├── destroy.jsx │ │ ├── edit.jsx │ │ ├── index.jsx │ │ └── root.jsx └── vite.config.js ├── react-testing-learnings ├── color-button │ ├── .eslintrc.json │ ├── .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 ├── notes.js └── sundaes-on-demand │ ├── .eslintrc.json │ ├── .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 │ ├── mocks │ └── handlers.js │ ├── pages │ └── summary │ │ ├── OrderSummary.jsx │ │ ├── SummaryForm.jsx │ │ └── test │ │ └── SummaryForm.test.jsx │ ├── reportWebVitals.js │ └── setupTests.js └── redux-essentials-docs └── redux-essentials-example ├── .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 ├── app └── store.js ├── features └── counter │ ├── Counter.js │ ├── Counter.module.css │ ├── counterAPI.js │ ├── counterSlice.js │ └── counterSlice.spec.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | build 4 | 5 | lib 6 | 7 | .parcel-cache 8 | 9 | dist 10 | 11 | .DS_Store 12 | # Local Netlify folder 13 | .netlify 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /Day1/assignment1/src/MyComponent.js: -------------------------------------------------------------------------------- 1 | //Hello React 2 | const createReactElement = React.createElement; 3 | const createReactRoot = ReactDOM.createRoot; 4 | const rootDOMElement = document.querySelector("#root"); 5 | 6 | /** 7 | * @params {String} JSX Element 8 | * @params {Object} props 9 | * @params {React Element/ Array of React Element} children 10 | * @returns React Element 11 | */ 12 | //Added two children, an array of two objects in props 13 | const element = createReactElement( 14 | "div", 15 | { myprops: { name: "Ajay", age: 22, children: "Ajay" } }, 16 | [ 17 | createReactElement( 18 | "h1", 19 | { myprops: { name: "Asha Bhosle" } }, 20 | `I am created with Reactjs` 21 | ), 22 | "Hello, I am the next react child", 23 | ] 24 | ); 25 | 26 | const rootOfApplication = createReactRoot(rootDOMElement); 27 | rootOfApplication.render(element); 28 | 29 | // Hello Vanilla JS 30 | const heading = document.createElement("h1"); 31 | heading.innerText = "I am created with Vanilla JS dynamically"; 32 | heading.classList.add("vanillaJS"); 33 | heading.style.color = "red"; 34 | document.body.append(heading); 35 | -------------------------------------------------------------------------------- /Day1/assignment1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Creating a minimal React application 8 | 9 | 10 | 11 | 16 | 21 | 22 | 23 | 24 | 25 |
26 | This will be seen before the react doesn't replace this DOM element. 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Day1/assignment1/src/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | background-color: aliceblue; 5 | } 6 | body { 7 | min-height: 100vh; 8 | display: grid; 9 | place-items: center; 10 | } 11 | -------------------------------------------------------------------------------- /Day11/github-api-project-ts/logo-no-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day11/github-api-project-ts/logo-no-background.png -------------------------------------------------------------------------------- /Day12/github-api-project-ts/.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 4 -------------------------------------------------------------------------------- /Day12/github-api-project-ts/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended", 10 | "plugin:@typescript-eslint/recommended", 11 | "plugin:prettier/recommended" 12 | ], 13 | "overrides": [], 14 | "parser": "@typescript-eslint/parser", 15 | "parserOptions": { 16 | "ecmaVersion": "latest", 17 | "sourceType": "module" 18 | }, 19 | "plugins": ["react", "@typescript-eslint", "eslint-plugin-tsdoc"], 20 | "rules": { 21 | "react/react-in-jsx-scope": "off", 22 | "no-console": "warn", 23 | "tsdoc/syntax": "warn" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/.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 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 2, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, 3 | "editor.formatOnSave": true, 4 | "eslint.alwaysShowStatus": true, 5 | "files.autoSave": "onFocusChange", 6 | "editor.defaultFormatter": "esbenp.prettier-vscode" 7 | } 8 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/README.md: -------------------------------------------------------------------------------- 1 | # Namaste-React 2 | 3 | ## Assignment-12-TS 4 | 5 | Assignment to make a webpage using github user API to render info about user 6 | 7 | ## Author 8 | 9 | #### Ajay Pathak 10 | 11 | - Twitter: [@Pathkbndhu_navo](https://twitter.com/Pathkbndhu_navo) 12 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day12/github-api-project-ts/public/favicon.ico -------------------------------------------------------------------------------- /Day12/github-api-project-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Team Avengers 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day12/github-api-project-ts/public/logo192.png -------------------------------------------------------------------------------- /Day12/github-api-project-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day12/github-api-project-ts/public/logo512.png -------------------------------------------------------------------------------- /Day12/github-api-project-ts/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 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/assets/icons/index.ts: -------------------------------------------------------------------------------- 1 | import { FaBuilding, FaLink, FaPowerOff } from "react-icons/fa"; 2 | import { MdLocationOn, MdEmail } from "react-icons/md"; 3 | import { BsPeopleFill } from "react-icons/bs"; 4 | import { RiUserFollowFill } from "react-icons/ri"; 5 | import { BsSun } from "react-icons/bs"; 6 | import { TbMoonStars } from "react-icons/tb"; 7 | import { FaUserSecret } from "react-icons/fa"; 8 | 9 | export { 10 | FaLink, 11 | FaBuilding, 12 | MdEmail, 13 | RiUserFollowFill, 14 | BsPeopleFill, 15 | MdLocationOn, 16 | BsSun, 17 | TbMoonStars, 18 | FaUserSecret, 19 | FaPowerOff, 20 | }; 21 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/assets/images/banner-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day12/github-api-project-ts/src/assets/images/banner-logo.png -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/assets/images/logo-no-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day12/github-api-project-ts/src/assets/images/logo-no-background.png -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Buttons/ShowButton/NavigationButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | import classes from "./navigationButton.styles.module.css"; 5 | 6 | type Props = { 7 | buttonText: string; 8 | navigateTo: string; 9 | }; 10 | 11 | const NavigationButton = ({ buttonText, navigateTo }: Props) => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default NavigationButton; 20 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Buttons/ShowButton/navigationButton.styles.module.css: -------------------------------------------------------------------------------- 1 | .show__button { 2 | display: grid; 3 | place-items: center; 4 | margin: 6rem auto; 5 | padding: 1rem 3rem; 6 | background-color: var(--grey-400); 7 | box-shadow: var(--shadow-2); 8 | cursor: pointer; 9 | transition: var(--transition); 10 | } 11 | 12 | .show__button:hover { 13 | transform: scale(1.1); 14 | } 15 | 16 | .show__button a { 17 | color: var(--primary-700); 18 | } 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/ErrorPage/ErrorPage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useRouteError } from "react-router-dom"; 3 | 4 | import "./errors.css"; 5 | 6 | interface IRouteError { 7 | statusText: string; 8 | message: string; 9 | status: number; 10 | } 11 | 12 | const ErrorPage = () => { 13 | const error: unknown = useRouteError(); 14 | return ( 15 |
16 |

Oops!

17 |
18 |

Sorry, an unexpected error has occured.

19 |

20 | 21 | {(error as IRouteError).statusText || 22 | (error as IRouteError).message} 23 | 24 |

25 |

26 | {(error as IRouteError).status} 27 |

28 |
29 |
30 | ); 31 | }; 32 | 33 | export default ErrorPage; 34 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/ErrorPage/errors.css: -------------------------------------------------------------------------------- 1 | .error__page { 2 | text-align: center; 3 | } 4 | 5 | .error__page > article > p { 6 | margin: 1rem auto; 7 | } 8 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Input/InputError.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | type Props = { 4 | condition?: string; 5 | }; 6 | 7 | const InputError = ({ condition }: Props) => { 8 | if (condition) { 9 | return
{condition}
; 10 | } else { 11 | return null; 12 | } 13 | }; 14 | 15 | export default InputError; 16 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Loader/Loader.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./loader.styles.module.css"; 2 | 3 | const Loader = () => { 4 | return ( 5 |
6 |
7 |
8 | ); 9 | }; 10 | 11 | export default Loader; 12 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Loader/loader.styles.module.css: -------------------------------------------------------------------------------- 1 | .loader__container { 2 | min-height: 30rem; 3 | } 4 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/Select/Option.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | value: string; 3 | children: string; 4 | }; 5 | 6 | const Option = ({ value }: Props) => { 7 | return ( 8 | 11 | ); 12 | }; 13 | 14 | export default Option; 15 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/SelectByCity/SelectHeading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Heading from "../../containers/SearchGithubUsers/SearchGithubUsersUI/Heading"; 4 | import classes from "./selectByCity.styles.module.css"; 5 | 6 | type Props = { 7 | isDark: boolean; 8 | }; 9 | 10 | const SelectHeading = ({ isDark }: Props) => { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | }; 17 | 18 | export default SelectHeading; 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/SelectByCity/selectByCity.styles.module.css: -------------------------------------------------------------------------------- 1 | .select__container { 2 | text-align: center; 3 | } 4 | 5 | .dark_header { 6 | color: var(--grey-500); 7 | } 8 | 9 | .select__container > select { 10 | box-shadow: var(--shadow-2); 11 | padding: 0.5rem 2rem; 12 | margin: 2rem; 13 | min-width: 15rem; 14 | max-width: 40rem; 15 | border: 1px solid var(--select-border); 16 | border-radius: 0.25em; 17 | padding: 0.25em 0.5em; 18 | font-size: 1.25rem; 19 | cursor: pointer; 20 | line-height: 1.1; 21 | } 22 | 23 | .select__header { 24 | margin-top: 2rem; 25 | } 26 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Card from "./Card/Card"; 2 | import NavigationButton from "./Buttons/ShowButton/NavigationButton"; 3 | import Loader from "./Loader/Loader"; 4 | import ErrorPage from "./ErrorPage/ErrorPage"; 5 | import SelectByCity from "./SelectByCity/SelectByCity"; 6 | import Input from "./Input/Input"; 7 | 8 | export { Card, Loader, NavigationButton, ErrorPage, SelectByCity, Input }; 9 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "./header.styles.module.css"; 4 | import { useThemeContext } from "../../contexts/ThemeContext"; 5 | 6 | const Header = () => { 7 | const { mode } = useThemeContext(); 8 | return ( 9 |
14 |
15 | {/* */} 16 |
17 | ); 18 | }; 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/MemberInfo/MemberInfo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | import classes from "./memberInfo.module.css"; 5 | 6 | const MemberInfo = () => { 7 | const { id } = useParams(); 8 | return ( 9 |
10 |
11 |
MemberInfo
12 |
{id}
13 |
14 |
15 | {`readme-stats-${id}`} 20 | {`ongoing-streak-${id}`} 25 | {`most-used-languages-${id}`} 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default MemberInfo; 36 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/MemberInfo/memberInfo.module.css: -------------------------------------------------------------------------------- 1 | .info__container { 2 | margin: 1rem auto; 3 | text-align: center; 4 | } 5 | 6 | .info__container > header { 7 | font-size: 2rem; 8 | font-weight: 600; 9 | } 10 | .info__container > div { 11 | font-size: 1rem; 12 | font-weight: 300; 13 | } 14 | 15 | .image__container { 16 | display: grid; 17 | grid-template-areas: 18 | "image1 image2" 19 | "image3 image3"; 20 | grid-template-rows: repeat(2, 1fr); 21 | grid-template-columns: repeat(2, 1fr); 22 | justify-items: center; 23 | gap: 2rem; 24 | min-height: 20rem; 25 | } 26 | 27 | .image__container > img { 28 | margin: 0.5rem 0; 29 | } 30 | 31 | .stats__image { 32 | grid-area: image1; 33 | } 34 | 35 | .streak__image { 36 | grid-area: image2; 37 | } 38 | 39 | .lang__image { 40 | grid-area: image3; 41 | } 42 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/Members/member.styles.module.css: -------------------------------------------------------------------------------- 1 | .member__container { 2 | margin-top: 4rem; 3 | display: grid; 4 | grid-template-columns: repeat(2, 1fr); 5 | min-height: 20rem; 6 | } 7 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/Members/membersData.ts: -------------------------------------------------------------------------------- 1 | export const AvengersIds = [ 2 | { 3 | "@@uuid": "1", 4 | id: "akshaymarch7", 5 | }, 6 | { 7 | "@@uuid": "2", 8 | id: "ap221882", 9 | }, 10 | // { 11 | // "@@uuid": "3", 12 | // id: "balajigaikwad", 13 | // }, 14 | // { 15 | // "@@uuid": "4", 16 | // id: "ChaitraMalali", 17 | // }, 18 | // { 19 | // "@@uuid": "5", 20 | // id: "roshantrivedi", 21 | // }, 22 | // { 23 | // "@@uuid": "6", 24 | // id: "vijeshnk", 25 | // }, 26 | // { 27 | // "@@uuid": "7", 28 | // id: "Pujarini", 29 | // }, 30 | // { 31 | // "@@uuid": "8", 32 | // id: "MallikarjunnKB", 33 | // }, 34 | // { 35 | // "@@uuid": "9", 36 | // id: "laxmi20936", 37 | // }, 38 | // { 39 | // "@@uuid": "10", 40 | // id: "iamkirti", 41 | // }, 42 | // { 43 | // "@@uuid": "11", 44 | // id: "nitishnivedan", 45 | // }, 46 | // { 47 | // "@@uuid": "12", 48 | // id: "GouravGoswami22", 49 | // }, 50 | ]; 51 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/NavBar/NavBarUI/AppModeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from "react"; 2 | 3 | import classes from "../Navbar.styles.module.css"; 4 | 5 | type Props = { 6 | handler: () => void; 7 | children: ReactElement; 8 | }; 9 | 10 | const AppModeIcon = ({ handler, children }: Props) => { 11 | return ( 12 |
13 | {children} 14 |
15 | ); 16 | }; 17 | 18 | export default AppModeIcon; 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/NavBar/NavBarUI/NavbarHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "../Navbar.styles.module.css"; 4 | import { FaUserSecret } from "../../../assets/icons"; 5 | import { useAppSelector } from "../../../hooks"; 6 | 7 | const NavbarHeader = () => { 8 | const firstName = useAppSelector((state) => state.login.user?.firstName); 9 | const profileSrc = useAppSelector((state) => state.login.user?.profile); 10 | 11 | return ( 12 | <> 13 |
14 | {!profileSrc ? ( 15 | 16 | ) : ( 17 | userLogo 18 | )} 19 |
20 |
21 | Welcome, {firstName} to Avengers Page! 22 |
23 | 24 | ); 25 | }; 26 | 27 | export default NavbarHeader; 28 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/NavBar/NavBarUI/NavbarUi.tsx: -------------------------------------------------------------------------------- 1 | import { TbMoonStars, BsSun, FaPowerOff } from "../../../assets/icons"; 2 | import classes from "../Navbar.styles.module.css"; 3 | import AppModeIcon from "./AppModeIcon"; 4 | import NavbarHeader from "./NavbarHeader"; 5 | 6 | type Props = { 7 | isDark: boolean; 8 | handleLightButtonClick: () => void; 9 | handleDarkButtonClick: () => void; 10 | handleSignOff: () => void; 11 | }; 12 | 13 | const NavbarUi = ({ 14 | isDark, 15 | handleDarkButtonClick, 16 | handleLightButtonClick, 17 | handleSignOff, 18 | }: Props) => { 19 | return ( 20 | 36 | ); 37 | }; 38 | 39 | export default NavbarUi; 40 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/NavBar/Navbar.styles.module.css: -------------------------------------------------------------------------------- 1 | nav { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: var(--nav-color); 6 | padding: 1.5rem; 7 | } 8 | 9 | .dark { 10 | background-color: #16161a; 11 | color: #babab3; 12 | } 13 | 14 | .user__img__container { 15 | border-radius: 50%; 16 | padding-right: 2rem; 17 | display: flex; 18 | justify-content: center; 19 | } 20 | 21 | .user__img__container > img { 22 | height: 3rem; 23 | width: 3rem; 24 | border-radius: 50%; 25 | } 26 | 27 | .nav__heading span { 28 | text-transform: uppercase; 29 | font-weight: 600; 30 | } 31 | 32 | .mode__container { 33 | padding: 1rem; 34 | font-size: 1.2rem; 35 | display: flex; 36 | justify-items: center; 37 | } 38 | 39 | .power_off { 40 | transition: hover 0.2s ease-in; 41 | margin: 4px; 42 | border-radius: 50%; 43 | } 44 | 45 | .power_off:hover { 46 | background-color: #707072b9; 47 | transform: scale(1.1); 48 | } 49 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/NavBar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | 4 | import { useThemeContext } from "../../contexts/ThemeContext"; 5 | import NavbarUi from "./NavBarUI/NavbarUi"; 6 | 7 | const Navbar = () => { 8 | const { mode, setMode } = useThemeContext(); 9 | 10 | const navigate = useNavigate(); 11 | 12 | const handleDarkButtonClick = () => { 13 | setMode("dark"); 14 | }; 15 | 16 | const handleLightButtonClick = () => { 17 | setMode("light"); 18 | }; 19 | 20 | const handleSignOff = () => { 21 | // dispatch(appLogout()); 22 | navigate("/logout"); 23 | }; 24 | 25 | const isDark = mode === "dark"; 26 | 27 | return ( 28 | 34 | ); 35 | }; 36 | 37 | export default Navbar; 38 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/Navigator/Navigator.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { NavigationButton } from "../../components"; 4 | import classes from "./navigator.styles.module.css"; 5 | 6 | const Navigator = () => { 7 | return ( 8 |
9 | 10 | 14 |
15 | ); 16 | }; 17 | 18 | export default Navigator; 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/Navigator/navigator.styles.module.css: -------------------------------------------------------------------------------- 1 | .navigator__container { 2 | display: grid; 3 | grid-template-columns: repeat(2, 1fr); 4 | min-height: 20rem; 5 | } 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/SearchGithubUsers/SearchGithubUsersUI/Heading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "../searchGithubUsers.styles.module.css"; 4 | 5 | type Props = { 6 | text: string; 7 | isDark: boolean; 8 | }; 9 | 10 | const Heading = ({ isDark, text }: Props) => { 11 | return ( 12 |

{text}

13 | ); 14 | }; 15 | 16 | export default Heading; 17 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/SearchGithubUsers/searchGithubUsers.styles.module.css: -------------------------------------------------------------------------------- 1 | .search__container { 2 | text-align: center; 3 | min-height: 20rem; 4 | } 5 | 6 | .searchitem__container { 7 | margin-top: 4rem; 8 | display: grid; 9 | grid-template-columns: repeat(2, 1fr); 10 | } 11 | 12 | .searchResults__heading { 13 | margin-top: 2rem; 14 | } 15 | 16 | .dark_header { 17 | color: var(--grey-500); 18 | } 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/containers/index.ts: -------------------------------------------------------------------------------- 1 | import Header from "./Header/Header"; 2 | import Navbar from "./NavBar/Navbar"; 3 | import Members from "./Members/Members"; 4 | import SearchGithubUsers from "./SearchGithubUsers/SearchGithubUsers"; 5 | import MemberInfo from "./MemberInfo/MemberInfo"; 6 | import Navigator from "./Navigator/Navigator"; 7 | 8 | export { Header, Navbar, Members, SearchGithubUsers, MemberInfo, Navigator }; 9 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/contexts/ThemeContext/ThemeContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | import { UseStringValue, UseStringSetValue } from "../../hooks/typesHooks"; 4 | 5 | interface IThemeContext { 6 | mode: UseStringValue; 7 | setMode: UseStringSetValue; 8 | } 9 | 10 | export const ThemeContext = createContext({} as IThemeContext); 11 | 12 | export const useThemeContext = () => useContext(ThemeContext); 13 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/contexts/ThemeContext/ThemeContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { ReactElement, useState } from "react"; 2 | import { ThemeContext } from "./ThemeContext"; 3 | 4 | type Props = { 5 | children: ReactElement; 6 | }; 7 | 8 | const ThemeContextProvider = ({ children }: Props) => { 9 | const [mode, setMode] = useState("light"); 10 | 11 | return ( 12 | 13 | {children} 14 | 15 | ); 16 | }; 17 | 18 | export default ThemeContextProvider; 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/contexts/ThemeContext/index.ts: -------------------------------------------------------------------------------- 1 | import { ThemeContext } from "./ThemeContext"; 2 | import ThemeContextProvider from "./ThemeContextProvider"; 3 | import { useThemeContext } from "./ThemeContext"; 4 | 5 | export { ThemeContext, useThemeContext, ThemeContextProvider }; 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState, AppDispatch } from "../store"; 3 | 4 | export const useAppDispatch: () => AppDispatch = useDispatch; 5 | export const useAppSelector: TypedUseSelectorHook = useSelector; 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/hooks/typesHooks.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const useString = (initialValue: string) => useState(initialValue); 4 | export type UseStringValue = ReturnType[0]; 5 | export type UseStringSetValue = ReturnType[1]; 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/hooks/useFetchUsersByCity.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | import { getUserSearchResults } from "../services"; 4 | import { IUser } from "../types"; 5 | import { useThemeContext } from "../contexts/ThemeContext"; 6 | 7 | const useFetchUsersByCity = (selectedCity: string) => { 8 | const [searchResults, setSearchResults] = useState([]); 9 | const [loading, setLoading] = useState(false); 10 | const { mode } = useThemeContext(); 11 | 12 | useEffect(() => { 13 | (async () => { 14 | try { 15 | setLoading(true); 16 | const userData = await getUserSearchResults(selectedCity); 17 | const topTenResults = userData?.splice(1, 10); 18 | setSearchResults(topTenResults); 19 | } catch (error) { 20 | alert(error); 21 | } finally { 22 | setLoading(false); 23 | } 24 | })(); 25 | }, [selectedCity]); 26 | 27 | return { searchResults, loading, mode }; 28 | }; 29 | 30 | export default useFetchUsersByCity; 31 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { RouterProvider } from "react-router-dom"; 4 | import reportWebVitals from "./reportWebVitals"; 5 | import { Provider } from "react-redux"; 6 | 7 | import "./index.css"; 8 | import { myAppRouter } from "./routes"; 9 | import { ThemeContextProvider } from "./contexts/ThemeContext"; 10 | import appStore from "./store"; 11 | 12 | const root = ReactDOM.createRoot( 13 | document.getElementById("root") as HTMLElement, 14 | ); 15 | 16 | root.render( 17 | 18 | 19 | 20 | 21 | 22 | 23 | , 24 | ); 25 | 26 | // If you want to start measuring performance in your app, pass a function 27 | // to log results (for example: reportWebVitals(console.log)) 28 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 29 | reportWebVitals(); 30 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/miscellaneous/ChildClassBasedComponent.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | /* eslint-disable @typescript-eslint/ban-types */ 3 | import React, { Component } from "react"; 4 | 5 | type Props = {}; 6 | 7 | type State = {}; 8 | 9 | class ChildClassBasedComponent extends Component { 10 | constructor(props: Props) { 11 | super(props); 12 | this.state = {}; 13 | console.log("Child- constructor"); 14 | } 15 | 16 | componentDidMount(): void { 17 | console.log("Child- didMount"); 18 | } 19 | 20 | render() { 21 | console.log("Child- render"); 22 | return <>; 23 | } 24 | } 25 | 26 | export default ChildClassBasedComponent; 27 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/AuthPages/Login/Form.tsx: -------------------------------------------------------------------------------- 1 | import { IFormikProps } from "./login.types"; 2 | 3 | import { 4 | EmailInput, 5 | FileInput, 6 | FirstNameTextInput, 7 | LastNameTextInput, 8 | } from "./LoginInputs"; 9 | 10 | interface Props { 11 | formik: IFormikProps; 12 | handleProfileChange: ( 13 | e: React.ChangeEvent, 14 | formik: IFormikProps, 15 | ) => void; 16 | } 17 | 18 | const Form = ({ formik, handleProfileChange }: Props) => { 19 | return ( 20 |
21 | {/* First Name Input*/} 22 |

Welcome, please enter the details

23 | 24 | {/* Last Name Input */} 25 | 26 | {/* email input */} 27 | 28 | {/* File Input */} 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default Form; 36 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/AuthPages/Login/Login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import LoginForm from "./LoginForm"; 4 | import { StyledLoginPage } from "./login.styles"; 5 | import logo from "../../../assets/images/banner-logo.png"; 6 | 7 | const Login = () => { 8 | return ( 9 | 10 | 11 |
12 | banner 13 |
14 | 15 | ); 16 | }; 17 | 18 | export default Login; 19 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/AuthPages/Login/login.types.ts: -------------------------------------------------------------------------------- 1 | import { FormikProps } from "formik"; 2 | 3 | export type IFormikProps = FormikProps<{ 4 | firstName: string; 5 | lastName: string; 6 | email: string; 7 | profile: string; 8 | }>; 9 | 10 | export interface IInputProps { 11 | formik: IFormikProps; 12 | } 13 | 14 | export interface IFileInputProps extends IInputProps { 15 | handleProfileChange: ( 16 | e: React.ChangeEvent, 17 | formik: IFormikProps, 18 | ) => void; 19 | } 20 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/AuthPages/Logout/Logout.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import styled from "styled-components"; 3 | import { Link } from "react-router-dom"; 4 | 5 | import { appLogout } from "../../../slices/loginSlice"; 6 | import { useAppDispatch } from "../../../hooks"; 7 | 8 | const StyledLogout = styled.div` 9 | display: grid; 10 | place-items: center; 11 | min-height: 100vh; 12 | header { 13 | text-align: center; 14 | } 15 | h3 { 16 | text-decoration: underline; 17 | &:hover { 18 | color: blue; 19 | } 20 | } 21 | `; 22 | 23 | const Logout = () => { 24 | const dispatch = useAppDispatch(); 25 | 26 | useEffect(() => { 27 | dispatch(appLogout()); 28 | }, []); 29 | 30 | return ( 31 | 32 |
33 |

You are logged out

34 |

35 | Login Again 36 |

37 |
38 | 39 | ); 40 | }; 41 | 42 | export default Logout; 43 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable tsdoc/syntax */ 2 | import React from "react"; 3 | import { Outlet } from "react-router-dom"; 4 | 5 | import { Navbar, Header } from "../../containers"; 6 | import classes from "./homePage.styles.module.css"; 7 | import { useThemeContext } from "../../contexts/ThemeContext"; 8 | 9 | /** 10 | * @purpose - For checking the functionality of dynamic imports 11 | */ 12 | 13 | // import("../../components/Buttons/ShowButton/ShowButton") 14 | // .then((a) => { 15 | // const { default: ShowButton } = a; 16 | // console.log(ShowButton()); 17 | // console.log(a); 18 | // }) 19 | // .catch((err) => console.error("An error occured while loading the module")); 20 | 21 | const HomePage = () => { 22 | const { mode } = useThemeContext(); 23 | 24 | return ( 25 |
26 | 27 |
28 | 29 |
30 | ); 31 | }; 32 | 33 | export default HomePage; 34 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/HomePage/homePage.styles.module.css: -------------------------------------------------------------------------------- 1 | .dark { 2 | background-color: #16161a; 3 | color: #fffffe; 4 | } 5 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/pages/index.ts: -------------------------------------------------------------------------------- 1 | import HomePage from "./HomePage/HomePage"; 2 | import Login from "./AuthPages/Login/Login"; 3 | import Logout from "./AuthPages/Logout/Logout"; 4 | 5 | export { HomePage, Login, Logout }; 6 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from "web-vitals"; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/routes/ProtectedRoute.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | import { Navigate } from "react-router-dom"; 3 | import { useAppSelector } from "../hooks"; 4 | 5 | type Props = { children: ReactNode }; 6 | 7 | const ProtectedRoute = ({ children }: Props) => { 8 | const isLoggedIn = useAppSelector((state) => state.login.isLoggedIn); 9 | 10 | if (!isLoggedIn) { 11 | return ; 12 | } else { 13 | return <>{children}; 14 | } 15 | }; 16 | 17 | export default ProtectedRoute; 18 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/services/index.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | import { IUser } from "../types"; 4 | import { AvengersIds } from "../containers/Members/membersData"; 5 | 6 | const endpoint = "https://api.github.com/users/"; 7 | 8 | const getUserData = (): Promise => { 9 | const responsePromiseArray = axios.all( 10 | AvengersIds.map((avenger) => 11 | axios.get(`${endpoint}${avenger.id}`).then((res) => res.data), 12 | ), 13 | ); 14 | return responsePromiseArray; 15 | }; 16 | 17 | const getUserSearchResults = (selectedCity: string): Promise => { 18 | return axios 19 | .get(`https://api.github.com/search/users?q=location%3A${selectedCity}`) 20 | .then((response) => response.data?.items); 21 | }; 22 | 23 | export { getUserData, getUserSearchResults }; 24 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/slices/loginSlice.ts: -------------------------------------------------------------------------------- 1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit"; 2 | 3 | interface IUser { 4 | firstName?: string; 5 | lastName?: string; 6 | email?: string; 7 | profile?: string; 8 | } 9 | interface ILoginInitialState { 10 | isLoggedIn: boolean; 11 | user: IUser | null; 12 | } 13 | 14 | const initialState = { 15 | isLoggedIn: false, 16 | user: null, 17 | } as ILoginInitialState; 18 | 19 | /** 20 | * * Types are always inferred from initial state 21 | */ 22 | 23 | const loginSlice = createSlice({ 24 | name: "login", 25 | initialState, 26 | reducers: { 27 | appLogin(state, action: PayloadAction) { 28 | state.isLoggedIn = true; 29 | state.user = action.payload; 30 | }, 31 | appLogout(state) { 32 | state.isLoggedIn = false; 33 | state.user = null; 34 | }, 35 | }, 36 | }); 37 | 38 | export const { appLogin, appLogout } = loginSlice.actions; 39 | 40 | export default loginSlice.reducer; 41 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | 3 | import loginReducer from "../slices/loginSlice"; 4 | 5 | const appStore = configureStore({ 6 | reducer: { 7 | login: loginReducer, 8 | }, 9 | }); 10 | 11 | export default appStore; 12 | 13 | export type RootState = ReturnType; 14 | 15 | export type AppDispatch = typeof appStore.dispatch; 16 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface IUser { 2 | avatar_url: string; 3 | name: string; 4 | login: string; 5 | html_url: string; 6 | bio: string; 7 | followers: string; 8 | following: string; 9 | company: string; 10 | location: string; 11 | blog: string; 12 | email: string; 13 | id: number; 14 | } 15 | -------------------------------------------------------------------------------- /Day12/github-api-project-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /Day13/README.md: -------------------------------------------------------------------------------- 1 | #### To configure react-testing library 2 | 3 | 1. install RTL 4 | `npm install --save-dev @testing-library/react` 5 | 6 | 2. install jest 7 | `npm i -D jest` 8 | 9 | 3. initialise jest 10 | `npx jest init` 11 | -------------------------------------------------------------------------------- /Day2/babelTranspiler/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /Day2/babelTranspiler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "babeltranspiler", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@babel/cli": "^7.19.3", 14 | "@babel/core": "^7.20.2", 15 | "@babel/preset-env": "^7.20.2", 16 | "@babel/preset-react": "^7.18.6" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Day2/babelTranspiler/src/index.js: -------------------------------------------------------------------------------- 1 | const displayHelloMessage = () => { 2 | console.log("Hello World!"); 3 | }; 4 | -------------------------------------------------------------------------------- /Day2/react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day2/react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 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 | -------------------------------------------------------------------------------- /Day2/react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-app/public/favicon.ico -------------------------------------------------------------------------------- /Day2/react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-app/public/logo192.png -------------------------------------------------------------------------------- /Day2/react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-app/public/logo512.png -------------------------------------------------------------------------------- /Day2/react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day2/react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day2/react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Day2/react-app/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 | -------------------------------------------------------------------------------- /Day2/react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day2/react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day2/react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day2/react-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day2/react-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-typescript-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.3", 11 | "@types/react": "^18.0.25", 12 | "@types/react-dom": "^18.0.9", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.3", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-typescript-app/public/favicon.ico -------------------------------------------------------------------------------- /Day2/react-typescript-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-typescript-app/public/logo192.png -------------------------------------------------------------------------------- /Day2/react-typescript-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day2/react-typescript-app/public/logo512.png -------------------------------------------------------------------------------- /Day2/react-typescript-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | logo 10 |

11 | Edit src/App.tsx and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/src/setupTests.ts: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Day2/react-typescript-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Day2/withParcel/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | node_modules 3 | 4 | dist 5 | 6 | .parcel-cache -------------------------------------------------------------------------------- /Day2/withParcel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "withparcel", 3 | "version": "1.0.0", 4 | "description": "", 5 | "source": "src/index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "parcel", 9 | "build": "parcel build" 10 | }, 11 | "keywords": [], 12 | "author": "Ajay", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "parcel": "^2.8.0", 16 | "process": "^0.11.10" 17 | }, 18 | "dependencies": { 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /Day2/withParcel/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React app bundled by parcel 8 | 9 | 10 | 11 |
Not Rendered
12 | 13 | 14 | -------------------------------------------------------------------------------- /Day2/withParcel/src/script.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | const createReactElement = React.createElement; 5 | const createReactRoot = ReactDOM.createRoot; 6 | const rootDOMElement = document.querySelector("#root"); 7 | 8 | /** 9 | * @params {String} JSX Element 10 | * @params {Object} props 11 | * @params {React Element/ Array of React Element} children 12 | * @returns React Element 13 | */ 14 | //Added two children, an array of two objects in props 15 | const element = createReactElement( 16 | "div", 17 | { myprops: { name: "Ajay", age: 22, children: "Ajay" } }, 18 | [ 19 | createReactElement( 20 | "h1", 21 | { myprops: { name: "Asha Bhosle" } }, 22 | `I am created with Reactjs` 23 | ), 24 | "Hello, I am the next react child", 25 | ] 26 | ); 27 | 28 | const rootOfApplication = createReactRoot(rootDOMElement); 29 | rootOfApplication.render(element); 30 | -------------------------------------------------------------------------------- /Day2/withWebpack/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | node_modules 3 | 4 | dist -------------------------------------------------------------------------------- /Day2/withWebpack/README.md: -------------------------------------------------------------------------------- 1 | ## Commands for Webpack Bundler 2 | 3 | ``` 4 | npm install react react-dom 5 | ``` 6 | 7 | ``` 8 | npm install webpack webpack-cli webpack-dev-server --save-dev 9 | ``` 10 | 11 | ``` 12 | npm install html-webpack-plugin --save-dev 13 | ``` 14 | 15 | ``` 16 | npm install @babel/core babel-loader --save-dev 17 | ``` 18 | 19 | ``` 20 | npm install @babel/preset-env @babel/preset-react --save-dev 21 | ``` 22 | 23 | ``` 24 | "scripts": { 25 | "dev": "webpack serve", 26 | "build": "webpack", 27 | ... 28 | } 29 | 30 | ``` 31 | 32 | ``` 33 | npm run dev 34 | npm run build 35 | ``` 36 | -------------------------------------------------------------------------------- /Day2/withWebpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "withwebpack", 3 | "version": "1.0.0", 4 | "description": "React Project made using webpack bundler", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack serve", 8 | "build": "webpack", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "keywords": [ 12 | "React" 13 | ], 14 | "author": "Ajay Pathak", 15 | "license": "ISC", 16 | "dependencies": { 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.20.2", 22 | "@babel/preset-env": "^7.20.2", 23 | "@babel/preset-react": "^7.18.6", 24 | "babel-loader": "^9.1.0", 25 | "html-webpack-plugin": "^5.5.0", 26 | "webpack": "^5.75.0", 27 | "webpack-cli": "^5.0.0", 28 | "webpack-dev-server": "^4.11.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Day2/withWebpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React App Made Using Webpack 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Day2/withWebpack/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | //creating a heading react element to render 5 | const heading = React.createElement( 6 | "h1", 7 | { atrribute: "reactElement" }, 8 | "Hello React" 9 | ); 10 | 11 | // creating a root element which will render through react 12 | const root = ReactDOM.createRoot(document.getElementById("myrootelement")); 13 | 14 | root.render(heading); 15 | -------------------------------------------------------------------------------- /Day2/withWebpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | // to join directory path to src/index.js and define entrypoint to webpack to bundle 6 | entry: path.join(__dirname, "src", "index.js"), 7 | // to define output folder name and path where bundled files will go 8 | output: { 9 | path: path.resolve(__dirname, "dist"), 10 | }, 11 | mode: "production", 12 | devServer: { 13 | port: 3002, 14 | historyApiFallback: true, 15 | }, 16 | // our arc/index.html file will be injected with the script created inside dist folder 17 | plugins: [ 18 | new HtmlWebpackPlugin({ 19 | title: "Project created with react and webpack bundler", 20 | template: path.join(__dirname, "src", "index.html"), 21 | }), 22 | ], 23 | // to add rules while transpiling modules 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.?js$/, 28 | exclude: /node_modules/, 29 | use: { 30 | loader: "babel-loader", 31 | options: { 32 | presets: ["@babel/preset-env", "@babel/preset-react"], 33 | }, 34 | }, 35 | }, 36 | ], 37 | }, 38 | performance: { 39 | hints: false, 40 | maxEntrypointSize: 512000, 41 | maxAssetSize: 512000, 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/README.md: -------------------------------------------------------------------------------- 1 | npm i --save-dev typescript 2 | npm i --save-dev ts-node 3 | npx tsc --init 4 | npm i --save-dev webpack webpack-cli webpack-dev-server css-loader html-webpack-plugin mini-css-extract-plugin ts-loader 5 | npm i react react-dom 6 | npm i --save-dev @types/react @types/react-dom 7 | npm run build 8 | npx serve dist 9 | npm i core-js raf whatwg-fetch 10 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello React 5 | 6 | 7 |
React App is loading...
8 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-typescript-react", 3 | "version": "1.0.0", 4 | "description": "TypeScript React app bundled with webpack", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack serve --port 3000", 9 | "build": "NODE_ENV=production webpack" 10 | }, 11 | "keywords": [ 12 | "React", 13 | "TypeScript" 14 | ], 15 | "author": "Ajay Pathak", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "@types/react": "^18.0.25", 19 | "@types/react-dom": "^18.0.9", 20 | "css-loader": "^6.7.2", 21 | "html-webpack-plugin": "^5.5.0", 22 | "mini-css-extract-plugin": "^2.7.0", 23 | "ts-loader": "^9.4.1", 24 | "ts-node": "^10.9.1", 25 | "typescript": "^4.9.3", 26 | "webpack": "^5.75.0", 27 | "webpack-cli": "^5.0.0", 28 | "webpack-dev-server": "^4.11.1" 29 | }, 30 | "dependencies": { 31 | "core-js": "^3.26.1", 32 | "raf": "^3.4.1", 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "whatwg-fetch": "^3.6.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | min-height: 100vh; 5 | background-color: rgb(166, 170, 170); 6 | color: rgb(50, 31, 18); 7 | } 8 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/src/index.tsx: -------------------------------------------------------------------------------- 1 | import "core-js/features/array/flat-map"; 2 | import "core-js/features/map"; 3 | import "core-js/features/promise"; 4 | import "core-js/features/set"; 5 | import "raf/polyfill"; 6 | import "whatwg-fetch"; 7 | 8 | import React from "react"; 9 | import { createRoot } from "react-dom/client"; 10 | import "./index.css"; 11 | 12 | const container = document.getElementById("app-root")!; 13 | const root = createRoot(container); 14 | root.render(

Hello React!

); 15 | -------------------------------------------------------------------------------- /Day2/withWebpackTypeScript/webpack.config.js: -------------------------------------------------------------------------------- 1 | const prod = process.env.NODE_ENV === 'production'; 2 | 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | 6 | module.exports = { 7 | mode: prod ? 'production' : 'development', 8 | entry: './src/index.tsx', 9 | output: { 10 | path: __dirname + '/dist/', 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.(ts|tsx)$/, 16 | exclude: /node_modules/, 17 | resolve: { 18 | extensions: ['.ts', '.tsx', '.js', '.json'], 19 | }, 20 | use: 'ts-loader', 21 | }, 22 | { 23 | test: /\.css$/, 24 | use: [MiniCssExtractPlugin.loader, 'css-loader'], 25 | }, 26 | ] 27 | }, 28 | devtool: prod ? undefined : 'source-map', 29 | plugins: [ 30 | new HtmlWebpackPlugin({ 31 | template: 'index.html', 32 | }), 33 | new MiniCssExtractPlugin(), 34 | ], 35 | }; 36 | -------------------------------------------------------------------------------- /Day3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "source": "src/index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "parcel", 9 | "build": "parcel build" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "parcel": "^2.8.0", 20 | "process": "^0.11.10" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Day3/src/Headings.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Function Component with composition 4 | const Heading1 = () =>

Namaste React

; 5 | const Heading2 = () =>

A right learning bootcamp

; 6 | const Heading3 = () =>

To learn indepth Reactjs

; 7 | 8 | const Headings = () => { 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default Headings; 19 | -------------------------------------------------------------------------------- /Day3/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import image from "./assets/logo.png"; 4 | 5 | const Navbar = () => { 6 | return ( 7 |
8 |
9 | 10 |
11 |
12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | ); 20 | }; 21 | 22 | export default Navbar; 23 | -------------------------------------------------------------------------------- /Day3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day3/src/assets/logo.png -------------------------------------------------------------------------------- /Day3/src/assets/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day3/src/assets/project.png -------------------------------------------------------------------------------- /Day3/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learning JSX 8 | 9 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Day4and5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "source": "./public/index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "parcel", 9 | "build": "parcel build ./public/index.html --dist-dir build" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "netlify-cli": "^12.2.7", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0" 18 | }, 19 | "devDependencies": { 20 | "parcel": "^2.8.0", 21 | "process": "^0.11.10" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Day4and5/public/avengers-logo-files/png/logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day4and5/public/avengers-logo-files/png/logo-black.png -------------------------------------------------------------------------------- /Day4and5/public/avengers-logo-files/png/logo-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day4and5/public/avengers-logo-files/png/logo-color.png -------------------------------------------------------------------------------- /Day4and5/public/avengers-logo-files/png/logo-no-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day4and5/public/avengers-logo-files/png/logo-no-background.png -------------------------------------------------------------------------------- /Day4and5/public/avengers-logo-files/png/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day4and5/public/avengers-logo-files/png/logo-white.png -------------------------------------------------------------------------------- /Day4and5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Team Avengers 8 | 9 | 10 | 11 | 15 | 16 | 20 | 21 | 22 | 23 | 24 |
Loading...
25 | 26 | 27 | -------------------------------------------------------------------------------- /Day4and5/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./App.styles.css"; 4 | import HomePage from "./pages/HomePage/HomePage"; 5 | 6 | // COMPONENT THAT RENDERS ALL THE PAGES 7 | const app = () => { 8 | return ( 9 | <> 10 | 11 | 12 | ); 13 | }; 14 | 15 | export default app; 16 | -------------------------------------------------------------------------------- /Day4and5/src/App.styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | * * Added these fonts of Roboto 3 | * * Thin 100 4 | * * Light 300 5 | * * Regular 400 6 | * * Medium 500 7 | */ 8 | 9 | * { 10 | box-sizing: border-box; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | body { 16 | font-family: "Poppins", sans-serif; 17 | font-family: "Roboto", sans-serif; 18 | } 19 | 20 | img { 21 | display: block; 22 | width: 100%; 23 | } 24 | -------------------------------------------------------------------------------- /Day4and5/src/components/Card/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import * as classes from "./Card.styles.module.css"; 4 | 5 | const card = ({ singleData: data }) => ( 6 |
7 |
8 | {`${data.name}'s 16 |
17 |
18 |
19 |

{data.name}

20 |
21 |

{data.place}

22 |

{data.company}

23 |

{data.designation}

24 |
25 |
26 | ); 27 | 28 | export default card; 29 | -------------------------------------------------------------------------------- /Day4and5/src/components/Cards/Cards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import * as classes from "./Cards.styles.module.css"; 4 | import Card from "../Card/Card"; 5 | 6 | const cards = ({ Data }) => ( 7 |
8 | {Data.map((singleData) => { 9 | return ; 10 | })} 11 |
12 | ); 13 | 14 | export default cards; 15 | -------------------------------------------------------------------------------- /Day4and5/src/components/Cards/Cards.styles.module.css: -------------------------------------------------------------------------------- 1 | .card__container { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 4 | gap: 2rem; 5 | } 6 | -------------------------------------------------------------------------------- /Day4and5/src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import * as classes from "./Header.styles.module.css"; 4 | 5 | const header = () => ( 6 |
7 |
8 |

Avengers

9 |

Team A

10 |
11 | ); 12 | 13 | export default header; 14 | -------------------------------------------------------------------------------- /Day4and5/src/components/Header/Header.styles.module.css: -------------------------------------------------------------------------------- 1 | .banner__container { 2 | background: rgb(174, 238, 218); 3 | display: grid; 4 | margin-bottom: 1rem; 5 | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 6 | } 7 | 8 | .banner__container h3 { 9 | padding: 0.8rem 0; 10 | padding-bottom: 0.3rem; 11 | font-size: 4rem; 12 | letter-spacing: 4px; 13 | font-weight: 700; 14 | color: #333232; 15 | text-align: center; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | text-transform: uppercase; 21 | } 22 | 23 | .banner__container p { 24 | padding-top: 0.2rem; 25 | margin-bottom: 2rem; 26 | font-size: 2rem; 27 | letter-spacing: 4px; 28 | font-weight: 700; 29 | color: #333232b0; 30 | text-align: center; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | justify-content: center; 35 | text-transform: uppercase; 36 | } 37 | 38 | .team__info { 39 | margin: 3rem auto; 40 | height: 30vh; 41 | width: 80vw; 42 | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 43 | background: linear-gradient( 44 | 90deg, 45 | rgba(174, 238, 218, 1) 0%, 46 | rgba(45, 117, 107, 0.1558998599439776) 100% 47 | ), 48 | url("../../../public/avengers-logo-files/png/logo-no-background.png") 49 | center/cover no-repeat; 50 | } 51 | -------------------------------------------------------------------------------- /Day4and5/src/components/SearchComponent/Search.styles.module.css: -------------------------------------------------------------------------------- 1 | input[type="text"]::placeholder { 2 | margin-top: 2px; 3 | font-size: 1rem; 4 | } 5 | 6 | input[type="text"] { 7 | margin-top: 2px; 8 | font-size: 1.5rem; 9 | } 10 | 11 | .search__bar { 12 | font-size: 2rem; 13 | display: flex; 14 | align-items: center; 15 | background-color: #e2e8f0; 16 | padding: 12px; 17 | width: 40%; 18 | justify-self: center; 19 | margin: 2rem auto; 20 | border-radius: 10px; 21 | } 22 | 23 | .search__bar input { 24 | background-color: #e2e8f0; 25 | border: none; 26 | color: #334155; 27 | padding: 0 4px; 28 | height: 2rem; 29 | width: 80%; 30 | border-radius: 10px; 31 | display: flex; 32 | align-items: center; 33 | justify-items: center; 34 | text-align: center; 35 | } 36 | 37 | .search__bar input::placeholder { 38 | color: #334155; 39 | font-size: 1.5rem; 40 | padding-left: 1rem; 41 | } 42 | 43 | .search__icon__container { 44 | padding: 0 1rem; 45 | display: grid; 46 | place-items: center; 47 | } 48 | 49 | .fa-solid { 50 | font-size: 1.4rem; 51 | } 52 | 53 | /* removing outline */ 54 | .search__bar input:focus { 55 | outline: none; 56 | } 57 | -------------------------------------------------------------------------------- /Day4and5/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const myRootElement = document.getElementById("root"); 7 | 8 | const reactRootElement = ReactDOM.createRoot(myRootElement); 9 | console.log(useState); 10 | 11 | const RootJsxElement = () => ( 12 | 13 | 14 | 15 | ); 16 | 17 | reactRootElement.render(); 18 | -------------------------------------------------------------------------------- /Day4and5/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import Cards from "../../components/Cards/Cards"; 4 | import Header from "../../components/Header/Header"; 5 | import Search from "../../components/SearchComponent/Search"; 6 | 7 | import Data from "../../pages/HomePage/AvengersData.json"; 8 | 9 | const homePage = () => { 10 | const [avengersData, setAvengersData] = useState(Data); 11 | 12 | return ( 13 | <> 14 |
15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default homePage; 22 | -------------------------------------------------------------------------------- /Day4and5/src/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utility function to filter the searched data out of the array of state 3 | * @param {Array} Data 4 | * @param {string} parameter 5 | * @returns {Array} 6 | */ 7 | export const filterValues = (Data, parameter) => { 8 | const searchParam = parameter.toLowerCase(); 9 | const searchParamRegex = new RegExp(searchParam, "g"); // adding global regex expression 10 | 11 | return Data.filter((singleData) => 12 | searchParamRegex.test(singleData.name.toLowerCase()) 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/.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 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/README.md: -------------------------------------------------------------------------------- 1 | # Namaste-React 2 | 3 | ## Assignment-6-TS 4 | 5 | Assignment to make a github user API using webpage to render info about user 6 | 7 | ## Author 8 | 9 | #### Ajay Pathak 10 | 11 | - Twitter: [@Pathkbndhu_navo](https://twitter.com/Pathkbndhu_navo) 12 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-api-project-ts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.4", 11 | "@types/react": "^18.0.25", 12 | "@types/react-dom": "^18.0.9", 13 | "axios": "^1.2.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-icons": "^4.7.1", 17 | "react-scripts": "5.0.1", 18 | "typescript": "^4.9.3", 19 | "web-vitals": "^2.1.4" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day6/github-api-project-ts/public/favicon.ico -------------------------------------------------------------------------------- /Day6/github-api-project-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Team Avengers 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day6/github-api-project-ts/public/logo192.png -------------------------------------------------------------------------------- /Day6/github-api-project-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day6/github-api-project-ts/public/logo512.png -------------------------------------------------------------------------------- /Day6/github-api-project-ts/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 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { HomePage } from "./pages"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/assets/icons/index.js: -------------------------------------------------------------------------------- 1 | import { FaBuilding, FaLink } from "react-icons/fa"; 2 | import { MdLocationOn, MdEmail } from "react-icons/md"; 3 | import { BsPeopleFill } from "react-icons/bs"; 4 | import { RiUserFollowFill } from "react-icons/ri"; 5 | 6 | export { 7 | FaLink, 8 | FaBuilding, 9 | MdEmail, 10 | RiUserFollowFill, 11 | BsPeopleFill, 12 | MdLocationOn, 13 | }; 14 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/assets/images/logo-no-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day6/github-api-project-ts/src/assets/images/logo-no-background.png -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Card from "./Card/Card"; 2 | 3 | export { Card }; 4 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "./header.styles.module.css"; 4 | 5 | type Props = {}; 6 | 7 | const Header = (props: Props) => { 8 | return ( 9 |
10 |
11 |
12 | ); 13 | }; 14 | 15 | export default Header; 16 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/Header/header.styles.module.css: -------------------------------------------------------------------------------- 1 | .banner__container { 2 | background: #399999; 3 | display: grid; 4 | margin-bottom: 1rem; 5 | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 6 | } 7 | 8 | .banner__container h3 { 9 | padding: 0.8rem 0; 10 | padding-bottom: 0.3rem; 11 | font-size: 4rem; 12 | letter-spacing: 4px; 13 | font-weight: 700; 14 | color: #333232; 15 | text-align: center; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | text-transform: uppercase; 21 | } 22 | 23 | .banner__container p { 24 | padding-top: 0.2rem; 25 | margin-bottom: 2rem; 26 | font-size: 2rem; 27 | letter-spacing: 4px; 28 | font-weight: 700; 29 | color: #333232b0; 30 | text-align: center; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | justify-content: center; 35 | text-transform: uppercase; 36 | } 37 | 38 | .team__info { 39 | margin: 3rem auto; 40 | height: 30vh; 41 | width: 80vw; 42 | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 43 | background: linear-gradient( 44 | 90deg, 45 | #399999dd 0%, 46 | rgba(45, 117, 107, 0.223) 90% 47 | ), 48 | url("../../assets/images/logo-no-background.png") center/cover no-repeat; 49 | } 50 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/Members/member.styles.module.css: -------------------------------------------------------------------------------- 1 | .member__container { 2 | margin-top: 4rem; 3 | display: grid; 4 | grid-template-columns: repeat(2, 1fr); 5 | } 6 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/Members/membersData.ts: -------------------------------------------------------------------------------- 1 | export const AvengersIds = [ 2 | { 3 | "@@uuid": "1", 4 | id: "akshaymarch7", 5 | }, 6 | { 7 | "@@uuid": "2", 8 | id: "ap221882", 9 | }, 10 | // { 11 | // "@@uuid": "3", 12 | // id: "balajigaikwad", 13 | // }, 14 | // { 15 | // "@@uuid": "4", 16 | // id: "ChaitraMalali", 17 | // }, 18 | // { 19 | // "@@uuid": "5", 20 | // id: "roshantrivedi", 21 | // }, 22 | // { 23 | // "@@uuid": "6", 24 | // id: "vijeshnk", 25 | // }, 26 | // { 27 | // "@@uuid": "7", 28 | // id: "Pujarini", 29 | // }, 30 | // { 31 | // "@@uuid": "8", 32 | // id: "MallikarjunnKB", 33 | // }, 34 | // { 35 | // "@@uuid": "9", 36 | // id: "laxmi20936", 37 | // }, 38 | // { 39 | // "@@uuid": "10", 40 | // id: "iamkirti", 41 | // }, 42 | // { 43 | // "@@uuid": "11", 44 | // id: "nitishnivedan", 45 | // }, 46 | // { 47 | // "@@uuid": "12", 48 | // id: "GouravGoswami22", 49 | // }, 50 | ]; 51 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/NavBar/Navbar.styles.module.css: -------------------------------------------------------------------------------- 1 | nav { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: var(--nav-color); 6 | padding: 1.5rem; 7 | } 8 | 9 | .user__img__container { 10 | border-radius: 50%; 11 | padding-right: 2rem; 12 | display: flex; 13 | justify-content: center; 14 | } 15 | 16 | .nav__heading span { 17 | text-transform: uppercase; 18 | font-weight: 600; 19 | } 20 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/NavBar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { FaUserSecret } from "react-icons/fa"; 4 | import classes from "./Navbar.styles.module.css"; 5 | 6 | type Props = {}; 7 | 8 | const Navbar = (props: Props) => { 9 | return ( 10 | 18 | ); 19 | }; 20 | 21 | export default Navbar; 22 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/containers/index.ts: -------------------------------------------------------------------------------- 1 | import Header from "./Header/Header"; 2 | import Navbar from "./NavBar/Navbar"; 3 | import Members from "./Members/Members"; 4 | 5 | export { Header, Navbar, Members }; 6 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/pages/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Navbar, Header, Members } from "../../containers"; 4 | 5 | type Props = {}; 6 | 7 | const HomePage = (props: Props) => { 8 | return ( 9 | <> 10 | 11 |
12 | 13 | 14 | ); 15 | }; 16 | 17 | export default HomePage; 18 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/pages/index.ts: -------------------------------------------------------------------------------- 1 | import HomePage from "./HomePage/HomePage"; 2 | 3 | export { HomePage }; 4 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/services/index.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { IUser } from "../types"; 3 | 4 | const endpoint = "https://api.github.com/users/"; 5 | 6 | interface IUserDataResponse { 7 | data: IUser; 8 | } 9 | 10 | const getUserData = (user: string): Promise => 11 | axios.get(`${endpoint}${user}`); 12 | 13 | export { getUserData }; 14 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface IUser { 2 | avatar_url: string; 3 | name: string; 4 | login: string; 5 | html_url: string; 6 | bio: string; 7 | followers: string; 8 | following: string; 9 | company: string; 10 | location: string; 11 | blog: string; 12 | email: string; 13 | id: number; 14 | } 15 | -------------------------------------------------------------------------------- /Day6/github-api-project-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended", 10 | "plugin:@typescript-eslint/recommended", 11 | "plugin:prettier/recommended" 12 | ], 13 | "overrides": [], 14 | "parser": "@typescript-eslint/parser", 15 | "parserOptions": { 16 | "ecmaVersion": "latest", 17 | "sourceType": "module" 18 | }, 19 | "plugins": ["react", "@typescript-eslint"], 20 | "rules": { 21 | "react/react-in-jsx-scope": "off" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/.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 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 2, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, 3 | "editor.formatOnSave": true, 4 | "eslint.alwaysShowStatus": true, 5 | "files.autoSave": "onFocusChange" 6 | } 7 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/README.md: -------------------------------------------------------------------------------- 1 | # Namaste-React 2 | 3 | ## Assignment-7-8-9-10-TS 4 | 5 | Assignment to make a webpage using github user API to render info about user 6 | 7 | ## Author 8 | 9 | #### Ajay Pathak 10 | 11 | - Twitter: [@Pathkbndhu_navo](https://twitter.com/Pathkbndhu_navo) 12 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day7n8n9n10/github-api-project-ts/public/favicon.ico -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Team Avengers 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day7n8n9n10/github-api-project-ts/public/logo192.png -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day7n8n9n10/github-api-project-ts/public/logo512.png -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/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 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/assets/icons/index.ts: -------------------------------------------------------------------------------- 1 | import { FaBuilding, FaLink } from "react-icons/fa"; 2 | import { MdLocationOn, MdEmail } from "react-icons/md"; 3 | import { BsPeopleFill } from "react-icons/bs"; 4 | import { RiUserFollowFill } from "react-icons/ri"; 5 | import { BsSun } from "react-icons/bs"; 6 | import { TbMoonStars } from "react-icons/tb"; 7 | import { FaUserSecret } from "react-icons/fa"; 8 | 9 | export { 10 | FaLink, 11 | FaBuilding, 12 | MdEmail, 13 | RiUserFollowFill, 14 | BsPeopleFill, 15 | MdLocationOn, 16 | BsSun, 17 | TbMoonStars, 18 | FaUserSecret, 19 | }; 20 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/assets/images/logo-no-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/Day7n8n9n10/github-api-project-ts/src/assets/images/logo-no-background.png -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/Buttons/ShowButton/NavigationButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | import classes from "./navigationButton.styles.module.css"; 5 | 6 | type Props = { 7 | buttonText: string; 8 | navigateTo: string; 9 | }; 10 | 11 | const NavigationButton = ({ buttonText, navigateTo }: Props) => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default NavigationButton; 20 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/Buttons/ShowButton/navigationButton.styles.module.css: -------------------------------------------------------------------------------- 1 | .show__button { 2 | display: grid; 3 | place-items: center; 4 | margin: 6rem auto; 5 | padding: 1rem 3rem; 6 | background-color: var(--grey-400); 7 | box-shadow: var(--shadow-2); 8 | cursor: pointer; 9 | transition: var(--transition); 10 | } 11 | 12 | .show__button:hover { 13 | transform: scale(1.1); 14 | } 15 | 16 | .show__button a { 17 | color: var(--primary-700); 18 | } 19 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/ErrorPage/ErrorPage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useRouteError } from "react-router-dom"; 3 | 4 | import "./errors.css"; 5 | 6 | const ErrorPage = () => { 7 | const error: any = useRouteError(); 8 | return ( 9 |
10 |

Oops!

11 |
12 |

Sorry, an unexpected error has occured.

13 |

14 | {error.statusText || error.message} 15 |

16 |

17 | {error.status} 18 |

19 |
20 |
21 | ); 22 | }; 23 | 24 | export default ErrorPage; 25 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/ErrorPage/errors.css: -------------------------------------------------------------------------------- 1 | .error__page { 2 | text-align: center; 3 | } 4 | 5 | .error__page > article > p { 6 | margin: 1rem auto; 7 | } 8 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/Loader/Loader.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./loader.styles.module.css"; 2 | 3 | const Loader = () => { 4 | return ( 5 |
6 |
7 |
8 | ); 9 | }; 10 | 11 | export default Loader; 12 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/Loader/loader.styles.module.css: -------------------------------------------------------------------------------- 1 | .loader__container { 2 | min-height: 30rem; 3 | } 4 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/Select/Option.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | value: string; 3 | children: string; 4 | }; 5 | 6 | const Option = ({ value }: Props) => { 7 | return ( 8 | 11 | ); 12 | }; 13 | 14 | export default Option; 15 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/SelectByCity/SelectHeading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Heading from "../../containers/SearchGithubUsers/SearchGithubUsersUI/Heading"; 4 | import classes from "./selectByCity.styles.module.css"; 5 | 6 | type Props = { 7 | isDark: boolean; 8 | }; 9 | 10 | const SelectHeading = ({ isDark }: Props) => { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | }; 17 | 18 | export default SelectHeading; 19 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/SelectByCity/selectByCity.styles.module.css: -------------------------------------------------------------------------------- 1 | .select__container { 2 | text-align: center; 3 | } 4 | 5 | .dark_header { 6 | color: var(--grey-500); 7 | } 8 | 9 | .select__container > select { 10 | box-shadow: var(--shadow-2); 11 | padding: 0.5rem 2rem; 12 | margin: 2rem; 13 | min-width: 15rem; 14 | max-width: 40rem; 15 | border: 1px solid var(--select-border); 16 | border-radius: 0.25em; 17 | padding: 0.25em 0.5em; 18 | font-size: 1.25rem; 19 | cursor: pointer; 20 | line-height: 1.1; 21 | } 22 | 23 | .select__header { 24 | margin-top: 2rem; 25 | } 26 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Card from "./Card/Card"; 2 | import NavigationButton from "./Buttons/ShowButton/NavigationButton"; 3 | import Loader from "./Loader/Loader"; 4 | import ErrorPage from "./ErrorPage/ErrorPage"; 5 | import SelectByCity from "./SelectByCity/SelectByCity"; 6 | 7 | export { Card, Loader, NavigationButton, ErrorPage, SelectByCity }; 8 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "./header.styles.module.css"; 4 | import ClassBasedComponent1 from "../../miscellaneous/ParentClassBasedComponent"; 5 | import { useThemeContext } from "../../contexts/ThemeContext"; 6 | 7 | const Header = () => { 8 | const { mode } = useThemeContext(); 9 | return ( 10 |
15 |
16 | {/* */} 17 |
18 | ); 19 | }; 20 | 21 | export default Header; 22 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/MemberInfo/MemberInfo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | import classes from "./memberInfo.module.css"; 5 | 6 | const MemberInfo = () => { 7 | const { id } = useParams(); 8 | return ( 9 |
10 |
11 |
MemberInfo
12 |
{id}
13 |
14 |
15 | {`readme-stats-${id}`} 20 | {`ongoing-streak-${id}`} 25 | {`most-used-languages-${id}`} 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default MemberInfo; 36 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/MemberInfo/memberInfo.module.css: -------------------------------------------------------------------------------- 1 | .info__container { 2 | margin: 1rem auto; 3 | text-align: center; 4 | } 5 | 6 | .info__container > header { 7 | font-size: 2rem; 8 | font-weight: 600; 9 | } 10 | .info__container > div { 11 | font-size: 1rem; 12 | font-weight: 300; 13 | } 14 | 15 | .image__container { 16 | display: grid; 17 | grid-template-areas: 18 | "image1 image2" 19 | "image3 image3"; 20 | grid-template-rows: repeat(2, 1fr); 21 | grid-template-columns: repeat(2, 1fr); 22 | justify-items: center; 23 | gap: 2rem; 24 | min-height: 20rem; 25 | } 26 | 27 | .image__container > img { 28 | margin: 0.5rem 0; 29 | } 30 | 31 | .stats__image { 32 | grid-area: image1; 33 | } 34 | 35 | .streak__image { 36 | grid-area: image2; 37 | } 38 | 39 | .lang__image { 40 | grid-area: image3; 41 | } 42 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/Members/member.styles.module.css: -------------------------------------------------------------------------------- 1 | .member__container { 2 | margin-top: 4rem; 3 | display: grid; 4 | grid-template-columns: repeat(2, 1fr); 5 | min-height: 20rem; 6 | } 7 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/Members/membersData.ts: -------------------------------------------------------------------------------- 1 | export const AvengersIds = [ 2 | { 3 | "@@uuid": "1", 4 | id: "akshaymarch7", 5 | }, 6 | { 7 | "@@uuid": "2", 8 | id: "ap221882", 9 | }, 10 | // { 11 | // "@@uuid": "3", 12 | // id: "balajigaikwad", 13 | // }, 14 | // { 15 | // "@@uuid": "4", 16 | // id: "ChaitraMalali", 17 | // }, 18 | // { 19 | // "@@uuid": "5", 20 | // id: "roshantrivedi", 21 | // }, 22 | // { 23 | // "@@uuid": "6", 24 | // id: "vijeshnk", 25 | // }, 26 | // { 27 | // "@@uuid": "7", 28 | // id: "Pujarini", 29 | // }, 30 | // { 31 | // "@@uuid": "8", 32 | // id: "MallikarjunnKB", 33 | // }, 34 | // { 35 | // "@@uuid": "9", 36 | // id: "laxmi20936", 37 | // }, 38 | // { 39 | // "@@uuid": "10", 40 | // id: "iamkirti", 41 | // }, 42 | // { 43 | // "@@uuid": "11", 44 | // id: "nitishnivedan", 45 | // }, 46 | // { 47 | // "@@uuid": "12", 48 | // id: "GouravGoswami22", 49 | // }, 50 | ]; 51 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/NavBar/NavBarUI/AppModeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from "react"; 2 | 3 | import classes from "../Navbar.styles.module.css"; 4 | 5 | type Props = { 6 | handler: () => void; 7 | children: ReactElement; 8 | }; 9 | 10 | const AppModeIcon = ({ handler, children }: Props) => { 11 | return ( 12 |
13 |
14 | {children} 15 |
16 |
17 | ); 18 | }; 19 | 20 | export default AppModeIcon; 21 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/NavBar/NavBarUI/NavbarHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "../Navbar.styles.module.css"; 4 | import { FaUserSecret } from "../../../assets/icons"; 5 | 6 | const NavbarHeader = () => { 7 | return ( 8 | <> 9 |
10 | 11 |
12 |
13 | Welcome to Avengers Page! 14 |
15 | 16 | ); 17 | }; 18 | 19 | export default NavbarHeader; 20 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/NavBar/NavBarUI/NavbarUi.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { TbMoonStars, BsSun } from "../../../assets/icons"; 4 | import classes from "../Navbar.styles.module.css"; 5 | import AppModeIcon from "./AppModeIcon"; 6 | import NavbarHeader from "./NavbarHeader"; 7 | 8 | type Props = { 9 | isDark: boolean; 10 | handleLightButtonClick: () => void; 11 | handleDarkButtonClick: () => void; 12 | }; 13 | 14 | const NavbarUi = ({ 15 | isDark, 16 | handleDarkButtonClick, 17 | handleLightButtonClick, 18 | }: Props) => { 19 | return ( 20 | 33 | ); 34 | }; 35 | 36 | export default NavbarUi; 37 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/NavBar/Navbar.styles.module.css: -------------------------------------------------------------------------------- 1 | nav { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: var(--nav-color); 6 | padding: 1.5rem; 7 | } 8 | 9 | .dark { 10 | background-color: #16161a; 11 | color: #babab3; 12 | } 13 | 14 | .user__img__container { 15 | border-radius: 50%; 16 | padding-right: 2rem; 17 | display: flex; 18 | justify-content: center; 19 | } 20 | 21 | .nav__heading span { 22 | text-transform: uppercase; 23 | font-weight: 600; 24 | } 25 | 26 | .mode__container { 27 | padding: 1rem; 28 | font-size: 1.2rem; 29 | } 30 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/NavBar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { useThemeContext } from "../../contexts/ThemeContext"; 4 | import NavbarUi from "./NavBarUI/NavbarUi"; 5 | 6 | const Navbar = () => { 7 | const { mode, setMode } = useThemeContext(); 8 | 9 | const handleDarkButtonClick = () => { 10 | setMode("dark"); 11 | }; 12 | 13 | const handleLightButtonClick = () => { 14 | setMode("light"); 15 | }; 16 | 17 | const isDark = mode === "dark"; 18 | 19 | return ( 20 | 25 | ); 26 | }; 27 | 28 | export default Navbar; 29 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/Navigator/Navigator.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { NavigationButton } from "../../components"; 4 | import classes from "./navigator.styles.module.css"; 5 | 6 | const Navigator = () => { 7 | return ( 8 |
9 | 10 | 14 |
15 | ); 16 | }; 17 | 18 | export default Navigator; 19 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/Navigator/navigator.styles.module.css: -------------------------------------------------------------------------------- 1 | .navigator__container { 2 | display: grid; 3 | grid-template-columns: repeat(2, 1fr); 4 | min-height: 20rem; 5 | } 6 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/SearchGithubUsers/SearchGithubUsersUI/Heading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import classes from "../searchGithubUsers.styles.module.css"; 4 | 5 | type Props = { 6 | text: string; 7 | isDark: boolean; 8 | }; 9 | 10 | const Heading = ({ isDark, text }: Props) => { 11 | return ( 12 |

{text}

13 | ); 14 | }; 15 | 16 | export default Heading; 17 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/SearchGithubUsers/searchGithubUsers.styles.module.css: -------------------------------------------------------------------------------- 1 | .search__container { 2 | text-align: center; 3 | min-height: 20rem; 4 | } 5 | 6 | .searchitem__container { 7 | margin-top: 4rem; 8 | display: grid; 9 | grid-template-columns: repeat(2, 1fr); 10 | } 11 | 12 | .searchResults__heading { 13 | margin-top: 2rem; 14 | } 15 | 16 | .dark_header { 17 | color: var(--grey-500); 18 | } 19 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/containers/index.ts: -------------------------------------------------------------------------------- 1 | import Header from "./Header/Header"; 2 | import Navbar from "./NavBar/Navbar"; 3 | import Members from "./Members/Members"; 4 | import SearchGithubUsers from "./SearchGithubUsers/SearchGithubUsers"; 5 | import MemberInfo from "./MemberInfo/MemberInfo"; 6 | import Navigator from "./Navigator/Navigator"; 7 | 8 | export { Header, Navbar, Members, SearchGithubUsers, MemberInfo, Navigator }; 9 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/contexts/ThemeContext/ThemeContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Dispatch, SetStateAction, useContext } from "react"; 2 | 3 | interface IThemeContext { 4 | mode: string; 5 | setMode: Dispatch>; 6 | } 7 | 8 | export const ThemeContext = createContext({} as IThemeContext); 9 | 10 | export const useThemeContext = () => useContext(ThemeContext); 11 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/contexts/ThemeContext/ThemeContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { ReactElement, useState } from "react"; 2 | import { ThemeContext } from "./ThemeContext"; 3 | 4 | type Props = { 5 | children: ReactElement; 6 | }; 7 | 8 | const ThemeContextProvider = ({ children }: Props) => { 9 | const [mode, setMode] = useState("light"); 10 | 11 | return ( 12 | 13 | {children} 14 | 15 | ); 16 | }; 17 | 18 | export default ThemeContextProvider; 19 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/contexts/ThemeContext/index.ts: -------------------------------------------------------------------------------- 1 | import { ThemeContext } from "./ThemeContext"; 2 | import ThemeContextProvider from "./ThemeContextProvider"; 3 | import { useThemeContext } from "./ThemeContext"; 4 | 5 | export { ThemeContext, useThemeContext, ThemeContextProvider }; 6 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/hooks/useFetchUsersByCity.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | import { getUserSearchResults } from "../services"; 4 | import { IUser } from "../types"; 5 | import { useThemeContext } from "../contexts/ThemeContext"; 6 | 7 | const useFetchUsersByCity = (selectedCity: string) => { 8 | const [searchResults, setSearchResults] = useState([]); 9 | const [loading, setLoading] = useState(false); 10 | const { mode } = useThemeContext(); 11 | 12 | useEffect(() => { 13 | (async () => { 14 | try { 15 | setLoading(true); 16 | const userData = await getUserSearchResults(selectedCity); 17 | const topTenResults = userData?.splice(1, 10); 18 | setSearchResults(topTenResults); 19 | console.log(topTenResults, "topTenResults"); 20 | } catch (error) { 21 | alert(error); 22 | } finally { 23 | setLoading(false); 24 | } 25 | })(); 26 | }, [selectedCity]); 27 | 28 | return { searchResults, loading, mode }; 29 | }; 30 | 31 | export default useFetchUsersByCity; 32 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { RouterProvider } from "react-router-dom"; 4 | import reportWebVitals from "./reportWebVitals"; 5 | 6 | import "./index.css"; 7 | import { myAppRouter } from "./routes"; 8 | import { ThemeContextProvider } from "./contexts/ThemeContext"; 9 | 10 | const root = ReactDOM.createRoot( 11 | document.getElementById("root") as HTMLElement, 12 | ); 13 | 14 | root.render( 15 | 16 | 17 | 18 | 19 | , 20 | ); 21 | 22 | // If you want to start measuring performance in your app, pass a function 23 | // to log results (for example: reportWebVitals(console.log)) 24 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 25 | reportWebVitals(); 26 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/miscellaneous/ChildClassBasedComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | type Props = {}; 4 | 5 | type State = {}; 6 | 7 | class ChildClassBasedComponent extends Component { 8 | constructor(props: Props) { 9 | super(props); 10 | this.state = {}; 11 | console.log("Child- constructor"); 12 | } 13 | 14 | componentDidMount(): void { 15 | console.log("Child- didMount"); 16 | } 17 | 18 | render() { 19 | console.log("Child- render"); 20 | return <>; 21 | } 22 | } 23 | 24 | export default ChildClassBasedComponent; 25 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/pages/HomePage/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | 4 | import { Navbar, Header } from "../../containers"; 5 | import classes from "./homePage.styles.module.css"; 6 | import { useThemeContext } from "../../contexts/ThemeContext"; 7 | 8 | /** 9 | * @purpose - For checking the functionality of dynamic imports 10 | */ 11 | 12 | // import("../../components/Buttons/ShowButton/ShowButton") 13 | // .then((a) => { 14 | // const { default: ShowButton } = a; 15 | // console.log(ShowButton()); 16 | // console.log(a); 17 | // }) 18 | // .catch((err) => console.error("An error occured while loading the module")); 19 | 20 | const HomePage = () => { 21 | const { mode } = useThemeContext(); 22 | 23 | return ( 24 |
25 | 26 |
27 | 28 |
29 | ); 30 | }; 31 | 32 | export default HomePage; 33 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/pages/HomePage/homePage.styles.module.css: -------------------------------------------------------------------------------- 1 | .dark { 2 | background-color: #16161a; 3 | color: #fffffe; 4 | } 5 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/pages/index.ts: -------------------------------------------------------------------------------- 1 | import HomePage from "./HomePage/HomePage"; 2 | 3 | export { HomePage }; 4 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from "web-vitals"; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/routes/index.tsx: -------------------------------------------------------------------------------- 1 | import { lazy, Suspense } from "react"; 2 | import { createBrowserRouter } from "react-router-dom"; 3 | 4 | import { HomePage } from "../pages"; 5 | import { ErrorPage, Loader } from "../components"; 6 | import { Members, MemberInfo, Navigator } from "../containers"; 7 | 8 | const SearchGithubUsers = lazy( 9 | () => import("../containers/SearchGithubUsers/SearchGithubUsers") 10 | ); 11 | 12 | export const myAppRouter = createBrowserRouter([ 13 | { 14 | path: "/", 15 | element: , 16 | errorElement: , 17 | children: [ 18 | { index: true, element: }, 19 | { 20 | path: "/members", 21 | element: , 22 | }, 23 | { 24 | path: "/search", 25 | element: ( 26 | }> 27 | 28 | 29 | ), 30 | }, 31 | { 32 | path: "/members/:id", 33 | element: , 34 | }, 35 | ], 36 | }, 37 | ]); 38 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/services/index.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | import { IUser } from "../types"; 4 | import { AvengersIds } from "../containers/Members/membersData"; 5 | 6 | const endpoint = "https://api.github.com/users/"; 7 | 8 | const getUserData = (): Promise => { 9 | const responsePromiseArray = axios.all( 10 | AvengersIds.map((avenger) => 11 | axios.get(`${endpoint}${avenger.id}`).then((res) => res.data), 12 | ), 13 | ); 14 | return responsePromiseArray; 15 | }; 16 | 17 | const getUserSearchResults = (selectedCity: string): Promise => { 18 | return axios 19 | .get(`https://api.github.com/search/users?q=location%3A${selectedCity}`) 20 | .then((response) => response.data?.items); 21 | }; 22 | 23 | export { getUserData, getUserSearchResults }; 24 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface IUser { 2 | avatar_url: string; 3 | name: string; 4 | login: string; 5 | html_url: string; 6 | bio: string; 7 | followers: string; 8 | following: string; 9 | company: string; 10 | location: string; 11 | blog: string; 12 | email: string; 13 | id: number; 14 | } 15 | -------------------------------------------------------------------------------- /Day7n8n9n10/github-api-project-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Namaste-React 2 | 3 | Repository containing the work and assignments including projects which I make during the Namaste React Bootcamp by @akshaymarch7 4 | 5 | ## 🙇 Author 6 | 7 | #### Ajay Pathak 8 | 9 | - Twitter: [@Pathkbndhu_navo](https://twitter.com/Pathkbndhu_navo) 10 | - GitHub: [@ap221882](https://github.com/ap221882) 11 | - LinkedIn: [@ajay-pathak](https://www.linkedin.com/in/ajay-pathak-webdeveloper) 12 | -------------------------------------------------------------------------------- /Revision/Basic_React/way1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 18 | 19 | 20 | Smallest React Application 21 | 22 | 23 |
24 | Ajay 25 | 26 | 27 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/MyReactElement.js: -------------------------------------------------------------------------------- 1 | import React from './React'; 2 | 3 | // console.table(React.createElement); 4 | // console.log(React.createElement(() => {})); 5 | // console.log(React.createElement('')); 6 | // console.log(React.createElement({})); 7 | // console.log(React.createElement([])); 8 | // console.log(React.createElement({ ajay: 'pathak' })); 9 | // console.log(React.createElement(null)); 10 | // console.log(React.createElement(Symbol('Ajay'))); 11 | // console.log( 12 | // React.createElement( 13 | // undefined, 14 | // { __self: 'Ajay', key: 'Ajay' }, 15 | // { __self: 'Ajay', key: 'Ajay' }, 16 | // { __self: 'Ajay', key: 'Ajay' } 17 | // ) 18 | // ); 19 | 20 | // const ReactElement = React.createElement('h1', { alt: 'logo' },

Hello

); 21 | 22 | // console.log(ReactElement); 23 | 24 | const ParentElement = function ({ children }) { 25 | return React.createElement('h1', { alt: 'logo' },

`${children}`

); 26 | }; 27 | 28 | console.log(ParentElement, 'ParentElement'); 29 | 30 | console.log( 31 | React.createElement( 32 | ParentElement, 33 | { key: 'unique-value', children: 'Hi!' }, 34 | 'hello' 35 | ) 36 | ); 37 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/README.md: -------------------------------------------------------------------------------- 1 | #### Commands to follow 2 | 3 | ``` 4 | touch index.html 5 | touch script.js 6 | touch package.json 7 | 8 | Have an empty object in package.json 9 | Have the script.js script as type=module in index.html 10 | 11 | npm i react react-dom 12 | npm i parcel 13 | npx parcel index.html 14 | 15 | Have a console of React and ReactDOM after importing in the module and boom! You are now accesible to react library 16 | ``` 17 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/ReactElement.js: -------------------------------------------------------------------------------- 1 | import React from './React'; 2 | 3 | console.table(React.createElement()); 4 | 5 | //~!RESERVED_PROPS 6 | //* key: true, 7 | //* ref: true, 8 | //~* Used by babel-plugin(transpiler) and bundlers for extra debuggin information 9 | //* __self: true, 10 | //* __source: true, 11 | 12 | const ReactElement = React.createElement('div', 'ajay', 'ajay', 'pathak'); 13 | const ReactElementWithRef = React.createElement( 14 | 'mycustomelement', 15 | { 16 | name: 'ajay', 17 | ref: 'India', 18 | key: 'I_AM_UNIQUE', 19 | __self: 'REACT_ELEMENT', 20 | __source: { fileName: 'randomFileName', lineNumber: 123, columnNumber: 1 }, 21 | }, 22 | 'ajay', 23 | 'pathak' 24 | ); 25 | 26 | console.table(ReactElement, 'ReactElementWith'); 27 | console.table(ReactElementWithRef, 'ReactElementWithRef'); 28 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Smallest React Application 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
React
19 |
ReactDOM
20 |
21 |
22 |
ReactDOM Client
23 |
ReactDOM Server
24 |
ReactDOM Test Utilities
25 |
26 | ReactDOMServerBrowser 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "country-name-library": "1.0.0", 4 | "parcel": "^2.8.3", 5 | "react": "^18.2.0", 6 | "react-dom": "^18.2.0" 7 | }, 8 | "devDependencies": { 9 | "buffer": "5.7.1", 10 | "events": "3.3.0", 11 | "process": "^0.11.10", 12 | "stream-browserify": "3.0.0", 13 | "util": "0.12.5" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/script.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import ReactDOMClient from 'react-dom/client'; 4 | import ReactDOMServer from 'react-dom/server'; 5 | import ReactDOMTestUtils from 'react-dom/test-utils'; 6 | import ReactDOMServerBrowser from 'react-dom/server.browser'; 7 | // import ReactDOMNode from 'react-dom/server.node'; 8 | import ReactDOMProfiling from 'react-dom/profiling'; 9 | 10 | console.log(React, 'React '); 11 | console.log(ReactDOM, 'React DOM'); 12 | // console.log(ReactDOMClient, 'React DOM Client'); 13 | // console.log(ReactDOMServer, 'React DOM Server'); 14 | // console.log(ReactDOMTestUtils, 'ReactDOM DOM Test Utilities'); 15 | // console.table(ReactDOM.createRoot); 16 | // console.table(ReactDOMClient.createRoot); 17 | // console.log(ReactDOMServerBrowser, 'ReactDOMServerBrowser'); 18 | // console.log(ReactDOMProfiling, 'ReactDOMProfiling'); 19 | // console.log(ReactDOMNode, 'ReactDOMNode'); 20 | 21 | const KeysArrayReact = Object.keys(React); 22 | const KeysArrayReactDOM = Object.keys(ReactDOM); 23 | console.log(KeysArrayReact.length, KeysArrayReactDOM.length); 24 | -------------------------------------------------------------------------------- /Revision/Basic_React/way2/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | section { 8 | min-height: 100vh; 9 | background-color: #272838; 10 | } 11 | 12 | article { 13 | color: #edff71; 14 | display: grid; 15 | place-items: center; 16 | font-weight: 800; 17 | font-size: 2.5rem; 18 | } 19 | 20 | .react-core { 21 | display: grid; 22 | grid-template-rows: repeat(2, 1fr); 23 | } 24 | 25 | .react-more { 26 | display: grid; 27 | grid-template-rows: repeat(3, 1fr); 28 | } 29 | 30 | .react-more > article { 31 | color: #61dafb; 32 | } 33 | -------------------------------------------------------------------------------- /Revision/COMPONENTvsELEMENT_REACT/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | REACT || Component vs Element 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Revision/COMPONENTvsELEMENT_REACT/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "componentvselement_react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "script.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.8.3", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "process": "^0.11.10" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Revision/COMPONENTvsELEMENT_REACT/script.js: -------------------------------------------------------------------------------- 1 | import { useState, Component } from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | const rootElement = document.querySelector('#root'); 5 | 6 | const reactRoot = ReactDOM.createRoot(rootElement); 7 | 8 | class App extends Component { 9 | // const [count, setCount] = useState(0); 10 | state = { count: 0 }; 11 | render() { 12 | return ( 13 |
14 |

Hello

15 |

Count: {this.state.count}

16 |
17 | ); 18 | } 19 | } 20 | console.log(, 'APP'); 21 | console.log(new App()); 22 | 23 | reactRoot.render(new App()); 24 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseEffect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parcel 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseEffect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "axios": "^1.3.3", 4 | "parcel": "^2.8.3", 5 | "react": "^18.2.0", 6 | "react-dom": "^18.2.0" 7 | }, 8 | "devDependencies": { 9 | "buffer": "^5.7.1", 10 | "process": "^0.11.10" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseMemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Usememo 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseMemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "parcel": "^2.8.3", 4 | "react": "^18.2.0", 5 | "react-dom": "^18.2.0" 6 | }, 7 | "devDependencies": { 8 | "buffer": "^5.7.1", 9 | "process": "^0.11.10" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseMemo/script.js: -------------------------------------------------------------------------------- 1 | import React, { useMemo, useState, Fragment } from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | const domRootNode = document.querySelector('#root'); 5 | 6 | const App = () => { 7 | const [count, setCount] = useState(0); 8 | 9 | const handler = () => {}; 10 | 11 | const dependency = useMemo( 12 | (count) => { 13 | console.log('rerun'); 14 | value = 1000000000000000; 15 | while (value > count) { 16 | value--; 17 | } 18 | return value; 19 | }, 20 | [handler] 21 | ); 22 | 23 | console.log('Component rendered'); 24 | 25 | return ( 26 | 27 | {count} 28 |

{dependency}

29 | 30 | 31 | ); 32 | }; 33 | const a = ; 34 | console.dir(a.type, 'a.type'); 35 | 36 | const reactRoot = ReactDOM.createRoot(domRootNode); 37 | 38 | reactRoot.render(); 39 | -------------------------------------------------------------------------------- /Revision/UnderstandingUseState/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | USE STATE 5 | 6 | 7 | 8 |
THIS IS MY CUSTOM ELEMENT
9 |
10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Revision/custom-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web Components 8 | 9 | 14 | 15 | 16 | Ajay 17 | 18 | 19 | -------------------------------------------------------------------------------- /Revision/custom-components/script.js: -------------------------------------------------------------------------------- 1 | // const elementNotDefined = document.createElement('ajay-pathak'); 2 | // document.body.appendChild(elementNotDefined); 3 | 4 | class MyCustomElement extends HTMLElement { 5 | constructor() { 6 | super(); 7 | //% Element created 8 | console.log('I am created - constructor'); 9 | } 10 | 11 | connectedCallback() { 12 | //% Element connected 13 | console.log('I am mounted - connected'); 14 | } 15 | 16 | disconnectedCallback() { 17 | console.log('I am removed- disconnected'); 18 | } 19 | } 20 | 21 | customElements.define('ajay-pathak', MyCustomElement); 22 | 23 | const element = document.getElementsByTagName('ajay-pathak'); 24 | console.log(element); 25 | // element[0].remove(); 26 | -------------------------------------------------------------------------------- /Revision/machine_coding/nestedComments/CommentsComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { comments } from './nestedCommentsData'; 4 | 5 | const renderComments = (comments) => { 6 | return comments.map((comment, i) => { 7 | return ( 8 |
17 | 22 | {comment?.replies && renderComments(comment?.replies)} 23 |
24 | ); 25 | }); 26 | }; 27 | 28 | const CommentsComponent = () => { 29 | return
{renderComments(comments)}
; 30 | }; 31 | 32 | const SingleCommentComponent = ({ name, text }) => { 33 | return ( 34 |
35 |

{name}

36 |

{text}

37 |
38 | ); 39 | }; 40 | 41 | export default CommentsComponent; 42 | -------------------------------------------------------------------------------- /Revision/machine_coding/nestedComments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Nested Comments 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Revision/machine_coding/nestedComments/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import CommentsComponent from './CommentsComponent'; 5 | 6 | const rootDOM = document.querySelector('#root'); 7 | 8 | const reactDOMRoot = ReactDOM.createRoot(rootDOM); 9 | 10 | reactDOMRoot.render(); 11 | -------------------------------------------------------------------------------- /Revision/machine_coding/nestedComments/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nestedcomments", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "nestedCommentsData.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "Ajay Pathak ", 11 | "license": "MIT", 12 | "dependencies": { 13 | "parcel": "2.8.3", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "process": "0.11.10" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Revision/stateInReact/component.js: -------------------------------------------------------------------------------- 1 | class App extends React.Component { 2 | counter = (); 3 | 4 | render() { 5 | return ( 6 |
7 | {this.counter} 8 | {this.counter} 9 |
10 | ); 11 | } 12 | } 13 | 14 | function Counter() { 15 | const [score, setScore] = React.useState(0); 16 | const [hover, setHover] = React.useState(false); 17 | 18 | let className = 'counter'; 19 | if (hover) { 20 | className += ' hover'; 21 | } 22 | 23 | return ( 24 |
setHover(true)} 27 | onPointerLeave={() => setHover(false)} 28 | > 29 |

{score}

30 | 31 |
32 | ); 33 | } 34 | 35 | const reactDOMRoot = ReactDOM.createRoot(document.getElementById('react-root')); 36 | console.log(, ''); 37 | const app = ; 38 | console.dir(app.type, 'type'); 39 | console.log(app.type, 'type'); 40 | // console.log(app.type(), 'type invoked'); 41 | // console.log(app.type().props.children, 'app.props.children'); 42 | // console.table(app.type().props.children[0].type, 'app.type().props.children'); 43 | console.log(React.createElement({}), 'React.createElement(function App() {})'); 44 | reactDOMRoot.render(); 45 | -------------------------------------------------------------------------------- /Revision/stateInReact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | Load React. --> 9 | Note: when deploying, replace "development.js" with "production.min.js". --> 10 | 14 | 18 | Babel --> 19 | 20 | Load our React component. --> 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Revision/typesOfComponents/createClassComponent/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Create react class component 8 | 9 | 11 | Note: when deploying, replace "development.js" with "production.min.js". --> 12 | 20 | Babel --> 21 | 23 | --> --> 24 | Load our React component. --> 25 | 26 | 27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Revision/typesOfComponents/createClassComponent/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "create-react-class": "^15.7.0", 4 | "parcel": "^2.8.3", 5 | "react": "^18.2.0", 6 | "react-dom": "^18.2.0" 7 | }, 8 | "devDependencies": { 9 | "process": "^0.11.10" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Revision/typesOfComponents/createClassComponent/script.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import createReactClass from 'create-react-class'; 3 | 4 | var Greeting = createReactClass({ 5 | render: function () { 6 | return

Hello, {this.props.name}

; 7 | }, 8 | }); 9 | 10 | console.log(, 'Greeting'); 11 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "ts-node": "^10.9.1", 4 | "typescript": "^4.9.5" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/src/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | const add = (a, b) => { 3 | return a + b; 4 | }; 5 | console.log(add(1, 2)); 6 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/src/index.ts: -------------------------------------------------------------------------------- 1 | const add = (a: number, b: number) => { 2 | return a + b; 3 | }; 4 | 5 | console.log(add(1, 2)); 6 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/src/mutations.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var foo = {}; 3 | var bar = foo; 4 | var baz = {}; 5 | console.log(foo === bar); 6 | console.log(foo === baz); 7 | console.log(JSON.stringify({ willStay: null, willBeGone: undefined })); 8 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/src/mutations.ts: -------------------------------------------------------------------------------- 1 | var foo = {}; 2 | var bar = foo; 3 | var baz = {}; 4 | 5 | console.log(foo === bar); 6 | console.log(foo === baz); 7 | console.log(JSON.stringify({ willStay: null, willBeGone: undefined })); 8 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/01-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true, 9 | "rootDir": "src" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/02-react-query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Query 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/02-react-query/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "react": "^18.2.0", 4 | "react-dom": "^18.2.0", 5 | "react-query": "^3.39.3" 6 | }, 7 | "devDependencies": { 8 | "process": "^0.11.10" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /TEACHING_LIBRARIES/02-react-query/script.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import { QueryClient, QueryClientProvider, useQuery } from "react-query"; 5 | 6 | const domElement = document.querySelector("#root"); 7 | const reactRoot = ReactDOM.createRoot(domElement); 8 | 9 | const queryClient = new QueryClient(); 10 | 11 | function Example() { 12 | const { isLoading, error, data } = useQuery("repoData", () => 13 | fetch("https://api.github.com/repos/tannerlinsley/react-query").then( 14 | (res) => res.json() 15 | ) 16 | ); 17 | 18 | if (isLoading) return "Loading..."; 19 | 20 | if (error) return "An error has occurred: " + error.message; 21 | 22 | return ( 23 |
24 |

{data.name}

25 |

{data.description}

26 | 👀 {data.subscribers_count}{" "} 27 | ✨ {data.stargazers_count}{" "} 28 | 🍴 {data.forks_count} 29 |
30 | ); 31 | } 32 | 33 | const App = () => { 34 | return ( 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | console.log("App", App); 42 | 43 | reactRoot.render(); 44 | console.log(React, "React"); 45 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/README.md: -------------------------------------------------------------------------------- 1 | #### Learnings from https://blog.logrocket.com/unit-testing-react-cypress/ 2 | 3 | ##### For assertions : https://docs.cypress.io/guides/references/assertions 4 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/cypress.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | component: { 5 | devServer: { 6 | framework: "react", 7 | bundler: "webpack", 8 | }, 9 | }, 10 | e2e: { 11 | supportFile: false, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/cypress/component/Movielist.cy.js: -------------------------------------------------------------------------------- 1 | import MovieList from "./components/MovieList"; 2 | 3 | describe("MovieList", () => { 4 | beforeEach(() => { 5 | cy.mount(); 6 | }); 7 | 8 | it("The List of movies appends", () => { 9 | cy.get("[data-cy=empty]").contains("No movies here"); 10 | const formInput = cy.get("form input"); 11 | formInput.should("have.value", ""); 12 | formInput.type("Monster Inc.").should("have.value", "Monster Inc."); 13 | cy.get("form button").click(); 14 | formInput.clear(); 15 | formInput.type("Circle of eight").should("have.value", "Circle of eight"); 16 | cy.get("form button").click(); 17 | cy.get("[data-cy=movie-list]").children().should("have.length", 2); 18 | }); 19 | 20 | it("uncheck movie", () => { 21 | const lastListitem = cy.get( 22 | "[data-cy=movie-list]:nth-child(1) li:last-child" 23 | ); 24 | lastListitem.click(); 25 | lastListitem.should("have.class", "strike"); 26 | cy.get("[data-cy=clear-movie]").click(); 27 | cy.get("[data-cy=movie-list]").children().should("have.length", 1); 28 | cy.get("[data-cy=clear-movie]").click(); 29 | cy.get("[data-cy=movie-list]").children().should("have.length", 1); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/cypress/support/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/cypress/support/index.ts -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview", 10 | "cypress": "cypress open" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^18.11.18", 18 | "@types/react": "^18.0.26", 19 | "@types/react-dom": "^18.0.9", 20 | "@vitejs/plugin-react": "^3.0.0", 21 | "cypress": "^12.3.0", 22 | "typescript": "^4.9.3", 23 | "vite": "^4.0.0", 24 | "webpack": "^5.75.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import reactLogo from "./assets/react.svg"; 3 | import "./App.css"; 4 | import Movielist from "./components/MovieList"; 5 | 6 | function App() { 7 | const [count, setCount] = useState(0); 8 | 9 | return ( 10 |
11 | 12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src", "cypress", "cypress/component/Movielist.cy.js"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /miscellaneous/cypress-testing/unit-testing-with-cypress/cypress-unit-testing-project/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /miscellaneous/react-native/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /miscellaneous/react-native/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /miscellaneous/react-native/App.js: -------------------------------------------------------------------------------- 1 | import { createAppContainer } from "react-navigation"; 2 | import { createStackNavigator } from "react-navigation-stack"; 3 | import HomeScreen from "./src/screens/HomeScreen"; 4 | import ComponentsScreen from "./src/screens/ComponentsScreen"; 5 | import ListScreen from "./src/screens/ListScreen"; 6 | import ImageScreen from "./src/screens/ImageScreen"; 7 | import CounterScreen from "./src/screens/CounterScreen"; 8 | 9 | /** 10 | * * From react-navigation library used for routing 11 | */ 12 | const navigator = createStackNavigator( 13 | { 14 | Home: HomeScreen, 15 | Components: ComponentsScreen, 16 | List: ListScreen, 17 | ImageScreen, 18 | CounterScreen, 19 | }, 20 | { 21 | initialRouteName: "Home", 22 | defaultNavigationOptions: { 23 | title: "App", 24 | }, 25 | } 26 | ); 27 | 28 | export default createAppContainer(navigator); 29 | -------------------------------------------------------------------------------- /miscellaneous/react-native/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "newapp", 4 | "slug": "newapp", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "updates": { 15 | "fallbackToCacheTimeout": 0 16 | }, 17 | "assetBundlePatterns": [ 18 | "**/*" 19 | ], 20 | "ios": { 21 | "supportsTablet": true 22 | }, 23 | "android": { 24 | "adaptiveIcon": { 25 | "foregroundImage": "./assets/adaptive-icon.png", 26 | "backgroundColor": "#FFFFFF" 27 | } 28 | }, 29 | "web": { 30 | "favicon": "./assets/favicon.png" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/adaptive-icon.png -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/favicon.png -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/icon.png -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/images/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/images/beach.jpg -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/images/forest.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/images/forest.jpg -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/images/mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/images/mountain.jpg -------------------------------------------------------------------------------- /miscellaneous/react-native/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ap221882/Namaste-React/281f2115b6d7636d402da0f2027e3c5a6c5905cc/miscellaneous/react-native/assets/splash.png -------------------------------------------------------------------------------- /miscellaneous/react-native/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["react-native-reanimated/plugin"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /miscellaneous/react-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rn-starter-update", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@react-native-community/masked-view": "^0.1.11", 13 | "expo": "~47.0.3", 14 | "expo-status-bar": "~1.4.2", 15 | "react": "18.1.0", 16 | "react-native": "0.70.5", 17 | "react-native-gesture-handler": "~2.8.0", 18 | "react-native-reanimated": "~2.12.0", 19 | "react-native-safe-area-context": "4.4.1", 20 | "react-native-screens": "~3.18.0", 21 | "react-navigation": "^4.4.4", 22 | "react-navigation-stack": "^2.10.4" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.12.9" 26 | }, 27 | "private": true 28 | } 29 | -------------------------------------------------------------------------------- /miscellaneous/react-native/src/components/ImageDetail.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View, Image } from "react-native"; 2 | import React from "react"; 3 | import mountain from "../../assets/images/mountain.jpg"; 4 | 5 | const ImageDetail = () => { 6 | return ( 7 | 8 | 9 | ImageDetail 10 | 11 | ); 12 | }; 13 | 14 | export default ImageDetail; 15 | 16 | const styles = StyleSheet.create({}); 17 | -------------------------------------------------------------------------------- /miscellaneous/react-native/src/screens/ComponentsScreen.js: -------------------------------------------------------------------------------- 1 | // rnfes 2 | import { StyleSheet, Text, View } from "react-native"; 3 | import React from "react"; 4 | 5 | const ComponentsScreen = () => { 6 | const name = "Ajay"; 7 | return ( 8 | 9 | This is Components Screen 10 | 11 | {name} is a mobile app developer 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default ComponentsScreen; 18 | 19 | /** 20 | * * Stylesheet used for giving error messages when you mess up 21 | */ 22 | const styles = StyleSheet.create({ 23 | textStyle: { 24 | fontSize: 40, 25 | }, 26 | customTextStyle: { 27 | fontSize: 20, 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /miscellaneous/react-native/src/screens/CounterScreen.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View, Button } from "react-native"; 2 | import React, { useState } from "react"; 3 | 4 | const CounterScreen = () => { 5 | const [count, setCount] = useState(0); 6 | 7 | return ( 8 | 9 |