├── 03-React-Components-And-Props ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ ├── components │ │ ├── Card.jsx │ │ └── Navbar.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 02-React-Hooks-(UseState-UseRef) ├── src │ ├── index.css │ ├── main.jsx │ ├── App.jsx │ ├── App.css │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 11-Redux-Toolkit ├── src │ ├── index.css │ ├── api │ │ └── BASE_URL.js │ ├── Layout.jsx │ ├── store │ │ ├── store.js │ │ └── slices │ │ │ └── todosSlice.js │ ├── components │ │ ├── ProtectedRoutes.jsx │ │ └── Navbar.jsx │ ├── main.jsx │ ├── assets │ │ └── react.svg │ └── screens │ │ ├── Home.jsx │ │ ├── Login.jsx │ │ └── Signup.jsx ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── package.json ├── 07-React-Firebase ├── src │ ├── index.css │ ├── Layout.jsx │ ├── config │ │ └── firebase │ │ │ ├── firebaseConfig.js │ │ │ └── firebaseMethods.js │ ├── main.jsx │ ├── pages │ │ ├── login.jsx │ │ ├── register.jsx │ │ └── todo.jsx │ └── assets │ │ └── react.svg ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── README.md ├── index.html ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 08-React-Redux ├── src │ ├── index.css │ ├── config │ │ └── redux │ │ │ ├── store │ │ │ └── store.js │ │ │ └── reducers │ │ │ └── todoSlice.js │ ├── main.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── README.md ├── index.html ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 06-React-Router-DOM ├── src │ ├── index.css │ ├── pages │ │ ├── About.tsx │ │ ├── Skills.jsx │ │ ├── Contact.jsx │ │ ├── Services.jsx │ │ └── Home.jsx │ ├── Layout.jsx │ ├── main.jsx │ └── components │ │ └── Navbar.jsx ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 09-E-Commerce-With-Redux ├── src │ ├── index.css │ ├── config │ │ └── redux │ │ │ ├── store │ │ │ └── store.js │ │ │ └── reducers │ │ │ └── cartSlice.js │ ├── layout.jsx │ ├── main.jsx │ ├── pages │ │ ├── products.jsx │ │ ├── cart.jsx │ │ └── singleproduct.jsx │ └── assets │ │ └── react.svg ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 05-React-Weather-App ├── src │ ├── index.css │ ├── main.jsx │ ├── components │ │ └── Card.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 01-React-Hello-World ├── src │ ├── App.jsx │ ├── main.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg ├── 10-Firebase-Storage ├── vite.config.js ├── src │ ├── main.jsx │ ├── config │ │ └── firebase │ │ │ ├── firebaseConfig.js │ │ │ └── firebaseMethods.js │ ├── index.css │ ├── App.jsx │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public │ └── vite.svg └── 04-React-cCycle-And-UseEffect ├── vite.config.js ├── src ├── main.jsx ├── index.css ├── components │ └── CustomBtn.jsx ├── App.jsx └── assets │ └── react.svg ├── .gitignore ├── index.html ├── README.md ├── package.json ├── eslint.config.js └── public └── vite.svg /03-React-Components-And-Props/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "js-cookie": "^3.0.5" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /07-React-Firebase/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /08-React-Redux/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /06-React-Router-DOM/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /05-React-Weather-App/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | -------------------------------------------------------------------------------- /08-React-Redux/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/api/BASE_URL.js: -------------------------------------------------------------------------------- 1 | export const BASE_URL = import.meta.env.NODE_ENV === "production" ? "" : "http://localhost:8000/api"; -------------------------------------------------------------------------------- /05-React-Weather-App/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /06-React-Router-DOM/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /07-React-Firebase/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /01-React-Hello-World/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | 3 | function App() { 4 | return ( 5 | <> 6 |

Hello World

7 | 8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Outlet } from 'react-router-dom' 3 | 4 | const Layout = () => { 5 | return 6 | } 7 | 8 | export default Layout 9 | -------------------------------------------------------------------------------- /07-React-Firebase/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 | -------------------------------------------------------------------------------- /08-React-Redux/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 | -------------------------------------------------------------------------------- /10-Firebase-Storage/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /01-React-Hello-World/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 | -------------------------------------------------------------------------------- /05-React-Weather-App/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /06-React-Router-DOM/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 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/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 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/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 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/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 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/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 | -------------------------------------------------------------------------------- /07-React-Firebase/src/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | 4 | export default function Layout() { 5 | return ( 6 | <> 7 | 8 | 9 | ) 10 | } -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/store/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import todosReducer from "./slices/todosSlice"; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | todosReducer, 7 | }, 8 | }); -------------------------------------------------------------------------------- /06-React-Router-DOM/src/pages/About.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const About = () => { 4 | return ( 5 | <> 6 |

About Page

7 | 8 | ) 9 | } 10 | 11 | export default About -------------------------------------------------------------------------------- /08-React-Redux/src/config/redux/store/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import todoReducer from "../reducers/todoSlice"; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | todos: todoReducer 7 | } 8 | }); -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/config/redux/store/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import cartReducer from "../reducers/cartSlice" 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | cart: cartReducer, 7 | } 8 | }) -------------------------------------------------------------------------------- /08-React-Redux/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}" 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /05-React-Weather-App/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /06-React-Router-DOM/src/pages/Skills.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Skills = () => { 4 | return ( 5 | <> 6 |

Skills Page

7 | 8 | ) 9 | } 10 | 11 | export default Skills; -------------------------------------------------------------------------------- /06-React-Router-DOM/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /07-React-Firebase/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}" 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /06-React-Router-DOM/src/pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Contact = () => { 4 | return ( 5 | <> 6 |

Contact Page

7 | 8 | ) 9 | } 10 | 11 | export default Contact; -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}" 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /06-React-Router-DOM/src/pages/Services.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Services = () => { 4 | return ( 5 | <> 6 |

Service Page

7 | 8 | ) 9 | } 10 | 11 | export default Services; -------------------------------------------------------------------------------- /01-React-Hello-World/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/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: [require('daisyui')], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /05-React-Weather-App/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /10-Firebase-Storage/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [ 7 | react(), 8 | tailwindcss(), 9 | ], 10 | }) 11 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /06-React-Router-DOM/src/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Outlet } from 'react-router-dom'; 3 | import Navbar from "./components/Navbar" 4 | 5 | const layout = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default layout; -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/layout.jsx: -------------------------------------------------------------------------------- 1 | import { Link, Outlet } from "react-router-dom"; 2 | 3 | export default function Layout() { 4 | return ( 5 | <> 6 |
7 | Products 8 | Cart 9 |
10 | 11 | 12 | ); 13 | }; 14 | 15 | -------------------------------------------------------------------------------- /08-React-Redux/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import App from './App.jsx'; 3 | import './index.css'; 4 | import { Provider } from 'react-redux'; 5 | import { store } from './config/redux/store/store.js'; 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /07-React-Firebase/.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 | -------------------------------------------------------------------------------- /08-React-Redux/.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 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/.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 | -------------------------------------------------------------------------------- /01-React-Hello-World/.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 | -------------------------------------------------------------------------------- /05-React-Weather-App/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /06-React-Router-DOM/.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 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/.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 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/.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 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/.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 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/.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 | -------------------------------------------------------------------------------- /10-Firebase-Storage/.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 | .env 26 | -------------------------------------------------------------------------------- /01-React-Hello-World/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/components/ProtectedRoutes.jsx: -------------------------------------------------------------------------------- 1 | import Cookies from "js-cookie"; 2 | import { Navigate } from "react-router-dom"; 3 | 4 | const ProtectedRoute = ({ children }) => { 5 | const token = Cookies.get("access_token"); 6 | console.log(token); 7 | 8 | if (!token) { 9 | return ; 10 | } 11 | 12 | return children; 13 | }; 14 | 15 | export default ProtectedRoute; 16 | -------------------------------------------------------------------------------- /05-React-Weather-App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06-React-Router-DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10-Firebase-Storage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Todo App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /08-React-Redux/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 | -------------------------------------------------------------------------------- /01-React-Hello-World/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 | -------------------------------------------------------------------------------- /05-React-Weather-App/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /06-React-Router-DOM/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 | -------------------------------------------------------------------------------- /07-React-Firebase/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 | -------------------------------------------------------------------------------- /08-React-Redux/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Redux Todo 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10-Firebase-Storage/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 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/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 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/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 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/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 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/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 | -------------------------------------------------------------------------------- /07-React-Firebase/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Todo App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10-Firebase-Storage/src/config/firebase/firebaseConfig.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | 3 | const firebaseConfig = { 4 | apiKey: import.meta.env.VITE_API_KEY, 5 | authDomain: import.meta.env.VITE_AUTH_DOMAIN, 6 | projectId: import.meta.env.VITE_PROJECT_ID, 7 | storageBucket: import.meta.env.VITE_STORAGE_BUCKET, 8 | messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID, 9 | appId: import.meta.env.VITE_APP_ID 10 | }; 11 | 12 | // Initialize Firebase 13 | const app = initializeApp(firebaseConfig); 14 | 15 | export default app; -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/src/index.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | 6 | button { 7 | width: 150px; 8 | height: 40px; 9 | border-radius: 6px; 10 | background-color: black; 11 | margin-right: 10px; 12 | color: white; 13 | border: none; 14 | font-size: 18px; 15 | cursor: pointer; 16 | } 17 | 18 | p{ 19 | font-size: 25px; 20 | text-align: center; 21 | font-family: sans-serif; 22 | } 23 | 24 | div{ 25 | margin: 10px 0 0 0; 26 | font-family: sans-serif; 27 | font-size: x-large; 28 | } -------------------------------------------------------------------------------- /07-React-Firebase/src/config/firebase/firebaseConfig.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | 3 | // web app's Firebase configuration 4 | const firebaseConfig = { 5 | apiKey: "AIzaSyBtAjj90S3HVFhfj6m6hI5ul_lHfjC3Ct8", 6 | authDomain: "react-todo-121.firebaseapp.com", 7 | projectId: "react-todo-121", 8 | storageBucket: "react-todo-121.appspot.com", 9 | messagingSenderId: "506210755593", 10 | appId: "1:506210755593:web:9819b814a03d5122b604d8" 11 | }; 12 | 13 | // Initialize Firebase 14 | const app = initializeApp(firebaseConfig); 15 | 16 | export default app; -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/src/components/CustomBtn.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | 3 | function CustomBtn({ title, color }) { 4 | useEffect(() => { 5 | console.log("component mounted") 6 | 7 | return () => { 8 | console.log("component unmount") 9 | } 10 | }, []) 11 | return ( 12 | 18 | ) 19 | } 20 | 21 | export default CustomBtn; -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/config/redux/reducers/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice, nanoid } from "@reduxjs/toolkit"; 2 | 3 | export const cartSlice = createSlice({ 4 | name: "Carts", 5 | initialState: { 6 | cart: [], 7 | }, 8 | reducers: { 9 | addToCart: (state, action) => { 10 | state.cart.push({ 11 | product: action.payload.products, 12 | id: nanoid(), 13 | }); 14 | }, 15 | removeFromCart: (state, action) => { 16 | state.cart.splice(action.payload.index, 1); 17 | } 18 | } 19 | }); 20 | 21 | export const { addToCart, removeFromCart } = cartSlice.actions; 22 | export default cartSlice.reducer; -------------------------------------------------------------------------------- /01-React-Hello-World/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-hello-world", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /10-Firebase-Storage/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | .heading { 8 | font-size: 30px; 9 | color: red; 10 | text-align: center; 11 | font-family: sans-serif; 12 | margin: 20px 0 0 0; 13 | } 14 | 15 | .file { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | height: 30vh; 20 | flex-direction: column; 21 | gap: 20px; 22 | } 23 | 24 | button { 25 | background-color: black; 26 | padding: 10px; 27 | font-size: 18px; 28 | border: none; 29 | outline: none; 30 | color: white; 31 | cursor: pointer; 32 | } 33 | 34 | .img { 35 | display: flex; 36 | justify-content: center; 37 | gap: 10px; 38 | width: 100vw; 39 | } 40 | 41 | img { 42 | width: 120px; 43 | height: 120px; 44 | } -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02-todo-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /07-React-Firebase/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import './index.css' 3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom' 4 | import Layout from './Layout'; 5 | import Register from './pages/register'; 6 | import Todo from './pages/todo'; 7 | import Login from './pages/login'; 8 | 9 | const router = createBrowserRouter([{ 10 | path: '/', 11 | element: , 12 | children: [{ 13 | path: "", 14 | element: , 15 | }, { 16 | path: "register", 17 | element: 18 | }, { 19 | path: "todo", 20 | element: , 21 | }] 22 | }]); 23 | 24 | createRoot(document.getElementById('root')).render( 25 | 26 | 27 | ) 28 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Card = (props) => { 4 | return ( 5 |
6 |
7 | Movie 10 |
11 |
12 |

New movie is released!

13 |

Click the button to watch on Jetflix app.

14 |
15 | 16 |
17 |
18 |
19 | ) 20 | } 21 | 22 | export default Card; -------------------------------------------------------------------------------- /10-Firebase-Storage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10-firebase-storage", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^11.0.1", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.13.0", 19 | "@types/react": "^18.3.11", 20 | "@types/react-dom": "^18.3.1", 21 | "@vitejs/plugin-react": "^4.3.3", 22 | "eslint": "^9.13.0", 23 | "eslint-plugin-react": "^7.37.1", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.13", 26 | "globals": "^15.11.0", 27 | "vite": "^5.4.9" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "04-react-ccycle-and-useeffect", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.7.5", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "eslint": "^9.9.0", 23 | "eslint-plugin-react": "^7.35.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.9", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /08-React-Redux/src/config/redux/reducers/todoSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice, nanoid } from "@reduxjs/toolkit"; 2 | 3 | export const todoSlice = createSlice({ 4 | name: "Todos", 5 | initialState: { 6 | todo: [] 7 | }, 8 | reducers: { 9 | addTodo: (state, action) => { 10 | state.todo.push({ 11 | title: action.payload.title, 12 | id: nanoid() 13 | }); 14 | }, 15 | removeTodo: (state, action) => { 16 | state.todo.splice(action.payload.index, 1); 17 | }, 18 | editTodo: (state, action) => { 19 | const { title, index } = action.payload; 20 | state.todo[index].title = title; 21 | } 22 | } 23 | }); 24 | 25 | export const { addTodo, removeTodo, editTodo } = todoSlice.actions; 26 | export default todoSlice.reducer; 27 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/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 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /05-React-Weather-App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "05-weather-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.7.7", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.20", 23 | "eslint": "^9.9.0", 24 | "eslint-plugin-react": "^7.35.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.9", 27 | "globals": "^15.9.0", 28 | "postcss": "^8.4.45", 29 | "tailwindcss": "^3.4.10", 30 | "vite": "^5.4.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11-redux-toolkit", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^2.6.1", 14 | "@tailwindcss/vite": "^4.1.1", 15 | "react": "^19.0.0", 16 | "react-dom": "^19.0.0", 17 | "react-redux": "^9.2.0", 18 | "react-router-dom": "^7.5.0", 19 | "tailwindcss": "^4.1.1" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.21.0", 23 | "@types/react": "^19.0.10", 24 | "@types/react-dom": "^19.0.4", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "eslint": "^9.21.0", 27 | "eslint-plugin-react-hooks": "^5.1.0", 28 | "eslint-plugin-react-refresh": "^0.4.19", 29 | "globals": "^15.15.0", 30 | "vite": "^6.2.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /06-React-Router-DOM/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "06-react-router-dom", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.26.2" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.20", 23 | "eslint": "^9.9.0", 24 | "eslint-plugin-react": "^7.35.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.9", 27 | "globals": "^15.9.0", 28 | "postcss": "^8.4.45", 29 | "tailwindcss": "^3.4.10", 30 | "vite": "^5.4.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-react-components-and-props", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "daisyui": "^4.12.10", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.20", 23 | "eslint": "^9.9.0", 24 | "eslint-plugin-react": "^7.35.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.9", 27 | "globals": "^15.9.0", 28 | "postcss": "^8.4.41", 29 | "tailwindcss": "^3.4.10", 30 | "vite": "^5.4.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /08-React-Redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "08-react-redux", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^2.2.7", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-redux": "^9.1.2" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.9.0", 20 | "@types/react": "^18.3.3", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react": "^4.3.1", 23 | "autoprefixer": "^10.4.20", 24 | "eslint": "^9.9.0", 25 | "eslint-plugin-react": "^7.35.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.9", 28 | "globals": "^15.9.0", 29 | "postcss": "^8.4.47", 30 | "tailwindcss": "^3.4.13", 31 | "vite": "^5.4.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /07-React-Firebase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "07-react-firebase", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^10.13.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-router-dom": "^6.26.2" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.9.0", 20 | "@types/react": "^18.3.3", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react": "^4.3.1", 23 | "autoprefixer": "^10.4.20", 24 | "eslint": "^9.9.0", 25 | "eslint-plugin-react": "^7.35.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.9", 28 | "globals": "^15.9.0", 29 | "postcss": "^8.4.47", 30 | "tailwindcss": "^3.4.13", 31 | "vite": "^5.4.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /01-React-Hello-World/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 | 44 | body { 45 | margin-top: 20px; 46 | } 47 | 48 | h1 { 49 | text-align: center; 50 | font-family: sans-serif; 51 | text-decoration: underline; 52 | } -------------------------------------------------------------------------------- /06-React-Router-DOM/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import { RouterProvider, createBrowserRouter } from 'react-router-dom'; 3 | import './index.css'; 4 | import Layout from "./Layout"; 5 | import Home from "./pages/Home"; 6 | import About from "./pages/About"; 7 | import Contact from "./pages/Contact" 8 | import Services from "./pages/Services" 9 | import Skills from "./pages/Skills" 10 | 11 | 12 | const router = createBrowserRouter([{ 13 | path: '/', 14 | element: , 15 | children: [{ 16 | path: "", 17 | element: , 18 | }, { 19 | path: "about", 20 | element: 21 | }, { 22 | path: "contact", 23 | element: , 24 | }, { 25 | path: "services", 26 | element: , 27 | }, { 28 | path: "skills", 29 | element: , 30 | }] 31 | }]); 32 | 33 | createRoot(document.getElementById('root')).render( 34 | 35 | 36 | ) 37 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Card from "./components/Card"; 2 | import Navbar from "./components/Navbar"; 3 | 4 | export default function Home() { 5 | 6 | const arr = ["https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp", 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ5AbIbTmeZeaI9GKb68JB_qHrmkS4szqcsg&s', "https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp", 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ5AbIbTmeZeaI9GKb68JB_qHrmkS4szqcsg&s', "https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp", 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ5AbIbTmeZeaI9GKb68JB_qHrmkS4szqcsg&s'] 7 | 8 | return ( 9 | <> 10 | 11 |
12 | {arr.map(item => )} 13 |
14 | 15 | ) 16 | } -------------------------------------------------------------------------------- /11-Redux-Toolkit/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | 6 | export default [ 7 | { ignores: ['dist'] }, 8 | { 9 | files: ['**/*.{js,jsx}'], 10 | languageOptions: { 11 | ecmaVersion: 2020, 12 | globals: globals.browser, 13 | parserOptions: { 14 | ecmaVersion: 'latest', 15 | ecmaFeatures: { jsx: true }, 16 | sourceType: 'module', 17 | }, 18 | }, 19 | plugins: { 20 | 'react-hooks': reactHooks, 21 | 'react-refresh': reactRefresh, 22 | }, 23 | rules: { 24 | ...js.configs.recommended.rules, 25 | ...reactHooks.configs.recommended.rules, 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | 'react-refresh/only-export-components': [ 28 | 'warn', 29 | { allowConstantExport: true }, 30 | ], 31 | }, 32 | }, 33 | ] 34 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import App from './layout.jsx'; 3 | import './index.css'; 4 | import { createBrowserRouter, RouterProvider } from 'react-router-dom'; 5 | import Layout from './layout.jsx'; 6 | import Products from './pages/products.jsx'; 7 | import SingleProduct from './pages/singleproduct.jsx'; 8 | import { Provider } from 'react-redux'; 9 | import { store } from './config/redux/store/store.js'; 10 | import Cart from './pages/cart.jsx'; 11 | 12 | const router = createBrowserRouter([{ 13 | path: "/", 14 | element: , 15 | children: [{ 16 | path: "", 17 | element: 18 | }, { 19 | path: "singleproduct/:id", 20 | element: 21 | }, { 22 | path: "cart", 23 | element: 24 | }] 25 | }]); 26 | 27 | createRoot(document.getElementById('root')).render( 28 | 29 | 30 | 31 | 32 | ) 33 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "09-e-commerce-with-redux", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^2.2.8", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-redux": "^9.1.2", 17 | "react-router-dom": "^6.26.2" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.11.1", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react": "^4.3.2", 24 | "autoprefixer": "^10.4.20", 25 | "eslint": "^9.11.1", 26 | "eslint-plugin-react": "^7.37.0", 27 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 28 | "eslint-plugin-react-refresh": "^0.4.12", 29 | "globals": "^15.9.0", 30 | "postcss": "^8.4.47", 31 | "tailwindcss": "^3.4.13", 32 | "vite": "^5.4.8" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /06-React-Router-DOM/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const Navbar = () => { 5 | return ( 6 | <> 7 |
8 |
9 |

UF-Coder

10 |
11 |
12 | Home 13 | About 14 | Contact 15 | Services 16 | Skills 17 |
18 |
19 | 20 | ) 21 | } 22 | 23 | export default Navbar; -------------------------------------------------------------------------------- /06-React-Router-DOM/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react'; 2 | 3 | export const Home = () => { 4 | const [password, setPassowrd] = useState(false); 5 | const passInp = useRef(); 6 | const showPassword = () => { 7 | if (password) { 8 | passInp.current.type = "password"; 9 | setPassowrd(false); 10 | } else { 11 | passInp.current.type = "text"; 12 | setPassowrd(true); 13 | } 14 | } 15 | 16 | return ( 17 | <> 18 |

Home Page

19 | 24 | 30 | 33 | 34 | ) 35 | } 36 | 37 | export default Home; 38 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import { Provider } from 'react-redux'; 3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom'; 4 | import './index.css'; 5 | import Layout from './Layout.jsx'; 6 | import Home from './screens/Home.jsx'; 7 | import LoginPage from './screens/Login.jsx'; 8 | import SignupPage from './screens/Signup.jsx'; 9 | import { store } from './store/store.js'; 10 | import ProtectedRoute from './components/ProtectedRoutes.jsx'; 11 | 12 | const router = createBrowserRouter([{ 13 | path: "/", 14 | element: , 15 | children: [ 16 | { 17 | path: "", 18 | element: ( 19 | 20 | 21 | 22 | ), 23 | }, 24 | { 25 | path: "/signup", 26 | element: , 27 | }, 28 | { 29 | path: "/login", 30 | element: , 31 | }, 32 | ], 33 | }]); 34 | 35 | createRoot(document.getElementById('root')).render( 36 | 37 | 38 | 39 | ); 40 | -------------------------------------------------------------------------------- /07-React-Firebase/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /08-React-Redux/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /01-React-Hello-World/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /05-React-Weather-App/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /06-React-Router-DOM/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /10-Firebase-Storage/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | export default function Navbar(props){ 2 | return( 3 | <> 4 |
5 |
6 | daisyUI 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 | Tailwind CSS Navbar component 18 |
19 |
20 | 32 |
33 |
34 |
35 | 36 | ) 37 | } -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/pages/products.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export default function Products() { 5 | const [apiData, setApiData] = useState(null); 6 | 7 | useEffect(() => { 8 | (async function () { 9 | const response = await fetch("https://fakestoreapi.com/products"); 10 | const data = await response.json(); 11 | setApiData(data); 12 | })() 13 | }, []) 14 | return ( 15 | <> 16 |

Products

17 |
18 | {apiData && apiData.map(item => { 19 | return
20 |

{item.title.slice(0, 11) + "..."}

21 | Image 22 | 23 |
24 | })} 25 |
26 | 27 | ) 28 | } -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import axios from 'axios'; 3 | 4 | const App = () => { 5 | 6 | const [btn, setBtn] = useState(true); 7 | const [update, setUpdate] = useState("Show And Hide"); 8 | const [add, setAdd] = useState(0); 9 | const updateValue = () => { 10 | const newValue = prompt("Enter New Value"); 11 | setUpdate(newValue); 12 | } 13 | 14 | const addValue = () => { 15 | setAdd(add + 1); 16 | } 17 | 18 | const [data, setData] = useState(null); 19 | 20 | useEffect(() => { 21 | (async function () { 22 | const res = await axios("https://jsonplaceholder.typicode.com/users"); 23 | setData(res.data) 24 | })() 25 | }, []); 26 | 27 | return ( 28 | <> 29 |

Hello World

30 | 31 | 32 | {btn ?

{update}

: null} 33 | 34 | 35 | {data ? data.map(item => { 36 | return
37 | {item.name} 38 |
39 | }) :

Loading.........

} 40 | 41 | ); 42 | }; 43 | 44 | export default App; 45 | 46 | // falsy values in javascript 47 | // 0 48 | // "" or '' or `` 49 | // null 50 | // undefined 51 | // false 52 | // NaN 53 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/pages/cart.jsx: -------------------------------------------------------------------------------- 1 | import { useDispatch, useSelector } from "react-redux"; 2 | import { removeFromCart } from "../config/redux/reducers/cartSlice" 3 | 4 | export default function Cart() { 5 | const selector = useSelector(state => state.cart.cart); 6 | const dispatch = useDispatch(); 7 | 8 | const removeProductFromCart = (index) => { 9 | dispatch(removeFromCart(index)); 10 | } 11 | return ( 12 | <> 13 | {selector.length > 0 ? selector.map((item, index) => { 14 | return
15 |

{item.product.category}

16 |

{item.product.title}

17 |

{item.product.description}

18 | Img 19 |

Price: {item.product.price}$

20 |

Rating: {item.product.rating.rate}

21 |

Remaining: {item.product.rating.count}

22 | 23 |
24 | }) :

No Items In The Cart

} 25 | 26 | ); 27 | }; -------------------------------------------------------------------------------- /05-React-Weather-App/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Card = ({ name, date, src, temperature, weatherText, country }) => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |

{name}, {country}

11 |

{new Date(date).toLocaleString()}

12 |
13 | {weatherText} 18 |
19 |
20 |

{temperature}°C

21 |

{weatherText}

22 |
23 |
24 |
25 | ); 26 | }; 27 | 28 | export default Card; 29 | -------------------------------------------------------------------------------- /08-React-Redux/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-React-Hello-World/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-React-Weather-App/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /06-React-Router-DOM/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /07-React-Firebase/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10-Firebase-Storage/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-React-Hello-World/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 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } */ 69 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/store/slices/todosSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice, nanoid } from "@reduxjs/toolkit"; 2 | 3 | export const todosSlice = createSlice({ 4 | name: "todosReducer", 5 | initialState: { 6 | todos: [] 7 | }, 8 | reducers: { 9 | addTodos: (state, action) => { 10 | const trimmedText = action.payload.trim(); 11 | if (trimmedText.length > 1) { 12 | if (state.todos.some((item) => item.items === trimmedText)) { 13 | console.warn("This item is already added."); 14 | } else { 15 | state.todos.push({ 16 | items: trimmedText, 17 | id: nanoid(), 18 | }); 19 | } 20 | } else { 21 | console.warn("Please enter a valid item."); 22 | } 23 | }, 24 | deleteTodos: (state, action) => { 25 | state.todos = state.todos.filter((_, index) => index !== action.payload); 26 | }, 27 | editTodos: (state, action) => { 28 | const { index, newValue } = action.payload; 29 | if (newValue.trim().length > 1) { 30 | state.todos[index] = { 31 | items: newValue.trim(), 32 | id: nanoid() 33 | }; 34 | } else { 35 | console.warn("Please enter a valid value."); 36 | } 37 | }, 38 | deleteAll: (state) => { 39 | state.todos = []; 40 | } 41 | } 42 | }); 43 | 44 | export const { addTodos, deleteTodos, deleteAll, editTodos } = todosSlice.actions; 45 | export default todosSlice.reducer; 46 | -------------------------------------------------------------------------------- /10-Firebase-Storage/src/config/firebase/firebaseMethods.js: -------------------------------------------------------------------------------- 1 | import app from "./firebaseConfig"; 2 | import { 3 | addDoc, 4 | collection, 5 | getDocs, 6 | getFirestore, 7 | } from "firebase/firestore"; 8 | 9 | import { 10 | getDownloadURL, 11 | getStorage, 12 | ref, 13 | uploadBytes, 14 | } from "firebase/storage"; 15 | 16 | const db = getFirestore(app); 17 | const storage = getStorage(app); 18 | 19 | // For Uploading Image 20 | 21 | const uploadImage = async (file, email) => { 22 | try { 23 | const storageRef = ref(storage, `profileImages/${email}_${Date.now()}`); 24 | await uploadBytes(storageRef, file); 25 | const url = await getDownloadURL(storageRef); 26 | return url; 27 | } catch (error) { 28 | throw new Error("Failed to upload image: " + error.message); 29 | } 30 | }; 31 | 32 | // For Send Data In DB 33 | const sendData = async (obj, colName) => { 34 | try { 35 | const docRef = await addDoc(collection(db, colName), obj); 36 | return docRef.id; // Return document ID on successful add 37 | } catch (err) { 38 | throw new Error(`Error adding document: ${err.message}`); 39 | } 40 | }; 41 | 42 | // For Get All Data From The Collection 43 | const getAllData = async (colName) => { 44 | try { 45 | const dataArr = []; 46 | const querySnapshot = await getDocs(collection(db, colName)); 47 | querySnapshot.forEach((doc) => { 48 | const obj = { ...doc.data(), documentId: doc.id }; 49 | dataArr.push(obj); 50 | }); 51 | // Return array after processing all documents 52 | return dataArr; 53 | } catch (err) { 54 | throw new Error(`Error fetching documents: ${err.message}`); 55 | } 56 | }; 57 | 58 | 59 | export { uploadImage, sendData, getAllData }; -------------------------------------------------------------------------------- /10-Firebase-Storage/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react"; 2 | import { uploadImage, sendData, getAllData } from "./config/firebase/firebaseMethods"; 3 | 4 | export default function App() { 5 | const [image, setImage] = useState([]); 6 | 7 | useEffect(() => { 8 | const getImageFromDb = async () => { 9 | try { 10 | const img = await getAllData("images"); 11 | setImage(img); 12 | console.log(img); 13 | } catch (error) { 14 | throw new Error(error) 15 | } 16 | } 17 | getImageFromDb(); 18 | }, []) 19 | 20 | const getImage = useRef(null); 21 | 22 | const handleImageUpload = async () => { 23 | try { 24 | const file = getImage.current.files[0]; 25 | if (!file) { 26 | alert("Please select an image to upload."); 27 | return; 28 | } 29 | const email = "user@example.com"; 30 | const imageUrl = await uploadImage(file, email); 31 | 32 | const data = { 33 | imageUrl, 34 | uploadedAt: new Date().toISOString(), 35 | }; 36 | await sendData(data, "images"); 37 | alert("Image uploaded successfully!"); 38 | } catch (error) { 39 | console.error("Error uploading image:", error); 40 | alert("Failed to upload image. Please try again."); 41 | } 42 | }; 43 | 44 | return ( 45 | <> 46 |

Getting Image From Database

47 | 48 |
49 | 50 | 51 |
52 |
53 | {image.length > 0 ? image.map((item, index) => { 54 | return Image 55 | }) :

No Image Found

} 56 |
57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/pages/singleproduct.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { useParams } from "react-router-dom" 4 | import { addToCart } from "../config/redux/reducers/cartSlice"; 5 | 6 | export default function SingleProduct() { 7 | const params = useParams(); 8 | const [products, setProducts] = useState(null); 9 | const selector = useSelector(state => state.cart.cart); 10 | const dispatch = useDispatch(); 11 | useEffect(() => { 12 | (async function () { 13 | const response = await fetch(`https://fakestoreapi.com/products/${params.id}`); 14 | const data = await response.json(); 15 | setProducts(data); 16 | })() 17 | }); 18 | 19 | const addProductIntoCart = (event) => { 20 | const isproductInTheCart = selector.some(item => item.product.id === products.id) 21 | event.preventDefault(); 22 | if (products && !isproductInTheCart) { 23 | dispatch(addToCart({ 24 | products, 25 | })); 26 | }; 27 | } 28 | 29 | return ( 30 | <> 31 |

Single Product

32 | {products &&
33 |

{products.category}

34 |

{products.title}

35 |

{products.description}

36 | Img 37 |

Price: {products.price}$

38 |

Rating: {products.rating.rate}

39 |

Remaining: {products.rating.count}

40 | 41 |
} 42 | 43 | ) 44 | } -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from "react"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | const [todo, setTodo] = useState([]); 6 | const getItem = useRef(); 7 | const addTodo = (event) => { 8 | event.preventDefault(); 9 | if (getItem.current.value) { 10 | todo.push(getItem.current.value); 11 | setTodo([...todo]); 12 | getItem.current.value = ''; 13 | } else { 14 | alert("Please Enter a List Item To Add"); 15 | } 16 | } 17 | 18 | const deleteTodo = (index) => { 19 | todo.splice(index, 1); 20 | setTodo([...todo]); 21 | } 22 | 23 | const editTodo = (index) => { 24 | const newValue = prompt("Enter a New Value"); 25 | if (newValue !== todo[index]) { 26 | todo.splice(index, 1, newValue); 27 | setTodo([...todo]); 28 | } else { 29 | alert('Value Cannot Be Same As Previous Value'); 30 | } 31 | } 32 | return ( 33 | <> 34 |
35 |

Todo App

36 |
37 |
38 | 39 | 40 |
41 |
    42 | {todo.map((item, index) => { 43 | return ( 44 |
  • 45 | {item} 46 |
    47 | 48 | 49 |
    50 |
    • 51 | ) 52 | })} 53 |
54 |
55 |
56 | 57 | 58 | ) 59 | } 60 | 61 | export default App; -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #74b7ff; 7 | display: flex; 8 | justify-content: center; 9 | } 10 | 11 | /* Main container styling */ 12 | .main { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | width: 365px; 17 | height: auto; 18 | border-radius: 10px; 19 | margin: 20px 0px; 20 | padding: 20px; 21 | font-family: sans-serif; 22 | background-color: white; 23 | } 24 | 25 | /* Header styling */ 26 | h1 { 27 | font-size: 2rem; 28 | color: #000; 29 | margin-bottom: 20px; 30 | } 31 | 32 | /* Todo form styling */ 33 | .todo-form { 34 | display: flex; 35 | align-items: center; 36 | margin-bottom: 20px; 37 | } 38 | 39 | .todo-input { 40 | padding: 10px; 41 | font-size: 1rem; 42 | border: 1px solid #ddd; 43 | border-radius: 4px; 44 | margin-right: 10px; 45 | } 46 | 47 | .add-button { 48 | padding: 10px 25px; 49 | font-size: 1rem; 50 | color: #fff; 51 | background-color: #007bff; 52 | border: none; 53 | border-radius: 4px; 54 | cursor: pointer; 55 | } 56 | 57 | .add-button:hover { 58 | background-color: rgb(0, 70, 144); 59 | } 60 | 61 | /* Todo list styling */ 62 | .todo-list { 63 | list-style: none; 64 | padding: 0; 65 | margin: 0; 66 | width: 100%; 67 | max-width: 600px; 68 | } 69 | 70 | /* Todo item styling */ 71 | .todo-item { 72 | display: flex; 73 | justify-content: space-between; 74 | align-items: center; 75 | padding: 10px; 76 | border: 1px solid #ddd; 77 | border-radius: 4px; 78 | margin-bottom: 10px; 79 | background-color: #d8d8d8; 80 | } 81 | 82 | .li-buttons { 83 | display: flex; 84 | } 85 | 86 | .delete-button, 87 | .edit-button { 88 | padding: 8px 13px; 89 | font-size: 0.9rem; 90 | border: none; 91 | border-radius: 4px; 92 | cursor: pointer; 93 | margin-left: 5px; 94 | } 95 | 96 | .delete-button { 97 | color: #fff; 98 | background-color: #f80019; 99 | outline: none; 100 | } 101 | 102 | .delete-button:hover { 103 | background-color: #a10000; 104 | } 105 | 106 | .edit-button { 107 | color: #fff; 108 | background-color: #007bff; 109 | outline: none; 110 | } 111 | 112 | .edit-button:hover { 113 | background-color: #0056b3; 114 | } -------------------------------------------------------------------------------- /05-React-Weather-App/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import axios from "axios"; 3 | import Card from "./components/Card"; 4 | 5 | export default function App() { 6 | const [data, setData] = useState([]); 7 | const [loading, setLoading] = useState(false); 8 | const getValue = useRef(null); 9 | 10 | const getWeather = (event) => { 11 | event.preventDefault(); 12 | setLoading(true); 13 | const apiKey = '2aabea5f82e14886a5e131324242408'; 14 | 15 | axios.get(`https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${getValue.current.value}&aqi=no`) 16 | .then((res) => { 17 | const cityExists = data.some(item => item.location.name === res.data.location.name); 18 | if (!cityExists) { 19 | setData([...data, res.data]); 20 | } else { 21 | alert('City already exists.'); 22 | } 23 | getValue.current.value = ''; 24 | setLoading(false); 25 | }) 26 | .catch((err) => { 27 | alert('No such city found'); 28 | getValue.current.value = ''; 29 | setLoading(false); 30 | }); 31 | } 32 | 33 | return ( 34 |
35 |

36 | Weather Forecast 37 |

38 | 39 |
40 |
41 | 47 |
48 |
49 | 54 |
55 |
56 | 57 |
58 | {data.length > 0 ? data.map((item) => ( 59 | 68 | )) :

Start by searching for a city.

} 69 |
70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /07-React-Firebase/src/pages/login.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { loginUser } from "../config/firebase/firebaseMethods"; 4 | 5 | export default function Login() { 6 | const [email, setEmail] = useState(""); 7 | const [password, setPassword] = useState(""); 8 | const navigate = useNavigate(); 9 | 10 | const handleLogin = async (e) => { 11 | e.preventDefault(); // Prevent default form submission 12 | const userObj = { email, password }; 13 | 14 | try { 15 | const userData = await loginUser(userObj); 16 | console.log("User logged in successfully:", userData); 17 | navigate("/todo"); 18 | } catch (error) { 19 | console.error("Error logging in:", error); 20 | alert("Login failed. Please check your credentials."); 21 | } 22 | }; 23 | 24 | return ( 25 |
26 |
27 |

28 | Login 29 |

30 |
31 |
32 | 33 | setEmail(e.target.value)} 39 | className="w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-blue-500" 40 | /> 41 |
42 |
43 | 44 | setPassword(e.target.value)} 50 | className="w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-blue-500" 51 | /> 52 |
53 | 59 |
60 |

61 | Don't have an account? Register 62 |

63 |
64 |
65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /08-React-Redux/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { addTodo, editTodo, removeTodo } from "./config/redux/reducers/todoSlice"; 4 | 5 | export default function App() { 6 | 7 | const todoInputRef = useRef(); 8 | 9 | const dispatch = useDispatch(); 10 | 11 | const selector = useSelector(state => state.todos.todo); 12 | 13 | const addTodoIntoRedux = (event) => { 14 | event.preventDefault(); 15 | const todoTitle = todoInputRef.current.value.trim(); 16 | if (todoTitle) { 17 | dispatch(addTodo({ 18 | title: todoTitle, 19 | })); 20 | todoInputRef.current.value = ""; 21 | } else { 22 | alert("Input cannot be empty"); 23 | } 24 | } 25 | 26 | const removeTodoFromRedux = (index) => { 27 | dispatch(removeTodo({ index })); 28 | } 29 | 30 | const editTodoInRedux = (index) => { 31 | const title = prompt("Enter New Value"); 32 | if (title?.trim()) { 33 | dispatch(editTodo({ index, title })); 34 | } else { 35 | alert("New value cannot be empty"); 36 | } 37 | } 38 | 39 | return ( 40 |
41 |

Todo List

42 | 43 |
44 | 50 | 56 |
57 | 58 |
    59 | {selector.length > 0 ? ( 60 | selector.map(({ id, title }, index) => ( 61 |
  • 65 | {title} 66 |
    67 | 73 | 79 |
    80 |
    • 81 | )) 82 | ) : ( 83 |

    No data found

    84 | )} 85 |
86 |
87 | ); 88 | 89 | } 90 | -------------------------------------------------------------------------------- /07-React-Firebase/src/pages/register.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { signUpUser } from "../config/firebase/firebaseMethods"; 4 | 5 | export default function Register() { 6 | const [name, setName] = useState(""); 7 | const [email, setEmail] = useState(""); 8 | const [password, setPassword] = useState(""); 9 | const navigate = useNavigate(); 10 | 11 | const handleRegister = async (e) => { 12 | e.preventDefault(); 13 | const userObj = { name, email, password }; 14 | 15 | await signUpUser(userObj); 16 | navigate("/"); 17 | }; 18 | 19 | return ( 20 |
21 |
22 |

23 | Register 24 |

25 |
26 |
27 | 28 | setName(e.target.value)} 34 | className="w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-blue-500" 35 | /> 36 |
37 |
38 | 39 | setEmail(e.target.value)} 45 | className="w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-blue-500" 46 | /> 47 |
48 |
49 | 50 | setPassword(e.target.value)} 56 | className="w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-blue-500" 57 | /> 58 |
59 | 65 |
66 |

67 | Already have an account? Login 68 |

69 |
70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /08-React-Redux/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01-React-Hello-World/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05-React-Weather-App/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /07-React-Firebase/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10-Firebase-Storage/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /09-E-Commerce-With-Redux/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-React-Components-And-Props/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04-React-cCycle-And-UseEffect/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02-React-Hooks-(UseState-UseRef)/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /07-React-Firebase/src/config/firebase/firebaseMethods.js: -------------------------------------------------------------------------------- 1 | import app from "./firebaseConfig.js"; 2 | 3 | // Firebase Authentication 4 | import { 5 | getAuth, 6 | createUserWithEmailAndPassword, 7 | signInWithEmailAndPassword, 8 | signOut, 9 | } from "firebase/auth"; 10 | 11 | // Initialize Firebase Authentication 12 | const auth = getAuth(app); 13 | 14 | // Firestore Database 15 | import { 16 | getFirestore, 17 | collection, 18 | addDoc, 19 | getDocs, 20 | deleteDoc, 21 | doc, 22 | updateDoc, 23 | query, 24 | where, 25 | } from "firebase/firestore"; 26 | 27 | // Initialize Firestore database 28 | const db = getFirestore(app); 29 | 30 | 31 | // Sign up user function 32 | let signUpUser = async (obj) => { 33 | try { 34 | const res = await createUserWithEmailAndPassword(auth, obj.email, obj.password); 35 | 36 | // Assign user ID to obj.id and remove password before adding to database 37 | obj.id = res.user.uid; 38 | delete obj.password; 39 | 40 | // Add user to Firestore database 41 | await addDoc(collection(db, "users"), obj); 42 | console.log("User added to database successfully"); 43 | return obj.id; 44 | } catch (err) { 45 | console.error("Error signing up:", err); 46 | throw err.message; // Return error message 47 | } 48 | }; 49 | 50 | // Login user function 51 | let loginUser = async (obj) => { 52 | try { 53 | // Authenticate user 54 | await signInWithEmailAndPassword(auth, obj.email, obj.password); 55 | } catch (err) { 56 | console.error("Error logging in:", err); 57 | throw err.message; 58 | } 59 | }; 60 | 61 | // Sign out user function 62 | const signOutUser = async () => { 63 | try { 64 | await signOut(auth); 65 | console.log("User signed out successfully"); 66 | return "User signed out successfully"; 67 | } catch (error) { 68 | console.error("Error signing out:", error); 69 | throw error.message; 70 | } 71 | }; 72 | 73 | 74 | // Send data to Firestore 75 | const sendData = async (obj, colName) => { 76 | try { 77 | const docRef = await addDoc(collection(db, colName), obj); 78 | return docRef.id; // Return document ID on successful add 79 | } catch (err) { 80 | throw new Error(`Error adding document: ${err.message}`); 81 | } 82 | }; 83 | 84 | // Get all data from a Firestore collection 85 | const getAllData = async (colName) => { 86 | try { 87 | const dataArr = []; 88 | const querySnapshot = await getDocs(collection(db, colName)); 89 | querySnapshot.forEach((doc) => { 90 | const obj = { ...doc.data(), documentId: doc.id }; 91 | dataArr.push(obj); 92 | }); 93 | // Return array after processing all documents 94 | return dataArr; 95 | } catch (err) { 96 | throw new Error(`Error fetching documents: ${err.message}`); 97 | } 98 | }; 99 | 100 | // Delete a document by id from a Firestore collection 101 | const deleteDocument = async (id, collectionName) => { 102 | try { 103 | await deleteDoc(doc(db, collectionName, id)); 104 | // Resolve only after delete is complete 105 | return "Document deleted successfully"; 106 | } catch (err) { 107 | throw new Error(`Error deleting document: ${err.message}`); 108 | } 109 | }; 110 | 111 | // Update a document by id in a Firestore collection 112 | const updateDocument = async (id, obj, collectionName) => { 113 | try { 114 | const documentRef = doc(db, collectionName, id); 115 | await updateDoc(documentRef, obj); // Await the update operation 116 | return "Document updated successfully"; 117 | } catch (err) { 118 | throw new Error(`Error updating document: ${err.message}`); 119 | } 120 | }; 121 | 122 | export { db, sendData, getAllData, deleteDocument, updateDocument, signUpUser, signOutUser, loginUser }; 123 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/screens/Home.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useDispatch, useSelector } from "react-redux" 4 | import { addTodos, deleteAll, deleteTodos, editTodos } from "../store/slices/todosSlice" 5 | import { useState } from "react" 6 | import Navbar from "../components/Navbar" 7 | 8 | export default function Home() { 9 | const { todos } = useSelector((state) => state.todosReducer) 10 | const dispatch = useDispatch() 11 | const [currentTodo, setCurrentTodo] = useState("") 12 | 13 | const handleAdd = (e) => { 14 | e.preventDefault() 15 | if (currentTodo.trim()) { 16 | dispatch(addTodos(currentTodo)) 17 | setCurrentTodo("") 18 | } else { 19 | console.warn("Cannot add an empty task.") 20 | } 21 | } 22 | 23 | const handleEdit = (item, index) => { 24 | const newValue = prompt("Please enter a new value", item) 25 | if (newValue && newValue.trim()) { 26 | dispatch(editTodos({ index, newValue })) 27 | } 28 | } 29 | 30 | return ( 31 | <> 32 | 33 |
34 |
35 | {/* Header with gradient */} 36 |
37 |

Todo List

38 |
39 | 40 |
41 | setCurrentTodo(e.target.value)} 43 | value={currentTodo} 44 | type="text" 45 | className="border border-gray-300 p-2 flex-grow rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200" 46 | placeholder="Add a task..." 47 | /> 48 | 54 | {todos.length > 1 && ( 55 | 61 | )} 62 |
63 | 64 | {todos.length === 0 ? ( 65 |
No tasks yet. Add one above!
66 | ) : ( 67 |
    68 | {todos.map((todo, index) => ( 69 |
  • 73 | {todo.items} 74 |
    75 | 81 | 87 |
    88 |
    • 89 | ))} 90 |
91 | )} 92 | 93 | {todos.length > 0 && ( 94 |
95 | {todos.length} {todos.length === 1 ? "task" : "tasks"} 96 |
97 | )} 98 |
99 |
100 | 101 | ) 102 | } 103 | -------------------------------------------------------------------------------- /07-React-Firebase/src/pages/todo.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react"; 2 | import { deleteDocument, getAllData, sendData, updateDocument, signOutUser } from "../config/firebase/firebaseMethods"; 3 | import { useNavigate } from "react-router-dom"; 4 | 5 | export default function Todo() { 6 | const [data, setData] = useState([]); 7 | const todoVal = useRef(); 8 | const navigate = useNavigate(); 9 | 10 | const addTodo = async () => { 11 | const newTodo = { todo: todoVal.current.value }; 12 | if (todoVal.current.value) { 13 | try { 14 | const documentId = await sendData(newTodo, "todos"); 15 | const newItem = { ...newTodo, documentId }; 16 | setData((prevData) => [...prevData, newItem]); 17 | todoVal.current.value = ""; 18 | } catch (error) { 19 | console.log("Error adding todo:", error); 20 | } 21 | } else { 22 | alert("Input Field Cannot Be Empty"); 23 | } 24 | }; 25 | 26 | const removeTodo = async (index) => { 27 | const todoToRemove = data[index]; 28 | try { 29 | await deleteDocument(todoToRemove.documentId, "todos"); 30 | const updatedData = [...data]; 31 | updatedData.splice(index, 1); 32 | setData(updatedData); 33 | } catch (error) { 34 | console.error("Error removing document: ", error); 35 | } 36 | }; 37 | 38 | const editTodo = async (index) => { 39 | const currentTodo = data[index]; 40 | const newValue = prompt("Enter a New Value", currentTodo.todo); 41 | 42 | if (newValue && newValue !== currentTodo.todo) { 43 | try { 44 | await updateDocument(currentTodo.documentId, { todo: newValue }, "todos"); 45 | const updatedData = [...data]; 46 | updatedData[index] = { ...currentTodo, todo: newValue }; 47 | setData(updatedData); 48 | } catch (error) { 49 | console.error("Error updating document: ", error); 50 | } 51 | } else { 52 | alert("Please Enter A New Value"); 53 | } 54 | }; 55 | 56 | const handleLogout = async () => { 57 | try { 58 | await signOutUser(); 59 | console.log("User logged out successfully"); 60 | navigate("/"); 61 | } catch (error) { 62 | console.error("Error logging out:", error); 63 | } 64 | }; 65 | 66 | useEffect(() => { 67 | getAllData("todos") 68 | .then((fetchedData) => { 69 | setData(fetchedData); 70 | }) 71 | .catch((err) => { 72 | console.log("Error fetching data:", err); 73 | }); 74 | }, []); 75 | 76 | return ( 77 |
78 |
79 |

80 | Todo App Using Firebase 81 |

82 |
83 | 89 | 95 |
96 |
    97 | {data.length > 0 ? ( 98 | data.map((item, index) => ( 99 |
  • 103 | {item.todo} 104 |
    105 | 111 | 117 |
    118 |
    • 119 | )) 120 | ) : ( 121 |

    No Todos Found

    122 | )} 123 |
124 | 130 |
131 |
132 | ); 133 | } 134 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/screens/Login.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useState } from "react" 4 | import { Link, useNavigate } from "react-router-dom" 5 | import { BASE_URL } from "../api/BASE_URL" 6 | 7 | export default function LoginPage() { 8 | const [email, setEmail] = useState("") 9 | const [password, setPassword] = useState("") 10 | const [error, setError] = useState(null); 11 | const navigate = useNavigate() 12 | 13 | const handleSubmit = async (e) => { 14 | e.preventDefault() 15 | try { 16 | if (!email || !password) return setError("Invalid Email Or Password"); 17 | 18 | const payload = { 19 | email, 20 | password 21 | } 22 | 23 | const res = await fetch(`${BASE_URL}/v1/login`, { 24 | method: "POST", 25 | headers: { 26 | "Content-type": "application/json" 27 | }, 28 | credentials: "include", 29 | body: JSON.stringify(payload) 30 | }); 31 | const data = await res.json(); 32 | if (!res.ok) return setError(data.message); 33 | setError(null); 34 | navigate("/"); 35 | } catch (error) { 36 | console.warn(error.message); 37 | setError(error.message) 38 | } 39 | }; 40 | 41 | if (error) console.log(error); 42 | 43 | return ( 44 |
45 |
46 |
47 |

Welcome back

48 |

Sign in to your account to continue

49 |
50 | 51 | {/* Decorative element */} 52 |
53 |
54 |
55 | 56 |
57 |
58 | 61 | setEmail(e.target.value)} 68 | className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none" 69 | placeholder="Enter your email" 70 | /> 71 |
72 | 73 |
74 |
75 | 78 |
79 | setPassword(e.target.value)} 86 | className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none" 87 | placeholder="Enter your password" 88 | /> 89 |
90 | {error &&

{error}

} 91 |
92 | 98 |
99 |
100 | 101 |
102 |

103 | Don't have an account?{" "} 104 | 105 | Sign up 106 | 107 |

108 |
109 |
110 |
111 | ) 112 | } 113 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/screens/Signup.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useState } from "react" 4 | import { Link, useNavigate } from "react-router-dom" 5 | import { BASE_URL } from "../api/BASE_URL" 6 | 7 | export default function SignupPage() { 8 | const [fullname, setfullname] = useState("") 9 | const [email, setEmail] = useState("") 10 | const [password, setPassword] = useState("") 11 | const [confirmPassword, setConfirmPassword] = useState("") 12 | const [error, setError] = useState(null); 13 | const navigate = useNavigate(); 14 | const handleSubmit = async (e) => { 15 | e.preventDefault(); 16 | try { 17 | if (!fullname || !email || !password || !confirmPassword) return setError("Please Enter All Feilds"); 18 | 19 | if (password.length < 8) return setError("Password Must be atleast 8 character long"); 20 | 21 | if (!(password === confirmPassword)) return setError("Password Not Matched"); 22 | 23 | const payload = { 24 | fullname, 25 | email, 26 | password 27 | } 28 | 29 | const res = await fetch(`${BASE_URL}/v1/signup`, { 30 | method: "POST", 31 | headers: { 32 | "Content-type": "application/json" 33 | }, 34 | body: JSON.stringify(payload) 35 | }); 36 | const data = await res.json() 37 | if (!res.ok) return setError(data.message); 38 | 39 | setError(null); 40 | navigate("/login") 41 | } catch (error) { 42 | console.warn(error.message); 43 | setError(error.message) 44 | } 45 | } 46 | 47 | return ( 48 |
49 |
50 |
51 |
52 |

Create an account

53 |

Join us today and start your journey

54 |
55 | 56 | {/* Decorative element */} 57 |
58 |
59 |
60 | 61 |
62 |
63 | 66 | setfullname(e.target.value)} 73 | className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none" 74 | placeholder="Enter your full name" 75 | /> 76 |
77 | 78 |
79 | 82 | setEmail(e.target.value)} 89 | className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none" 90 | placeholder="Enter your email" 91 | /> 92 |
93 | 94 |
95 | 98 | setPassword(e.target.value)} 105 | className={`w-full px-4 py-3 rounded-lg border ${error ? "border-red-500" : "border-gray-300" 106 | } focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none`} 107 | placeholder="Create a password" 108 | /> 109 |

Password must be at least 8 characters long

110 |
111 | 112 |
113 | 116 | setConfirmPassword(e.target.value)} 123 | className={`w-full px-4 py-3 rounded-lg border ${error ? "border-red-500" : "border-gray-300" 124 | } focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 outline-none`} 125 | placeholder="Confirm your password" 126 | /> 127 | {error &&

{error}

} 128 |
129 | 130 |
131 | 137 |
138 |
139 | 140 |
141 |

142 | Already have an account?{" "} 143 | 144 | Sign in 145 | 146 |

147 |
148 |
149 | 150 | {/* Bottom decorative banner */} 151 |
152 |
153 |
154 | ) 155 | } 156 | -------------------------------------------------------------------------------- /11-Redux-Toolkit/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useState } from "react" 4 | import { Link } from "react-router-dom" 5 | 6 | export default function Navbar() { 7 | const [isMenuOpen, setIsMenuOpen] = useState(false) 8 | 9 | const toggleMenu = () => { 10 | setIsMenuOpen(!isMenuOpen) 11 | } 12 | 13 | return ( 14 | 213 | ) 214 | } 215 | --------------------------------------------------------------------------------