├── 09themeswitcher
├── src
│ ├── App.css
│ ├── index.css
│ ├── main.jsx
│ ├── contexts
│ │ └── theme.js
│ ├── App.jsx
│ ├── components
│ │ └── ThemeBtn.jsx
│ └── assets
│ │ └── react.svg
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 05passwordGenerator
├── src
│ ├── App.css
│ ├── index.css
│ ├── main.jsx
│ └── App.jsx
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 10todocontextLocal
├── src
│ ├── App.css
│ ├── index.css
│ ├── contexts
│ │ ├── index.js
│ │ └── TodoContext.js
│ ├── components
│ │ ├── index.js
│ │ ├── TodoForm.jsx
│ │ └── TodoItem.jsx
│ ├── main.jsx
│ └── App.jsx
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── .gitignore
├── 07reactRouter
├── src
│ ├── index.css
│ ├── components
│ │ ├── User
│ │ │ └── User.jsx
│ │ ├── Github
│ │ │ └── Github.jsx
│ │ ├── About
│ │ │ └── About.jsx
│ │ └── Home
│ │ │ └── Home.jsx
│ ├── Layout.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── main.jsx
│ └── assets
│ │ └── react.svg
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 12MegaBlog
├── src
│ ├── index.css
│ ├── components
│ │ ├── Logo.jsx
│ │ ├── container
│ │ │ └── Container.jsx
│ │ ├── Button.jsx
│ │ ├── Header
│ │ │ ├── LogoutBtn.jsx
│ │ │ └── Header.jsx
│ │ ├── PostCard.jsx
│ │ ├── index.js
│ │ ├── Input.jsx
│ │ ├── Select.jsx
│ │ ├── AuthLayout.jsx
│ │ ├── RTE.jsx
│ │ ├── Login.jsx
│ │ └── Signup.jsx
│ ├── pages
│ │ ├── Login.jsx
│ │ ├── Signup.jsx
│ │ ├── AddPost.jsx
│ │ ├── AllPosts.jsx
│ │ ├── EditPost.jsx
│ │ ├── Home.jsx
│ │ └── Post.jsx
│ ├── store
│ │ ├── store.js
│ │ └── authSlice.js
│ ├── conf
│ │ └── conf.js
│ ├── App.css
│ ├── App.jsx
│ ├── appwrite
│ │ └── auth.js
│ ├── main.jsx
│ └── assets
│ │ └── react.svg
├── bun.lockb
├── postcss.config.js
├── .env.sample
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 04bgChanger
├── src
│ ├── index.css
│ ├── main.jsx
│ ├── App.css
│ ├── App.jsx
│ └── assets
│ │ └── react.svg
├── bun.lockb
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── reduxToolkitTodo
├── src
│ ├── index.css
│ ├── app
│ │ └── store.js
│ ├── main.jsx
│ ├── App.jsx
│ ├── features
│ │ └── todo
│ │ │ └── todoSlice.js
│ ├── App.css
│ └── components
│ │ ├── AddTodo.jsx
│ │ └── Todos.jsx
├── bun.lockb
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 06currencyConvertor
├── src
│ ├── components
│ │ ├── index.js
│ │ └── InputBox.jsx
│ ├── index.css
│ ├── main.jsx
│ ├── hooks
│ │ └── useCurrencyInfo.js
│ ├── App.css
│ └── App.jsx
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 01basicreact
├── public
│ ├── robots.txt
│ ├── favicon.ico
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── index.html
├── src
│ ├── Chai.jsx
│ ├── App.js
│ └── index.js
├── .gitignore
├── package.json
└── README.md
├── .vscode
└── settings.json
├── 01vitereact
├── src
│ ├── chai.jsx
│ ├── App.jsx
│ └── main.jsx
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 03tailwindprops
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── src
│ ├── main.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── components
│ │ └── Card.jsx
│ ├── index.css
│ └── assets
│ │ └── react.svg
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 08miniContext
├── src
│ ├── context
│ │ ├── UserContext.js
│ │ └── UserContextProvider.jsx
│ ├── main.jsx
│ ├── components
│ │ ├── Profile.jsx
│ │ └── Login.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ └── assets
│ │ └── react.svg
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── 02counter
├── vite.config.js
├── src
│ ├── main.jsx
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── assets
│ │ └── react.svg
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── interview-discussion
├── vite.config.js
├── src
│ ├── main.jsx
│ ├── App.css
│ ├── App.jsx
│ └── index.css
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
│ └── vite.svg
├── customReact
├── index.html
└── customreact.js
├── readme.md
├── todoContextapiNotes.md
└── currency.md
/09themeswitcher/src/App.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/05passwordGenerator/src/App.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/10todocontextLocal/src/App.css:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 12MegaBlog/.env
3 |
--------------------------------------------------------------------------------
/07reactRouter/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/12MegaBlog/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/04bgChanger/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/09themeswitcher/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/10todocontextLocal/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/05passwordGenerator/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/06currencyConvertor/src/components/index.js:
--------------------------------------------------------------------------------
1 | import InputBox from './InputBox'
2 |
3 | export {InputBox}
--------------------------------------------------------------------------------
/06currencyConvertor/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/04bgChanger/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/04bgChanger/bun.lockb
--------------------------------------------------------------------------------
/10todocontextLocal/src/contexts/index.js:
--------------------------------------------------------------------------------
1 | export {TodoContext, TodoProvider, useTodo} from "./TodoContext"
--------------------------------------------------------------------------------
/12MegaBlog/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/12MegaBlog/bun.lockb
--------------------------------------------------------------------------------
/01basicreact/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.acceptSuggestionOnEnter": "on",
3 | "liveServer.settings.port": 5501
4 | }
--------------------------------------------------------------------------------
/reduxToolkitTodo/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/reduxToolkitTodo/bun.lockb
--------------------------------------------------------------------------------
/01basicreact/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/01basicreact/public/favicon.ico
--------------------------------------------------------------------------------
/01basicreact/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/01basicreact/public/logo192.png
--------------------------------------------------------------------------------
/01basicreact/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/chai-aur-react/HEAD/01basicreact/public/logo512.png
--------------------------------------------------------------------------------
/04bgChanger/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/12MegaBlog/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/01basicreact/src/Chai.jsx:
--------------------------------------------------------------------------------
1 | function Chai(){
2 | return(
3 |
chai in react
4 | )
5 | }
6 |
7 | export default Chai
--------------------------------------------------------------------------------
/01vitereact/src/chai.jsx:
--------------------------------------------------------------------------------
1 | function Chai(){
2 | return(
3 | chai is ready
4 | )
5 | }
6 |
7 | export default Chai
--------------------------------------------------------------------------------
/03tailwindprops/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/07reactRouter/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/09themeswitcher/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/05passwordGenerator/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/06currencyConvertor/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/10todocontextLocal/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/10todocontextLocal/src/components/index.js:
--------------------------------------------------------------------------------
1 | import TodoForm from "./TodoForm";
2 | import TodoItem from "./TodoItem";
3 |
4 | export {TodoForm, TodoItem}
--------------------------------------------------------------------------------
/08miniContext/src/context/UserContext.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const UserContext = React.createContext()
4 |
5 | export default UserContext;
6 |
7 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Logo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Logo({width = '100px'}) {
4 | return (
5 | Logo
6 | )
7 | }
8 |
9 | export default Logo
--------------------------------------------------------------------------------
/12MegaBlog/.env.sample:
--------------------------------------------------------------------------------
1 | VITE_APPWRITE_URL="test environment"
2 | VITE_APPWRITE_PROJECT_ID=""
3 | VITE_APPWRITE_DATABASE_ID=""
4 | VITE_APPWRITE_COLLECTION_ID=""
5 | VITE_APPWRITE_BUCKET_ID=""
--------------------------------------------------------------------------------
/01basicreact/src/App.js:
--------------------------------------------------------------------------------
1 |
2 | import Chai from "./Chai";
3 |
4 | function App() {
5 | return (
6 | <>
7 |
8 |
9 | >
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/01vitereact/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/02counter/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/04bgChanger/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/12MegaBlog/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/03tailwindprops/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/07reactRouter/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/08miniContext/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/09themeswitcher/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/app/store.js:
--------------------------------------------------------------------------------
1 | import {configureStore} from '@reduxjs/toolkit';
2 | import todoReducer from '../features/todo/todoSlice';
3 |
4 | export const store = configureStore({
5 | reducer: todoReducer
6 | })
--------------------------------------------------------------------------------
/reduxToolkitTodo/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/05passwordGenerator/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/06currencyConvertor/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/10todocontextLocal/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/interview-discussion/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/container/Container.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Container({children}) {
4 | return {children}
;
5 |
6 | }
7 |
8 | export default Container
--------------------------------------------------------------------------------
/12MegaBlog/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/03tailwindprops/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/04bgChanger/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/07reactRouter/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/01basicreact/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 |
4 | import App from './App';
5 |
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/05passwordGenerator/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/06currencyConvertor/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/10todocontextLocal/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/Login.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Login as loginComponent } from '../components'
3 | function Login() {
4 | return (
5 |
6 |
7 |
8 | )
9 | }
10 |
11 | export default Login
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/Signup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Signup as SignupComponent } from '../components'
3 |
4 | function Signup() {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
12 | export default Signup
--------------------------------------------------------------------------------
/02counter/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/09themeswitcher/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | darkMode: "class",
8 | theme: {
9 | extend: {},
10 | },
11 | plugins: [],
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/04bgChanger/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/08miniContext/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/03tailwindprops/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/05passwordGenerator/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/06currencyConvertor/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/09themeswitcher/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/10todocontextLocal/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/01vitereact/src/App.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | import Chai from "./chai"
4 |
5 |
6 | function App() {
7 | const username = "chai aur code"
8 |
9 | return (
10 | <>
11 |
12 | chai aur react {username}
13 | test para
14 | >
15 | )
16 | }
17 |
18 | export default App
19 |
--------------------------------------------------------------------------------
/interview-discussion/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/12MegaBlog/src/store/store.js:
--------------------------------------------------------------------------------
1 | import {configureStore} from '@reduxjs/toolkit';
2 | import authSlice from './authSlice';
3 |
4 | const store = configureStore({
5 | reducer: {
6 | auth : authSlice,
7 | //TODO: add more slices here for posts
8 | }
9 | });
10 |
11 |
12 | export default store;
--------------------------------------------------------------------------------
/07reactRouter/src/components/User/User.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useParams } from 'react-router-dom'
3 |
4 | function User() {
5 | const {userid} = useParams()
6 | return (
7 | User: {userid}
8 | )
9 | }
10 |
11 | export default User
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/AddPost.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Container, PostForm } from '../components'
3 |
4 | function AddPost() {
5 | return (
6 |
11 | )
12 | }
13 |
14 | export default AddPost
--------------------------------------------------------------------------------
/customReact/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Custom React App
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/08miniContext/src/components/Profile.jsx:
--------------------------------------------------------------------------------
1 | import React, {useContext} from 'react'
2 | import UserContext from '../context/UserContext'
3 |
4 | function Profile() {
5 | const {user} = useContext(UserContext)
6 |
7 | if (!user) return please login
8 |
9 | return Welcome {user.username}
10 | }
11 |
12 | export default Profile
--------------------------------------------------------------------------------
/07reactRouter/src/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from './components/Header/Header'
3 | import Footer from './components/Footer/Footer'
4 | import { Outlet } from 'react-router-dom'
5 |
6 | function Layout() {
7 | return (
8 | <>
9 |
10 |
11 |
12 | >
13 | )
14 | }
15 |
16 | export default Layout
--------------------------------------------------------------------------------
/01vitereact/.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 |
--------------------------------------------------------------------------------
/02counter/.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 |
--------------------------------------------------------------------------------
/04bgChanger/.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 |
--------------------------------------------------------------------------------
/07reactRouter/.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 |
--------------------------------------------------------------------------------
/08miniContext/.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 |
--------------------------------------------------------------------------------
/09themeswitcher/src/contexts/theme.js:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 |
3 | export const ThemeContext = createContext({
4 | themeMode: "light",
5 | darkTheme: () => {},
6 | lightTheme: () => {},
7 | })
8 |
9 | export const ThemeProvider = ThemeContext.Provider
10 |
11 | export default function useTheme(){
12 | return useContext(ThemeContext)
13 | }
--------------------------------------------------------------------------------
/12MegaBlog/.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 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 | import { Provider } from 'react-redux'
6 | import {store} from './app/store'
7 |
8 | ReactDOM.createRoot(document.getElementById('root')).render(
9 |
10 |
11 | ,
12 | )
13 |
--------------------------------------------------------------------------------
/03tailwindprops/.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 |
--------------------------------------------------------------------------------
/09themeswitcher/.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 |
--------------------------------------------------------------------------------
/10todocontextLocal/.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 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/.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 |
--------------------------------------------------------------------------------
/05passwordGenerator/.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 |
--------------------------------------------------------------------------------
/06currencyConvertor/.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 |
--------------------------------------------------------------------------------
/interview-discussion/.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 |
--------------------------------------------------------------------------------
/08miniContext/src/context/UserContextProvider.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import UserContext from "./UserContext";
3 |
4 | const UserContextProvider = ({children}) => {
5 | const [user, setUser] = React.useState(null)
6 | return(
7 |
8 | {children}
9 |
10 | )
11 | }
12 |
13 | export default UserContextProvider
--------------------------------------------------------------------------------
/02counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/01basicreact/.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 |
--------------------------------------------------------------------------------
/01vitereact/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/03tailwindprops/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/04bgChanger/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/07reactRouter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/08miniContext/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/09themeswitcher/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/06currencyConvertor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/10todocontextLocal/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/interview-discussion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/12MegaBlog/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Button.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Button({
4 | children,
5 | type = "button",
6 | bgColor = "bg-blue-600",
7 | textColor = "text-white",
8 | className = "",
9 | ...props
10 | }) {
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import viteLogo from '/vite.svg'
4 | import './App.css'
5 | import AddTodo from './components/AddTodo'
6 | import Todos from './components/Todos'
7 |
8 | function App() {
9 |
10 | return (
11 | <>
12 | Learn about redux toolkit
13 |
14 |
15 | >
16 | )
17 | }
18 |
19 | export default App
20 |
--------------------------------------------------------------------------------
/08miniContext/src/App.jsx:
--------------------------------------------------------------------------------
1 |
2 | import './App.css'
3 | import Login from './components/Login'
4 | import Profile from './components/Profile'
5 | import UserContextProvider from './context/UserContextProvider'
6 |
7 | function App() {
8 |
9 |
10 | return (
11 |
12 | React with Chai and share is important
13 |
14 |
15 |
16 | )
17 | }
18 |
19 | export default App
20 |
--------------------------------------------------------------------------------
/05passwordGenerator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/02counter/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/12MegaBlog/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/01vitereact/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/03tailwindprops/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/04bgChanger/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/07reactRouter/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/08miniContext/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/09themeswitcher/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/05passwordGenerator/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/06currencyConvertor/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/10todocontextLocal/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/interview-discussion/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/07reactRouter/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import viteLogo from '/vite.svg'
4 | import './App.css'
5 | import Header from './components/Header/Header'
6 | import Footer from './components/Footer/Footer'
7 | import Home from './components/Home/Home'
8 |
9 | function App() {
10 | const [count, setCount] = useState(0)
11 |
12 | return (
13 | <>
14 |
15 |
16 | >
17 | )
18 | }
19 |
20 | export default App
21 |
--------------------------------------------------------------------------------
/06currencyConvertor/src/hooks/useCurrencyInfo.js:
--------------------------------------------------------------------------------
1 | import {useEffect, useState} from "react"
2 |
3 |
4 | function useCurrencyInfo(currency){
5 | const [data, setData] = useState({})
6 | useEffect(() => {
7 | fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)
8 | .then((res) => res.json())
9 | .then((res) => setData(res[currency]))
10 | console.log(data);
11 | }, [currency])
12 | console.log(data);
13 | return data
14 | }
15 |
16 | export default useCurrencyInfo;
--------------------------------------------------------------------------------
/12MegaBlog/src/conf/conf.js:
--------------------------------------------------------------------------------
1 | const conf = {
2 | appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL),
3 | appwriteProjectId: String(import.meta.env.VITE_APPWRITE_PROJECT_ID),
4 | appwriteDatabaseId: String(import.meta.env.VITE_APPWRITE_DATABASE_ID),
5 | appwriteCollectionId: String(import.meta.env.VITE_APPWRITE_COLLECTION_ID),
6 | appwriteBucketId: String(import.meta.env.VITE_APPWRITE_BUCKET_ID),
7 | }
8 | // there was a name issue with the import.meta.env.VITE_APPWRITE_URL, it was later fixed in debugging video
9 |
10 | export default conf
--------------------------------------------------------------------------------
/10todocontextLocal/src/contexts/TodoContext.js:
--------------------------------------------------------------------------------
1 | import {createContext, useContext} from "react"
2 |
3 | export const TodoContext = createContext({
4 | todos: [
5 | {
6 | id: 1,
7 | todo: " Todo msg",
8 | completed: false,
9 | }
10 | ],
11 | addTodo: (todo) => {},
12 | updateTodo: (id, todo) => {},
13 | deleteTodo: (id) => {},
14 | toggleComplete: (id) => {}
15 | })
16 |
17 |
18 | export const useTodo = () => {
19 | return useContext(TodoContext)
20 | }
21 |
22 | export const TodoProvider = TodoContext.Provider
--------------------------------------------------------------------------------
/01basicreact/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 |
--------------------------------------------------------------------------------
/01vitereact/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/02counter/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/04bgChanger/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/12MegaBlog/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/03tailwindprops/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/07reactRouter/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/08miniContext/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/09themeswitcher/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/05passwordGenerator/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/06currencyConvertor/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/10todocontextLocal/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/interview-discussion/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Header/LogoutBtn.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {useDispatch} from 'react-redux'
3 | import authService from '../../appwrite/auth'
4 | import {logout} from '../../store/authSlice'
5 |
6 | function LogoutBtn() {
7 | const dispatch = useDispatch()
8 | const logoutHandler = () => {
9 | authService.logout().then(() => {
10 | dispatch(logout())
11 | })
12 | }
13 | return (
14 | Logout
18 | )
19 | }
20 |
21 | export default LogoutBtn
--------------------------------------------------------------------------------
/03tailwindprops/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import viteLogo from '/vite.svg'
4 | import './App.css'
5 | import Card from './components/Card'
6 |
7 | function App() {
8 | const [count, setCount] = useState(0)
9 | let myObj = {
10 | username: "hitesh",
11 | age: 21
12 | }
13 | let newArr = [1, 2, 3]
14 |
15 | return (
16 | <>
17 | Tailwind test
18 |
19 |
20 | >
21 | )
22 | }
23 |
24 | export default App
25 |
--------------------------------------------------------------------------------
/12MegaBlog/src/store/authSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | status : false,
5 | userData: null
6 | }
7 |
8 | const authSlice = createSlice({
9 | name: "auth",
10 | initialState,
11 | reducers: {
12 | login: (state, action) => {
13 | state.status = true;
14 | state.userData = action.payload.userData;
15 | },
16 | logout: (state) => {
17 | state.status = false;
18 | state.userData = null;
19 | }
20 | }
21 | })
22 |
23 | export const {login, logout} = authSlice.actions;
24 |
25 | export default authSlice.reducer;
--------------------------------------------------------------------------------
/12MegaBlog/src/components/PostCard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import appwriteService from "../appwrite/config"
3 | import {Link} from 'react-router-dom'
4 |
5 | function PostCard({$id, title, featuredImage}) {
6 |
7 | return (
8 |
9 |
10 |
11 |
13 |
14 |
15 |
{title}
18 |
19 |
20 | )
21 | }
22 |
23 |
24 | export default PostCard
--------------------------------------------------------------------------------
/01basicreact/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 | React App
17 |
18 |
19 | You need to enable JavaScript to run this app.
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/02counter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "02counter",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "eslint": "^8.45.0",
21 | "eslint-plugin-react": "^7.32.2",
22 | "eslint-plugin-react-hooks": "^4.6.0",
23 | "eslint-plugin-react-refresh": "^0.4.3",
24 | "vite": "^4.4.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/01vitereact/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "01vitereact",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "eslint": "^8.45.0",
21 | "eslint-plugin-react": "^7.32.2",
22 | "eslint-plugin-react-hooks": "^4.6.0",
23 | "eslint-plugin-react-refresh": "^0.4.3",
24 | "vite": "^4.4.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/08miniContext/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "08minicontext",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "eslint": "^8.45.0",
21 | "eslint-plugin-react": "^7.32.2",
22 | "eslint-plugin-react-hooks": "^4.6.0",
23 | "eslint-plugin-react-refresh": "^0.4.3",
24 | "vite": "^4.4.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/interview-discussion/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "interview-discussion",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "eslint": "^8.45.0",
21 | "eslint-plugin-react": "^7.32.2",
22 | "eslint-plugin-react-hooks": "^4.6.0",
23 | "eslint-plugin-react-refresh": "^0.4.3",
24 | "vite": "^4.4.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/features/todo/todoSlice.js:
--------------------------------------------------------------------------------
1 | import {createSlice, nanoid } from '@reduxjs/toolkit';
2 |
3 | const initialState = {
4 | todos: [{id: 1, text: "Hello world"}]
5 | }
6 |
7 |
8 |
9 | export const todoSlice = createSlice({
10 | name: 'todo',
11 | initialState,
12 | reducers: {
13 | addTodo: (state, action) => {
14 | const todo = {
15 | id: nanoid(),
16 | text: action.payload
17 | }
18 | state.todos.push(todo)
19 | },
20 | removeTodo: (state, action) => {
21 | state.todos = state.todos.filter((todo) => todo.id !== action.payload )
22 | },
23 | }
24 | })
25 |
26 | export const {addTodo, removeTodo} = todoSlice.actions
27 |
28 | export default todoSlice.reducer
--------------------------------------------------------------------------------
/02counter/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/04bgChanger/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/07reactRouter/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/08miniContext/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/12MegaBlog/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/03tailwindprops/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/06currencyConvertor/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/interview-discussion/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 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Select from "./Select";
2 | import Header from "./Header/Header";
3 | import Footer from "./Footer/Footer";
4 | import Container from "./container/Container";
5 | import Logo from "./Logo";
6 | import LogoutBtn from "./Header/LogoutBtn";
7 | import RTE from "./RTE";
8 | import Signup from "./Signup";
9 | import Login from "./Login";
10 | import Button from "./Button";
11 | import PostForm from "./post-form/PostForm";
12 | import PostCard from "./PostCard";
13 | import AuthLayout from "./AuthLayout";
14 | import Input from "./Input";
15 | export {
16 | Header,
17 | Footer,
18 | Container,
19 | Logo,
20 | LogoutBtn,
21 | RTE,
22 | Signup,
23 | Login,
24 | Button,
25 | PostForm,
26 | PostCard,
27 | AuthLayout,
28 | Input,
29 | Select,
30 | }
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Input.jsx:
--------------------------------------------------------------------------------
1 | import React, {useId} from 'react'
2 |
3 | const Input = React.forwardRef( function Input({
4 | label,
5 | type = "text",
6 | className = "",
7 | ...props
8 | }, ref){
9 | const id = useId()
10 | return (
11 |
12 | {label &&
15 | {label}
16 |
17 | }
18 |
25 |
26 | )
27 | })
28 |
29 | export default Input
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Select.jsx:
--------------------------------------------------------------------------------
1 | import React, {useId} from 'react'
2 |
3 | function Select({
4 | options,
5 | label,
6 | className,
7 | ...props
8 | }, ref) {
9 | const id = useId()
10 | return (
11 |
12 | {label && }
13 |
19 | {options?.map((option) => (
20 |
21 | {option}
22 |
23 | ))}
24 |
25 |
26 | )
27 | }
28 |
29 | export default React.forwardRef(Select)
--------------------------------------------------------------------------------
/04bgChanger/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "04bgchanger",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.28",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/03tailwindprops/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "03tailwindprops",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.28",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/09themeswitcher/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "09themeswitcher",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.29",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/05passwordGenerator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "05passwordgenerator",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.28",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/06currencyConvertor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "06currencyconvertor",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.29",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/10todocontextLocal/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "10todocontextlocal",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.29",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/AllPosts.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react'
2 | import { Container, PostCard } from '../components'
3 | import appwriteService from "../appwrite/config";
4 |
5 | function AllPosts() {
6 | const [posts, setPosts] = useState([])
7 | useEffect(() => {}, [])
8 | appwriteService.getPosts([]).then((posts) => {
9 | if (posts) {
10 | setPosts(posts.documents)
11 | }
12 | })
13 | return (
14 |
15 |
16 |
17 | {posts.map((post) => (
18 |
21 | ))}
22 |
23 |
24 |
25 | )
26 | }
27 |
28 | export default AllPosts
--------------------------------------------------------------------------------
/07reactRouter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "07reactrouter",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-router-dom": "^6.15.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.2.15",
19 | "@types/react-dom": "^18.2.7",
20 | "@vitejs/plugin-react": "^4.0.3",
21 | "autoprefixer": "^10.4.15",
22 | "eslint": "^8.45.0",
23 | "eslint-plugin-react": "^7.32.2",
24 | "eslint-plugin-react-hooks": "^4.6.0",
25 | "eslint-plugin-react-refresh": "^0.4.3",
26 | "postcss": "^8.4.29",
27 | "tailwindcss": "^3.3.3",
28 | "vite": "^4.4.5"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/EditPost.jsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react'
2 | import {Container, PostForm} from '../components'
3 | import appwriteService from "../appwrite/config";
4 | import { useNavigate, useParams } from 'react-router-dom';
5 |
6 | function EditPost() {
7 | const [post, setPosts] = useState(null)
8 | const {slug} = useParams()
9 | const navigate = useNavigate()
10 |
11 | useEffect(() => {
12 | if (slug) {
13 | appwriteService.getPost(slug).then((post) => {
14 | if (post) {
15 | setPosts(post)
16 | }
17 | })
18 | } else {
19 | navigate('/')
20 | }
21 | }, [slug, navigate])
22 | return post ? (
23 |
28 | ) : null
29 | }
30 |
31 | export default EditPost
--------------------------------------------------------------------------------
/07reactRouter/src/components/Github/Github.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { useLoaderData } from 'react-router-dom'
3 |
4 | function Github() {
5 | const data = useLoaderData()
6 | // const [data, setData] = useState([])
7 | // useEffect(() => {
8 | // fetch('https://api.github.com/users/hiteshchoudhary')
9 | // .then(response => response.json())
10 | // .then(data => {
11 | // console.log(data);
12 | // setData(data)
13 | // })
14 | // }, [])
15 |
16 | return (
17 | Github followers: {data.followers}
18 |
19 |
20 | )
21 | }
22 |
23 | export default Github
24 |
25 | export const githubInfoLoader = async () => {
26 | const response = await fetch('https://api.github.com/users/hiteshchoudhary')
27 | return response.json()
28 | }
--------------------------------------------------------------------------------
/08miniContext/src/components/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState, useContext} from 'react'
2 | import UserContext from '../context/UserContext'
3 |
4 | function Login() {
5 | const [username, setUsername] = useState('')
6 | const [password, setPassword] = useState('')
7 |
8 | const {setUser} = useContext(UserContext)
9 |
10 | const handleSubmit = (e) => {
11 | e.preventDefault()
12 | setUser({username, password})
13 | }
14 | return (
15 |
16 |
Login
17 | setUsername(e.target.value) }
20 | placeholder='username' />
21 | {" "}
22 | setPassword(e.target.value) }
25 | placeholder='password' />
26 | Submit
27 |
28 | )
29 | }
30 |
31 | export default Login
--------------------------------------------------------------------------------
/reduxToolkitTodo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reduxtoolkittodo",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@reduxjs/toolkit": "^1.9.5",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-redux": "^8.1.2"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.2.15",
20 | "@types/react-dom": "^18.2.7",
21 | "@vitejs/plugin-react": "^4.0.3",
22 | "autoprefixer": "^10.4.15",
23 | "eslint": "^8.45.0",
24 | "eslint-plugin-react": "^7.32.2",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.4.3",
27 | "postcss": "^8.4.29",
28 | "tailwindcss": "^3.3.3",
29 | "vite": "^4.4.5"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/01vitereact/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 |
4 | import App from './App.jsx'
5 |
6 | function MyApp(){
7 | return (
8 |
9 |
Custom App | chai
10 |
11 | )
12 | }
13 |
14 | // const ReactElement = {
15 | // type: 'a',
16 | // props: {
17 | // href: 'https://google.com',
18 | // target: '_blank'
19 | // },
20 | // children: 'Click me to visit google'
21 | // }
22 |
23 | const anotherElement = (
24 | Visit google
25 | )
26 |
27 |
28 |
29 | const anotherUser = "chai aur react"
30 |
31 | const reactElement = React.createElement(
32 | 'a',
33 | {href: 'https://google.com',target: '_blank' },
34 | 'click me to visit google',
35 | anotherElement
36 | )
37 |
38 | ReactDOM.createRoot(document.getElementById('root')).render(
39 |
40 | reactElement
41 |
42 | )
43 |
44 |
45 |
--------------------------------------------------------------------------------
/01basicreact/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "01basicreact",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.17.0",
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 |
--------------------------------------------------------------------------------
/interview-discussion/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import viteLogo from '/vite.svg'
4 | import './App.css'
5 | import { useEffect } from 'react'
6 |
7 | function App() {
8 | console.log("App rendered", Math.random());
9 | const [value, setValue] = useState({
10 | value: 0,
11 | })
12 |
13 |
14 | //const [multipliedValue, setMultipliedValue] = useState(1)
15 | //let multipliedValue = value * 5
16 |
17 | // const multiplybyfive = () => {
18 | // //setMultipliedValue(value * 5)
19 | // setValue(value + 1)
20 | // }
21 |
22 | const clickMe = () => {
23 | setValue({
24 | value: 0,
25 | })
26 | }
27 |
28 |
29 |
30 |
31 |
32 | return (
33 | <>
34 | Main value: {value.value}
35 | Click to multiply by 5
38 | {/* Multiplied value: {multipliedValue} */}
39 | >
40 | )
41 | }
42 |
43 | export default App
44 |
--------------------------------------------------------------------------------
/10todocontextLocal/src/components/TodoForm.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useTodo } from '../contexts/TodoContext';
3 |
4 | function TodoForm() {
5 | const [todo, setTodo] = useState("")
6 | const {addTodo} = useTodo()
7 |
8 | const add = (e) => {
9 | e.preventDefault()
10 |
11 | if (!todo) return
12 |
13 | addTodo({ todo, completed: false})
14 | setTodo("")
15 | }
16 |
17 | return (
18 |
30 | );
31 | }
32 |
33 | export default TodoForm;
--------------------------------------------------------------------------------
/02counter/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import viteLogo from '/vite.svg'
4 | import './App.css'
5 |
6 | function App() {
7 |
8 | const [counter, setCounter] = useState(15)
9 |
10 | //let counter = 15
11 |
12 | const addValue = () => {
13 | //counter = counter + 1
14 | setCounter(prevCounter => prevCounter + 1)
15 | setCounter(prevCounter => prevCounter + 1 )
16 | setCounter(prevCounter => prevCounter + 1)
17 | setCounter(prevCounter => prevCounter + 1)
18 |
19 | }
20 |
21 | const removeValue = () => {
22 | setCounter(counter - 1)
23 | }
24 |
25 | return (
26 | <>
27 | Chai aur react
28 | Counter value: {counter}
29 |
30 | Add value {counter}
33 |
34 | remove value {counter}
37 | footer: {counter}
38 | >
39 | )
40 | }
41 |
42 | export default App
43 |
--------------------------------------------------------------------------------
/customReact/customreact.js:
--------------------------------------------------------------------------------
1 | function customRender(reactElement, container){
2 | /*
3 | const domElement = document.createElement(reactElement.type)
4 | domElement.innerHTML = reactElement.children
5 | domElement.setAttribute('href', reactElement.props.href)
6 | domElement.setAttribute('target', reactElement.props.target)
7 |
8 | container.appendChild(domElement)
9 | */
10 |
11 | const domElement = document.createElement(reactElement.type)
12 | domElement.innerHTML = reactElement.children
13 | for (const prop in reactElement.props) {
14 | if (prop === 'children') continue;
15 | domElement.setAttribute(prop, reactElement.props[prop])
16 | }
17 | container.appendChild(domElement)
18 | }
19 |
20 | const reactElement = {
21 | type: 'a',
22 | props: {
23 | href: 'https://google.com',
24 | target: '_blank'
25 | },
26 | children: 'Click me to visit google'
27 | }
28 |
29 | const mainContainer = document.querySelector('#root')
30 |
31 | customRender(reactElement, mainContainer)
--------------------------------------------------------------------------------
/12MegaBlog/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import './App.css'
4 | import authService from "./appwrite/auth"
5 | import {login, logout} from "./store/authSlice"
6 | import { Footer, Header } from './components'
7 | import { Outlet } from 'react-router-dom'
8 |
9 | function App() {
10 | const [loading, setLoading] = useState(true)
11 | const dispatch = useDispatch()
12 |
13 | useEffect(() => {
14 | authService.getCurrentUser()
15 | .then((userData) => {
16 | if (userData) {
17 | dispatch(login({userData}))
18 | } else {
19 | dispatch(logout())
20 | }
21 | })
22 | .finally(() => setLoading(false))
23 | }, [])
24 |
25 | return !loading ? (
26 |
27 |
28 |
29 |
30 | TODO:
31 |
32 |
33 |
34 |
35 | ) : null
36 | }
37 |
38 | export default App
39 |
--------------------------------------------------------------------------------
/03tailwindprops/src/components/Card.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Card({username, btnText="visit me"}) {
4 | console.log(username);
5 | return (
6 |
7 |
12 |
13 |
14 |
{username}
15 |
16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
17 | debitis?
18 |
19 |
20 | {btnText } →
21 |
22 |
23 |
24 | )
25 | }
26 |
27 | export default Card
--------------------------------------------------------------------------------
/12MegaBlog/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "12megablog",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@reduxjs/toolkit": "^1.9.5",
14 | "@tinymce/tinymce-react": "^4.3.0",
15 | "appwrite": "^13.0.0",
16 | "html-react-parser": "^4.2.2",
17 | "react": "^18.2.0",
18 | "react-dom": "^18.2.0",
19 | "react-hook-form": "^7.46.1",
20 | "react-redux": "^8.1.2",
21 | "react-router-dom": "^6.16.0"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^18.2.15",
25 | "@types/react-dom": "^18.2.7",
26 | "@vitejs/plugin-react": "^4.0.3",
27 | "autoprefixer": "^10.4.15",
28 | "eslint": "^8.45.0",
29 | "eslint-plugin-react": "^7.32.2",
30 | "eslint-plugin-react-hooks": "^4.6.0",
31 | "eslint-plugin-react-refresh": "^0.4.3",
32 | "postcss": "^8.4.30",
33 | "tailwindcss": "^3.3.3",
34 | "vite": "^4.4.5"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/AuthLayout.jsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react'
2 | import {useSelector} from 'react-redux'
3 | import {useNavigate} from 'react-router-dom'
4 |
5 | export default function Protected({children, authentication = true}) {
6 |
7 | const navigate = useNavigate()
8 | const [loader, setLoader] = useState(true)
9 | const authStatus = useSelector(state => state.auth.status)
10 |
11 | useEffect(() => {
12 | //TODO: make it more easy to understand
13 |
14 | // if (authStatus ===true){
15 | // navigate("/")
16 | // } else if (authStatus === false) {
17 | // navigate("/login")
18 | // }
19 |
20 | //let authValue = authStatus === true ? true : false
21 |
22 | if(authentication && authStatus !== authentication){
23 | navigate("/login")
24 | } else if(!authentication && authStatus !== authentication){
25 | navigate("/")
26 | }
27 | setLoader(false)
28 | }, [authStatus, navigate, authentication])
29 |
30 | return loader ? Loading... : <>{children}>
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/components/AddTodo.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react'
2 | import {useDispatch} from 'react-redux'
3 | import {addTodo} from '../features/todo/todoSlice'
4 |
5 | function AddTodo() {
6 |
7 | const [input, setInput] = useState('')
8 | const dispatch = useDispatch()
9 |
10 | const addTodoHandler = (e) => {
11 | e.preventDefault()
12 | dispatch(addTodo(input))
13 | setInput('')
14 | }
15 |
16 | return (
17 |
32 | )
33 | }
34 |
35 | export default AddTodo
--------------------------------------------------------------------------------
/04bgChanger/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 |
4 | function App() {
5 | const [color, setColor] = useState("olive")
6 |
7 | return (
8 |
11 |
12 |
13 | setColor("red")}
15 | className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
16 | style={{backgroundColor: "red"}}
17 | >Red
18 | setColor("green")}
20 | className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
21 | style={{backgroundColor: "green"}}
22 | >Green
23 | setColor("blue")}
25 | className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
26 | style={{backgroundColor: "blue"}}
27 | >Blue
28 |
29 |
30 |
31 | )
32 | }
33 |
34 | export default App
35 |
--------------------------------------------------------------------------------
/09themeswitcher/src/App.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { useEffect, useState } from 'react'
3 | import './App.css'
4 | import { ThemeProvider } from './contexts/theme'
5 | import ThemeBtn from './components/ThemeBtn'
6 | import Card from './components/Card'
7 |
8 | function App() {
9 | const [themeMode, setThemeMode] = useState("light")
10 |
11 | const lightTheme = () => {
12 | setThemeMode("light")
13 | }
14 |
15 | const darkTheme = () => {
16 | setThemeMode("dark")
17 | }
18 |
19 | // actual change in theme
20 |
21 | useEffect(() => {
22 | document.querySelector('html').classList.remove("light", "dark")
23 | document.querySelector('html').classList.add(themeMode)
24 | }, [themeMode])
25 |
26 |
27 | return (
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | )
42 | }
43 |
44 | export default App
45 |
--------------------------------------------------------------------------------
/09themeswitcher/src/components/ThemeBtn.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useTheme from '../contexts/theme';
3 |
4 | export default function ThemeBtn() {
5 |
6 | const {themeMode, lightTheme, darkTheme} = useTheme()
7 | const onChangeBtn = (e) => {
8 | const darkModeStatus = e.currentTarget.checked
9 | if (darkModeStatus) {
10 | darkTheme()
11 | } else {
12 | lightTheme()
13 | }
14 | }
15 | return (
16 |
17 |
24 |
25 | Toggle Theme
26 |
27 | );
28 | }
--------------------------------------------------------------------------------
/02counter/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/12MegaBlog/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/01vitereact/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/03tailwindprops/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/04bgChanger/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/07reactRouter/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/08miniContext/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/09themeswitcher/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/05passwordGenerator/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/06currencyConvertor/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/10todocontextLocal/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/interview-discussion/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/02counter/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/08miniContext/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/interview-discussion/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react'
2 | import appwriteService from "../appwrite/config";
3 | import {Container, PostCard} from '../components'
4 |
5 | function Home() {
6 | const [posts, setPosts] = useState([])
7 |
8 | useEffect(() => {
9 | appwriteService.getPosts().then((posts) => {
10 | if (posts) {
11 | setPosts(posts.documents)
12 | }
13 | })
14 | }, [])
15 |
16 | if (posts.length === 0) {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 | Login to read posts
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 | return (
32 |
33 |
34 |
35 | {posts.map((post) => (
36 |
39 | ))}
40 |
41 |
42 |
43 | )
44 | }
45 |
46 | export default Home
--------------------------------------------------------------------------------
/03tailwindprops/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7 | line-height: 1.5;
8 | font-weight: 400;
9 |
10 | color-scheme: light dark;
11 | color: rgba(255, 255, 255, 0.87);
12 | background-color: #242424;
13 |
14 | font-synthesis: none;
15 | text-rendering: optimizeLegibility;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | -webkit-text-size-adjust: 100%;
19 | }
20 |
21 | a {
22 | font-weight: 500;
23 | color: #646cff;
24 | text-decoration: inherit;
25 | }
26 | a:hover {
27 | color: #535bf2;
28 | }
29 |
30 | body {
31 | margin: 0;
32 | display: flex;
33 | place-items: center;
34 | min-width: 320px;
35 | min-height: 100vh;
36 | }
37 |
38 | h1 {
39 | font-size: 3.2em;
40 | line-height: 1.1;
41 | }
42 |
43 | button {
44 | border-radius: 8px;
45 | border: 1px solid transparent;
46 | padding: 0.6em 1.2em;
47 | font-size: 1em;
48 | font-weight: 500;
49 | font-family: inherit;
50 | background-color: #1a1a1a;
51 | cursor: pointer;
52 | transition: border-color 0.25s;
53 | }
54 | button:hover {
55 | border-color: #646cff;
56 | }
57 | button:focus,
58 | button:focus-visible {
59 | outline: 4px auto -webkit-focus-ring-color;
60 | }
61 |
62 | @media (prefers-color-scheme: light) {
63 | :root {
64 | color: #213547;
65 | background-color: #ffffff;
66 | }
67 | a:hover {
68 | color: #747bff;
69 | }
70 | button {
71 | background-color: #f9f9f9;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/07reactRouter/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 | import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
6 | import Layout from './Layout.jsx'
7 | import Home from './components/Home/Home.jsx'
8 | import About from './components/About/About.jsx'
9 | import Contact from './components/Contact/Contact.jsx'
10 | import User from './components/User/User.jsx'
11 | import Github, { githubInfoLoader } from './components/Github/Github.jsx'
12 |
13 | // const router = createBrowserRouter([
14 | // {
15 | // path: '/',
16 | // element: ,
17 | // children: [
18 | // {
19 | // path: "",
20 | // element:
21 | // },
22 | // {
23 | // path: "about",
24 | // element:
25 | // },
26 | // {
27 | // path: "contact",
28 | // element:
29 | // }
30 | // ]
31 | // }
32 | // ])
33 |
34 | const router = createBrowserRouter(
35 | createRoutesFromElements(
36 | }>
37 | } />
38 | } />
39 | } />
40 | } />
41 | }
45 | />
46 |
47 | )
48 | )
49 |
50 | ReactDOM.createRoot(document.getElementById('root')).render(
51 |
52 |
53 | ,
54 | )
55 |
--------------------------------------------------------------------------------
/07reactRouter/src/components/About/About.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function About() {
4 | return (
5 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 | React development is carried out by passionate developers
17 |
18 |
19 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum omnis voluptatem
20 | accusantium nemo perspiciatis delectus atque autem! Voluptatum tenetur beatae unde
21 | aperiam, repellat expedita consequatur! Officiis id consequatur atque doloremque!
22 |
23 |
24 | Nobis minus voluptatibus pariatur dignissimos libero quaerat iure expedita at?
25 | Asperiores nemo possimus nesciunt dicta veniam aspernatur quam mollitia.
26 |
27 |
28 |
29 |
30 |
31 | );
32 | }
--------------------------------------------------------------------------------
/12MegaBlog/src/appwrite/auth.js:
--------------------------------------------------------------------------------
1 | import conf from '../conf/conf.js';
2 | import { Client, Account, ID } from "appwrite";
3 |
4 |
5 | export class AuthService {
6 | client = new Client();
7 | account;
8 |
9 | constructor() {
10 | this.client
11 | .setEndpoint(conf.appwriteUrl)
12 | .setProject(conf.appwriteProjectId);
13 | this.account = new Account(this.client);
14 |
15 | }
16 |
17 | async createAccount({email, password, name}) {
18 | try {
19 | const userAccount = await this.account.create(ID.unique(), email, password, name);
20 | if (userAccount) {
21 | // call another method
22 | return this.login({email, password});
23 | } else {
24 | return userAccount;
25 | }
26 | } catch (error) {
27 | throw error;
28 | }
29 | }
30 |
31 | async login({email, password}) {
32 | try {
33 | return await this.account.createEmailSession(email, password);
34 | } catch (error) {
35 | throw error;
36 | }
37 | }
38 |
39 | async getCurrentUser() {
40 | try {
41 | return await this.account.get();
42 | } catch (error) {
43 | console.log("Appwrite serive :: getCurrentUser :: error", error);
44 | }
45 |
46 | return null;
47 | }
48 |
49 | async logout() {
50 |
51 | try {
52 | await this.account.deleteSessions();
53 | } catch (error) {
54 | console.log("Appwrite serive :: logout :: error", error);
55 | }
56 | }
57 | }
58 |
59 | const authService = new AuthService();
60 |
61 | export default authService
62 |
63 |
64 |
--------------------------------------------------------------------------------
/12MegaBlog/src/components/RTE.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Editor } from '@tinymce/tinymce-react';
3 | import {Controller } from 'react-hook-form';
4 |
5 |
6 | export default function RTE({name, control, label, defaultValue =""}) {
7 | return (
8 |
9 | {label && {label} }
10 |
11 | (
15 |
49 | )}
50 | />
51 |
52 |
53 | )
54 | }
55 |
56 |
--------------------------------------------------------------------------------
/reduxToolkitTodo/src/components/Todos.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 | import {removeTodo} from '../features/todo/todoSlice'
4 |
5 | function Todos() {
6 | const todos = useSelector(state => state.todos)
7 | const dispatch = useDispatch()
8 |
9 | return (
10 | <>
11 | Todos
12 |
13 | {todos.map((todo) => (
14 |
18 | {todo.text}
19 | dispatch(removeTodo(todo.id))}
21 | className="text-white bg-red-500 border-0 py-1 px-4 focus:outline-none hover:bg-red-600 rounded text-md"
22 | >
23 |
31 |
36 |
37 |
38 |
39 | ))}
40 |
41 | >
42 | )
43 | }
44 |
45 | export default Todos
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Container, Logo, LogoutBtn} from '../index'
3 | import { Link } from 'react-router-dom'
4 | import {useSelector} from 'react-redux'
5 | import { useNavigate } from 'react-router-dom'
6 |
7 | function Header() {
8 | const authStatus = useSelector((state) => state.auth.status)
9 | const navigate = useNavigate()
10 |
11 | const navItems = [
12 | {
13 | name: 'Home',
14 | slug: "/",
15 | active: true
16 | },
17 | {
18 | name: "Login",
19 | slug: "/login",
20 | active: !authStatus,
21 | },
22 | {
23 | name: "Signup",
24 | slug: "/signup",
25 | active: !authStatus,
26 | },
27 | {
28 | name: "All Posts",
29 | slug: "/all-posts",
30 | active: authStatus,
31 | },
32 | {
33 | name: "Add Post",
34 | slug: "/add-post",
35 | active: authStatus,
36 | },
37 | ]
38 |
39 |
40 | return (
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | {navItems.map((item) =>
52 | item.active ? (
53 |
54 | navigate(item.slug)}
56 | className='inline-bock px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
57 | >{item.name}
58 |
59 | ) : null
60 | )}
61 | {authStatus && (
62 |
63 |
64 |
65 | )}
66 |
67 |
68 |
69 |
70 | )
71 | }
72 |
73 | export default Header
--------------------------------------------------------------------------------
/06currencyConvertor/src/components/InputBox.jsx:
--------------------------------------------------------------------------------
1 | import React, {useId} from 'react'
2 |
3 | function InputBox({
4 | label,
5 | amount,
6 | onAmountChange,
7 | onCurrencyChange,
8 | currencyOptions = [],
9 | selectCurrency = "usd",
10 | amountDisable = false,
11 | currencyDisable = false,
12 | className = "",
13 | }) {
14 | const amountInputId = useId()
15 |
16 | return (
17 |
18 |
19 |
20 | {label}
21 |
22 | onAmountChange && onAmountChange(Number(e.target.value))}
30 | />
31 |
32 |
33 |
Currency Type
34 |
onCurrencyChange && onCurrencyChange(e.target.value)}
38 | disabled={currencyDisable}
39 | >
40 |
41 | {currencyOptions.map((currency) => (
42 |
43 | {currency}
44 |
45 | ))}
46 |
47 |
48 |
49 |
50 | );
51 | }
52 |
53 | export default InputBox;
--------------------------------------------------------------------------------
/10todocontextLocal/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import {TodoProvider} from './contexts'
3 | import './App.css'
4 | import TodoForm from './components/TodoForm'
5 | import TodoItem from './components/TodoItem'
6 |
7 | function App() {
8 | const [todos, setTodos] = useState([])
9 |
10 | const addTodo = (todo) => {
11 | setTodos((prev) => [{id: Date.now(), ...todo}, ...prev] )
12 | }
13 |
14 | const updateTodo = (id, todo) => {
15 | setTodos((prev) => prev.map((prevTodo) => (prevTodo.id === id ? todo : prevTodo )))
16 |
17 |
18 | }
19 |
20 | const deleteTodo = (id) => {
21 | setTodos((prev) => prev.filter((todo) => todo.id !== id))
22 | }
23 |
24 | const toggleComplete = (id) => {
25 | //console.log(id);
26 | setTodos((prev) =>
27 | prev.map((prevTodo) =>
28 | prevTodo.id === id ? { ...prevTodo,
29 | completed: !prevTodo.completed } : prevTodo))
30 | }
31 |
32 | useEffect(() => {
33 | const todos = JSON.parse(localStorage.getItem("todos"))
34 |
35 | if (todos && todos.length > 0) {
36 | setTodos(todos)
37 | }
38 | }, [])
39 |
40 | useEffect(() => {
41 | localStorage.setItem("todos", JSON.stringify(todos))
42 | }, [todos])
43 |
44 |
45 |
46 |
47 | return (
48 |
49 |
50 |
51 |
Manage Your Todos
52 |
53 | {/* Todo form goes here */}
54 |
55 |
56 |
57 | {/*Loop and Add TodoItem here */}
58 | {todos.map((todo) => (
59 |
62 |
63 |
64 | ))}
65 |
66 |
67 |
68 |
69 | )
70 | }
71 |
72 | export default App
73 |
--------------------------------------------------------------------------------
/12MegaBlog/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 | import { Provider } from 'react-redux'
6 | import store from './store/store.js'
7 | import { RouterProvider, createBrowserRouter } from 'react-router-dom'
8 | import Home from './pages/Home.jsx'
9 | import { AuthLayout, Login } from './components/index.js'
10 |
11 |
12 | import AddPost from "./pages/AddPost";
13 | import Signup from './pages/Signup'
14 | import EditPost from "./pages/EditPost";
15 |
16 | import Post from "./pages/Post";
17 |
18 | import AllPosts from "./pages/AllPosts";
19 |
20 | const router = createBrowserRouter([
21 | {
22 | path: "/",
23 | element: ,
24 | children: [
25 | {
26 | path: "/",
27 | element: ,
28 | },
29 | {
30 | path: "/login",
31 | element: (
32 |
33 |
34 |
35 | ),
36 | },
37 | {
38 | path: "/signup",
39 | element: (
40 |
41 |
42 |
43 | ),
44 | },
45 | {
46 | path: "/all-posts",
47 | element: (
48 |
49 | {" "}
50 |
51 |
52 | ),
53 | },
54 | {
55 | path: "/add-post",
56 | element: (
57 |
58 | {" "}
59 |
60 |
61 | ),
62 | },
63 | {
64 | path: "/edit-post/:slug",
65 | element: (
66 |
67 | {" "}
68 |
69 |
70 | ),
71 | },
72 | {
73 | path: "/post/:slug",
74 | element: ,
75 | },
76 | ],
77 | },
78 | ])
79 |
80 | ReactDOM.createRoot(document.getElementById('root')).render(
81 |
82 |
83 |
84 |
85 | ,
86 | )
87 |
--------------------------------------------------------------------------------
/10todocontextLocal/src/components/TodoItem.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useTodo } from '../contexts/TodoContext';
3 |
4 | function TodoItem({ todo }) {
5 | const [isTodoEditable, setIsTodoEditable] = useState(false)
6 | const [todoMsg, setTodoMsg] = useState(todo.todo)
7 | const {updateTodo, deleteTodo, toggleComplete} = useTodo()
8 |
9 | const editTodo = () => {
10 | updateTodo(todo.id, {...todo, todo: todoMsg})
11 | setIsTodoEditable(false)
12 | }
13 | const toggleCompleted = () => {
14 | //console.log(todo.id);
15 | toggleComplete(todo.id)
16 | }
17 |
18 | return (
19 |
24 |
30 | setTodoMsg(e.target.value)}
37 | readOnly={!isTodoEditable}
38 | />
39 | {/* Edit, Save Button */}
40 | {
43 | if (todo.completed) return;
44 |
45 | if (isTodoEditable) {
46 | editTodo();
47 | } else setIsTodoEditable((prev) => !prev);
48 | }}
49 | disabled={todo.completed}
50 | >
51 | {isTodoEditable ? "📁" : "✏️"}
52 |
53 | {/* Delete Todo Button */}
54 | deleteTodo(todo.id)}
57 | >
58 | ❌
59 |
60 |
61 | );
62 | }
63 |
64 | export default TodoItem;
65 |
--------------------------------------------------------------------------------
/07reactRouter/src/components/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom';
3 |
4 | export default function Home() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | Download Now
12 | Lorem Ipsum
13 |
14 |
15 |
19 |
27 |
28 |
29 | Download now
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
Lorem Ipsum Yojo
44 |
45 | );
46 | }
--------------------------------------------------------------------------------
/12MegaBlog/src/pages/Post.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Link, useNavigate, useParams } from "react-router-dom";
3 | import appwriteService from "../appwrite/config";
4 | import { Button, Container } from "../components";
5 | import parse from "html-react-parser";
6 | import { useSelector } from "react-redux";
7 |
8 | export default function Post() {
9 | const [post, setPost] = useState(null);
10 | const { slug } = useParams();
11 | const navigate = useNavigate();
12 |
13 | const userData = useSelector((state) => state.auth.userData);
14 |
15 | const isAuthor = post && userData ? post.userId === userData.$id : false;
16 |
17 | useEffect(() => {
18 | if (slug) {
19 | appwriteService.getPost(slug).then((post) => {
20 | if (post) setPost(post);
21 | else navigate("/");
22 | });
23 | } else navigate("/");
24 | }, [slug, navigate]);
25 |
26 | const deletePost = () => {
27 | appwriteService.deletePost(post.$id).then((status) => {
28 | if (status) {
29 | appwriteService.deleteFile(post.featuredImage);
30 | navigate("/");
31 | }
32 | });
33 | };
34 |
35 | return post ? (
36 |
37 |
38 |
39 |
44 |
45 | {isAuthor && (
46 |
47 |
48 |
49 | Edit
50 |
51 |
52 |
53 | Delete
54 |
55 |
56 | )}
57 |
58 |
59 |
{post.title}
60 |
61 |
62 | {parse(post.content)}
63 |
64 |
65 |
66 | ) : null;
67 | }
68 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # ReactJS In-Depth Tutorial Series
2 |
3 | Welcome to the comprehensive repository dedicated to teaching ReactJS in depth. This series covers not just the basics but dives deep into the intricacies of ReactJS to ensure that you emerge with a solid foundation and deep understanding of the most popular frontend library in the world.
4 |
5 | ## 🌟 Features
6 |
7 | - **In-Depth Explanations**: Each concept is broken down for easier understanding and comprehensive learning.
8 | - **Project-Based Learning**: Multiple projects to ensure that your theoretical knowledge is supplemented with practical experience.
9 | - **Free Video Series**: All lessons are available in video format on our YouTube channel "chai aur code".
10 |
11 | ## 🚀 Getting Started
12 |
13 | 1. Clone this repository:
14 | ```bash
15 | git clone https://github.com/hiteshchoudhary/chai-aur-react.git
16 | ```
17 |
18 | 2. Navigate to each project folder and follow the instructions in the respective README to set up and run the project.
19 |
20 | 3. Parallelly, watch the video lessons on the ["chai aur code" YouTube channel](https://www.youtube.com/channel/UCNQ6FEtztATuaVhZKCY28Yw) for a detailed walk-through.
21 |
22 | ## 📚 Modules & Projects
23 |
24 | 1. **React JS RoadMap**:
25 |
26 | - [Watch Lesson](https://www.youtube.com/watch?v=vz1RlUyrc3w&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige)
27 |
28 | 2. **Create react projects**:
29 | - [Watch Lesson](https://www.youtube.com/watch?v=k3KqQvywToE&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=2)
30 |
31 | 3. **Understand the react flow and structure**:
32 | - [Watch Lesson](https://www.youtube.com/watch?v=yNbnA5pryMg&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=3)
33 | 4. **Create your own react library and JSX**:
34 | - [Watch Lesson](https://www.youtube.com/watch?v=kAOuj6o7Kxs&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=4)
35 |
36 | ... _(on going series)_
37 |
38 | ## 📖 Additional Resources
39 |
40 | - [Official React Documentation](https://reactjs.org/docs/getting-started.html)
41 | - [React Community Support on Discord](https://hitesh.ai/discord)
42 |
43 | ## 💼 Contribution
44 |
45 | Contributions are always welcomed. Feel free to raise issues or send in pull requests. Please do not update the existing code as users when they watch videos, they expect same code in repo.
46 |
47 | ## 📺 "chai aur code" on YouTube
48 |
49 | Don't forget to subscribe to ["chai aur code"](https://www.youtube.com/channel/UCNQ6FEtztATuaVhZKCY28Yw) on YouTube for the entire video series and much more!
50 |
51 | ## 🙏 Acknowledgements
52 |
53 | A big thank you to the React community, Open Source contributors, and all the students and professionals who've provided their feedback and support to make this series better!
54 |
55 | ---
56 |
57 | **Happy Learning!** ✨
58 |
59 | ---
60 |
61 | _Made with ☕️ by HiteshChoudhary_
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react'
2 | import {Link, useNavigate} from 'react-router-dom'
3 | import { login as authLogin } from '../store/authSlice'
4 | import {Button, Input, Logo} from "./index"
5 | import {useDispatch} from "react-redux"
6 | import authService from "../appwrite/auth"
7 | import {useForm} from "react-hook-form"
8 |
9 | function Login() {
10 | const navigate = useNavigate()
11 | const dispatch = useDispatch()
12 | const {register, handleSubmit} = useForm()
13 | const [error, setError] = useState("")
14 |
15 | const login = async(data) => {
16 | setError("")
17 | try {
18 | const session = await authService.login(data)
19 | if (session) {
20 | const userData = await authService.getCurrentUser()
21 | if(userData) dispatch(authLogin(userData));
22 | navigate("/")
23 | }
24 | } catch (error) {
25 | setError(error.message)
26 | }
27 | }
28 |
29 | return (
30 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
Sign in to your account
40 |
41 | Don't have any account?
42 |
46 | Sign Up
47 |
48 |
49 | {error &&
{error}
}
50 |
78 |
79 |
80 | )
81 | }
82 |
83 | export default Login
--------------------------------------------------------------------------------
/06currencyConvertor/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import {InputBox} from './components'
3 | import useCurrencyInfo from './hooks/useCurrencyInfo'
4 |
5 |
6 | function App() {
7 |
8 | const [amount, setAmount] = useState(0)
9 | const [from, setFrom] = useState("usd")
10 | const [to, setTo] = useState("inr")
11 | const [convertedAmount, setConvertedAmount] = useState(0)
12 |
13 | const currencyInfo = useCurrencyInfo(from)
14 |
15 | const options = Object.keys(currencyInfo)
16 |
17 | const swap = () => {
18 | setFrom(to)
19 | setTo(from)
20 | setConvertedAmount(amount)
21 | setAmount(convertedAmount)
22 | }
23 |
24 | const convert = () => {
25 | setConvertedAmount(amount * currencyInfo[to])
26 | }
27 |
28 | return (
29 |
80 | );
81 | }
82 |
83 | export default App
84 |
--------------------------------------------------------------------------------
/05passwordGenerator/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useCallback, useEffect, useRef } from 'react'
2 |
3 |
4 |
5 | function App() {
6 | const [length, setLength] = useState(8)
7 | const [numberAllowed, setNumberAllowed] = useState(false);
8 | const [charAllowed, setCharAllowed] = useState(false)
9 | const [password, setPassword] = useState("")
10 |
11 | //useRef hook
12 | const passwordRef = useRef(null)
13 |
14 | const passwordGenerator = useCallback(() => {
15 | let pass = ""
16 | let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
17 | if (numberAllowed) str += "0123456789"
18 | if (charAllowed) str += "!@#$%^&*-_+=[]{}~`"
19 |
20 | for (let i = 1; i <= length; i++) {
21 | let char = Math.floor(Math.random() * str.length + 1)
22 | pass += str.charAt(char)
23 |
24 | }
25 |
26 | setPassword(pass)
27 |
28 |
29 | }, [length, numberAllowed, charAllowed, setPassword])
30 |
31 | const copyPasswordToClipboard = useCallback(() => {
32 | passwordRef.current?.select();
33 | passwordRef.current?.setSelectionRange(0, 999);
34 | window.navigator.clipboard.writeText(password)
35 | }, [password])
36 |
37 | useEffect(() => {
38 | passwordGenerator()
39 | }, [length, numberAllowed, charAllowed, passwordGenerator])
40 | return (
41 |
42 |
43 |
Password generator
44 |
45 |
53 | copy
57 |
58 |
59 |
94 |
95 |
96 | )
97 | }
98 |
99 | export default App
100 |
--------------------------------------------------------------------------------
/todoContextapiNotes.md:
--------------------------------------------------------------------------------
1 | # todo context api notes
2 |
3 | ## Todo Form UI
4 |
5 | ```javascript
6 | function TodoForm() {
7 |
8 |
9 | return (
10 |
20 | );
21 | }
22 |
23 | export default TodoForm;
24 |
25 |
26 | ```
27 |
28 | ## Todo Item UI
29 |
30 | ```javascript
31 | function TodoItem({ todo }) {
32 |
33 |
34 | return (
35 |
40 |
46 | setTodoMsg(e.target.value)}
53 | readOnly={!isTodoEditable}
54 | />
55 | {/* Edit, Save Button */}
56 | {
59 | if (todo.completed) return;
60 |
61 | if (isTodoEditable) {
62 | editTodo();
63 | } else setIsTodoEditable((prev) => !prev);
64 | }}
65 | disabled={todo.completed}
66 | >
67 | {isTodoEditable ? "📁" : "✏️"}
68 |
69 | {/* Delete Todo Button */}
70 | deleteTodo(todo.id)}
73 | >
74 | ❌
75 |
76 |
77 | );
78 | }
79 |
80 | export default TodoItem;
81 |
82 | ```
83 |
84 | ## App js UI
85 |
86 | ```javascript
87 |
88 |
89 |
Manage Your Todos
90 |
91 | {/* Todo form goes here */}
92 |
93 |
94 | {/*Loop and Add TodoItem here */}
95 |
96 |
97 |
98 | ```
99 |
100 |
101 |
--------------------------------------------------------------------------------
/01basicreact/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/currency.md:
--------------------------------------------------------------------------------
1 | # notes for currency converter app
2 |
3 | ## api link
4 |
5 | ```javascript
6 | let url = `https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`
7 |
8 | ```
9 |
10 | ## input box
11 |
12 | ```javascript
13 |
14 | function InputBox({
15 | label,
16 |
17 | className = "",
18 | }) {
19 |
20 |
21 | return (
22 |
23 |
24 |
25 | label
26 |
27 |
33 |
34 |
35 |
Currency Type
36 |
40 |
41 |
42 | usd
43 |
44 |
45 |
46 |
47 |
48 | );
49 | }
50 |
51 | export default InputBox;
52 |
53 | ```
54 |
55 |
56 | ## app js
57 |
58 | ```javascript
59 | function App() {
60 |
61 |
62 | return (
63 |
105 | );
106 |
107 | ```
--------------------------------------------------------------------------------
/12MegaBlog/src/components/Signup.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react'
2 | import authService from '../appwrite/auth'
3 | import {Link ,useNavigate} from 'react-router-dom'
4 | import {login} from '../store/authSlice'
5 | import {Button, Input, Logo} from './index.js'
6 | import {useDispatch} from 'react-redux'
7 | import {useForm} from 'react-hook-form'
8 |
9 | function Signup() {
10 | const navigate = useNavigate()
11 | const [error, setError] = useState("")
12 | const dispatch = useDispatch()
13 | const {register, handleSubmit} = useForm()
14 |
15 | const create = async(data) => {
16 | setError("")
17 | try {
18 | const userData = await authService.createAccount(data)
19 | if (userData) {
20 | const userData = await authService.getCurrentUser()
21 | if(userData) dispatch(login(userData));
22 | navigate("/")
23 | }
24 | } catch (error) {
25 | setError(error.message)
26 | }
27 | }
28 |
29 | return (
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
Sign up to create account
38 |
39 | Already have an account?
40 |
44 | Sign In
45 |
46 |
47 | {error &&
{error}
}
48 |
49 |
82 |
83 |
84 |
85 | )
86 | }
87 |
88 | export default Signup
--------------------------------------------------------------------------------
/02counter/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/04bgChanger/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/12MegaBlog/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/03tailwindprops/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/07reactRouter/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/08miniContext/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/09themeswitcher/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------