\n
footer: {counter}
\n \n )\n}\n\nexport default App\n" }, { "path": "02counter/src/index.css", "content": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n color-scheme: light dark;\n color: rgba(255, 255, 255, 0.87);\n background-color: #242424;\n\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n}\n\na {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n}\na:hover {\n color: #535bf2;\n}\n\nbody {\n margin: 0;\n display: flex;\n place-items: center;\n min-width: 320px;\n min-height: 100vh;\n}\n\nh1 {\n font-size: 3.2em;\n line-height: 1.1;\n}\n\nbutton {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n}\nbutton:hover {\n border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n :root {\n color: #213547;\n background-color: #ffffff;\n }\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n}\n" }, { "path": "02counter/src/main.jsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\nTailwind test
\n\n
\n )\n}\n\nexport default Card"
},
{
"path": "03tailwindprops/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n color-scheme: light dark;\n color: rgba(255, 255, 255, 0.87);\n background-color: #242424;\n\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n}\n\na {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n}\na:hover {\n color: #535bf2;\n}\n\nbody {\n margin: 0;\n display: flex;\n place-items: center;\n min-width: 320px;\n min-height: 100vh;\n}\n\nh1 {\n font-size: 3.2em;\n line-height: 1.1;\n}\n\nbutton {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n}\nbutton:hover {\n border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n :root {\n color: #213547;\n background-color: #ffffff;\n }\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n}\n"
},
{
"path": "03tailwindprops/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n
\n{username}
\n\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,\n debitis?\n
\n \n\n
\n )\n}\n\nexport default App\n"
},
{
"path": "04bgChanger/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "04bgChanger/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n
\n \n setColor(\"red\")}\n className=\"outline-none px-4 py-1 rounded-full text-white shadow-lg\"\n style={{backgroundColor: \"red\"}}\n >Red\n setColor(\"green\")}\n className=\"outline-none px-4 py-1 rounded-full text-white shadow-lg\"\n style={{backgroundColor: \"green\"}}\n >Green\n setColor(\"blue\")}\n className=\"outline-none px-4 py-1 rounded-full text-white shadow-lg\"\n style={{backgroundColor: \"blue\"}}\n >Blue\n
\n \n
\n \n )\n}\n\nexport default App\n"
},
{
"path": "05passwordGenerator/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "05passwordGenerator/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n Password generator
\n\n copy\n \n
\n \n
\n\n {setLength(e.target.value)}}\n />\n \n
\n \n {\n setNumberAllowed((prev) => !prev);\n }}\n />\n \n
\n \n {\n setCharAllowed((prev) => !prev )\n }}\n />\n \n
\n \n
\n \n);\n}\n\nexport default App\n"
},
{
"path": "06currencyConvertor/src/components/InputBox.jsx",
"content": "import React, {useId} from 'react'\n\nfunction InputBox({\n label,\n amount,\n onAmountChange,\n onCurrencyChange,\n currencyOptions = [],\n selectCurrency = \"usd\",\n amountDisable = false,\n currencyDisable = false,\n className = \"\",\n}) {\n const amountInputId = useId()\n\n return (\n \n {\n e.preventDefault();\n convert()\n \n }}\n >\n
\n \n setAmount(amount)}\n selectCurrency={from}\n onAmountChange={(amount) => setAmount(amount)}\n />\n
\n \n \n swap\n \n
\n \n setTo(currency)}\n selectCurrency={from}\n amountDisable\n />\n
\n \n \n \n
\n );\n}\n\nexport default InputBox;"
},
{
"path": "06currencyConvertor/src/components/index.js",
"content": "import InputBox from './InputBox'\n\nexport {InputBox}"
},
{
"path": "06currencyConvertor/src/hooks/useCurrencyInfo.js",
"content": "import {useEffect, useState} from \"react\"\n\n\nfunction useCurrencyInfo(currency){\n const [data, setData] = useState({})\n useEffect(() => {\n fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)\n .then((res) => res.json())\n .then((res) => setData(res[currency]))\n console.log(data);\n }, [currency])\n console.log(data);\n return data\n}\n\nexport default useCurrencyInfo;"
},
{
"path": "06currencyConvertor/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "06currencyConvertor/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n \n onAmountChange && onAmountChange(Number(e.target.value))}\n />\n
\n \n onCurrencyChange && onCurrencyChange(e.target.value)}\n disabled={currencyDisable}\n >\n \n {currencyOptions.map((currency) => (\n \n ))}\n \n \n
\n Currency Type
\n\n
\n );\n}"
},
{
"path": "07reactRouter/src/components/Contact/Contact.jsx",
"content": "import React from 'react'\n\nexport default function Contact() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n React development is carried out by passionate developers\n
\n\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum omnis voluptatem\n accusantium nemo perspiciatis delectus atque autem! Voluptatum tenetur beatae unde\n aperiam, repellat expedita consequatur! Officiis id consequatur atque doloremque!\n
\n\n Nobis minus voluptatibus pariatur dignissimos libero quaerat iure expedita at?\n Asperiores nemo possimus nesciunt dicta veniam aspernatur quam mollitia.\n
\n\n
\n );\n}"
},
{
"path": "07reactRouter/src/components/Footer/Footer.jsx",
"content": "import React from 'react'\nimport { Link } from 'react-router-dom';\n\nexport default function Footer() {\n return (\n \n );\n}"
},
{
"path": "07reactRouter/src/components/Github/Github.jsx",
"content": "import React, { useEffect, useState } from 'react'\nimport { useLoaderData } from 'react-router-dom'\n\nfunction Github() {\n const data = useLoaderData()\n // const [data, setData] = useState([])\n // useEffect(() => {\n // fetch('https://api.github.com/users/hiteshchoudhary')\n // .then(response => response.json())\n // .then(data => {\n // console.log(data);\n // setData(data)\n // })\n // }, [])\n \n return (\n \n
\n \n
\n \n
\n \n
\n\n \n \n Get in touch: \n
\n\n Fill in the form to start a conversation\n
\n\n\n \n
\n\n \n Acme Inc, Street, State, Postal Code\n
\n \n \n
\n\n \n +44 1234567890\n
\n \n \n
\n \n info@acme.org\n
\n Github followers: {data.followers}\n 
\n
\n )\n}\n\nexport default Github\n\nexport const githubInfoLoader = async () => {\n const response = await fetch('https://api.github.com/users/hiteshchoudhary')\n return response.json()\n}"
},
{
"path": "07reactRouter/src/components/Header/Header.jsx",
"content": "import React from 'react'\nimport {Link, NavLink} from 'react-router-dom'\n\nexport default function Header() {\n return (\n \n \n\n
\n );\n}"
},
{
"path": "07reactRouter/src/components/User/User.jsx",
"content": "import React from 'react'\nimport { useParams } from 'react-router-dom'\n\nfunction User() {\n const {userid} = useParams()\n return (\n \n ![\"image2\"](\"https://i.ibb.co/2M7rtLk/Remote1.png\")
\n
\n\n \n Lorem Ipsum Yojo
\nUser: {userid}
\n )\n}\n\nexport default User"
},
{
"path": "07reactRouter/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "07reactRouter/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\nimport { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'\nimport Layout from './Layout.jsx'\nimport Home from './components/Home/Home.jsx'\nimport About from './components/About/About.jsx'\nimport Contact from './components/Contact/Contact.jsx'\nimport User from './components/User/User.jsx'\nimport Github, { githubInfoLoader } from './components/Github/Github.jsx'\n\n// const router = createBrowserRouter([\n// {\n// path: '/',\n// element: React with Chai and share is important
\n\n
\n )\n}\n\nexport default Login"
},
{
"path": "08miniContext/src/components/Profile.jsx",
"content": "import React, {useContext} from 'react'\nimport UserContext from '../context/UserContext'\n\nfunction Profile() {\n const {user} = useContext(UserContext)\n \n if (!user) return Login
\n setUsername(e.target.value) }\n placeholder='username' />\n {\" \"}\n setPassword(e.target.value) }\n placeholder='password' />\n \nplease login
\n\n return Welcome {user.username}
\n}\n\nexport default Profile"
},
{
"path": "08miniContext/src/context/UserContext.js",
"content": "import React from 'react'\n\nconst UserContext = React.createContext()\n\nexport default UserContext;\n\n"
},
{
"path": "08miniContext/src/context/UserContextProvider.jsx",
"content": "import React from \"react\";\nimport UserContext from \"./UserContext\";\n\nconst UserContextProvider = ({children}) => {\n const [user, setUser] = React.useState(null)\n return(\n \n
\n \n
\n \n
\n\n \n
\n \n \n ![\"product_image1\"](\"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\")
\n \n
\n );\n}\n"
},
{
"path": "09themeswitcher/src/components/ThemeBtn.jsx",
"content": "import React from 'react'\nimport useTheme from '../contexts/theme';\n\nexport default function ThemeBtn() {\n \n const {themeMode, lightTheme, darkTheme} = useTheme()\n const onChangeBtn = (e) => {\n const darkModeStatus = e.currentTarget.checked\n if (darkModeStatus) {\n darkTheme()\n } else {\n lightTheme()\n }\n }\n return (\n \n );\n}"
},
{
"path": "09themeswitcher/src/contexts/theme.js",
"content": "import { createContext, useContext } from \"react\";\n\nexport const ThemeContext = createContext({\n themeMode: \"light\",\n darkTheme: () => {},\n lightTheme: () => {},\n})\n\nexport const ThemeProvider = ThemeContext.Provider\n\nexport default function useTheme(){\n return useContext(ThemeContext)\n}"
},
{
"path": "09themeswitcher/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "09themeswitcher/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n \n \n \n
\n \n Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport\n
\n \n\n \n \n \n \n \n
\n \n $599\n \n Add to cart\n \n
\n \n
\n \n
\n Manage Your Todos
\n\n {/* Todo form goes here */} \n
\n \n {/*Loop and Add TodoItem here */}\n {todos.map((todo) => (\n
\n \n
\n ))}\n \n
\n ) : null\n}\n\nexport default App\n"
},
{
"path": "12MegaBlog/src/appwrite/auth.js",
"content": "import conf from '../conf/conf.js';\nimport { Client, Account, ID } from \"appwrite\";\n\n\nexport class AuthService {\n client = new Client();\n account;\n\n constructor() {\n this.client\n .setEndpoint(conf.appwriteUrl)\n .setProject(conf.appwriteProjectId);\n this.account = new Account(this.client);\n \n }\n\n async createAccount({email, password, name}) {\n try {\n const userAccount = await this.account.create(ID.unique(), email, password, name);\n if (userAccount) {\n // call another method\n return this.login({email, password});\n } else {\n return userAccount;\n }\n } catch (error) {\n throw error;\n }\n }\n\n async login({email, password}) {\n try {\n return await this.account.createEmailSession(email, password);\n } catch (error) {\n throw error;\n }\n }\n\n async getCurrentUser() {\n try {\n return await this.account.get();\n } catch (error) {\n console.log(\"Appwrite serive :: getCurrentUser :: error\", error);\n }\n\n return null;\n }\n\n async logout() {\n\n try {\n await this.account.deleteSessions();\n } catch (error) {\n console.log(\"Appwrite serive :: logout :: error\", error);\n }\n }\n}\n\nconst authService = new AuthService();\n\nexport default authService\n\n\n"
},
{
"path": "12MegaBlog/src/appwrite/config.js",
"content": "import conf from '../conf/conf.js';\nimport { Client, ID, Databases, Storage, Query } from \"appwrite\";\n\nexport class Service{\n client = new Client();\n databases;\n bucket;\n \n constructor(){\n this.client\n .setEndpoint(conf.appwriteUrl)\n .setProject(conf.appwriteProjectId);\n this.databases = new Databases(this.client);\n this.bucket = new Storage(this.client);\n }\n\n async createPost({title, slug, content, featuredImage, status, userId}){\n try {\n return await this.databases.createDocument(\n conf.appwriteDatabaseId,\n conf.appwriteCollectionId,\n slug,\n {\n title,\n content,\n featuredImage,\n status,\n userId,\n }\n )\n } catch (error) {\n console.log(\"Appwrite serive :: createPost :: error\", error);\n }\n }\n\n async updatePost(slug, {title, content, featuredImage, status}){\n try {\n return await this.databases.updateDocument(\n conf.appwriteDatabaseId,\n conf.appwriteCollectionId,\n slug,\n {\n title,\n content,\n featuredImage,\n status,\n\n }\n )\n } catch (error) {\n console.log(\"Appwrite serive :: updatePost :: error\", error);\n }\n }\n\n async deletePost(slug){\n try {\n await this.databases.deleteDocument(\n conf.appwriteDatabaseId,\n conf.appwriteCollectionId,\n slug\n \n )\n return true\n } catch (error) {\n console.log(\"Appwrite serive :: deletePost :: error\", error);\n return false\n }\n }\n\n async getPost(slug){\n try {\n return await this.databases.getDocument(\n conf.appwriteDatabaseId,\n conf.appwriteCollectionId,\n slug\n \n )\n } catch (error) {\n console.log(\"Appwrite serive :: getPost :: error\", error);\n return false\n }\n }\n\n async getPosts(queries = [Query.equal(\"status\", \"active\")]){\n try {\n return await this.databases.listDocuments(\n conf.appwriteDatabaseId,\n conf.appwriteCollectionId,\n queries,\n \n\n )\n } catch (error) {\n console.log(\"Appwrite serive :: getPosts :: error\", error);\n return false\n }\n }\n\n // file upload service\n\n async uploadFile(file){\n try {\n return await this.bucket.createFile(\n conf.appwriteBucketId,\n ID.unique(),\n file\n )\n } catch (error) {\n console.log(\"Appwrite serive :: uploadFile :: error\", error);\n return false\n }\n }\n\n async deleteFile(fileId){\n try {\n await this.bucket.deleteFile(\n conf.appwriteBucketId,\n fileId\n )\n return true\n } catch (error) {\n console.log(\"Appwrite serive :: deleteFile :: error\", error);\n return false\n }\n }\n\n getFilePreview(fileId){\n return this.bucket.getFilePreview(\n conf.appwriteBucketId,\n fileId\n )\n }\n}\n\n\nconst service = new Service()\nexport default service"
},
{
"path": "12MegaBlog/src/components/AuthLayout.jsx",
"content": "import React, {useEffect, useState} from 'react'\nimport {useSelector} from 'react-redux'\nimport {useNavigate} from 'react-router-dom'\n\nexport default function Protected({children, authentication = true}) {\n\n const navigate = useNavigate()\n const [loader, setLoader] = useState(true)\n const authStatus = useSelector(state => state.auth.status)\n\n useEffect(() => {\n //TODO: make it more easy to understand\n\n // if (authStatus ===true){\n // navigate(\"/\")\n // } else if (authStatus === false) {\n // navigate(\"/login\")\n // }\n \n //let authValue = authStatus === true ? true : false\n\n if(authentication && authStatus !== authentication){\n navigate(\"/login\")\n } else if(!authentication && authStatus !== authentication){\n navigate(\"/\")\n }\n setLoader(false)\n }, [authStatus, navigate, authentication])\n\n return loader ? \n \n TODO: \n \n
\n Loading...
: <>{children}\n}\n\n" }, { "path": "12MegaBlog/src/components/Button.jsx", "content": "import React from \"react\";\n\nexport default function Button({\n children,\n type = \"button\",\n bgColor = \"bg-blue-600\",\n textColor = \"text-white\",\n className = \"\",\n ...props\n}) {\n return (\n \n );\n}\n" }, { "path": "12MegaBlog/src/components/Footer/Footer.jsx", "content": "import React from 'react'\nimport { Link } from 'react-router-dom'\nimport Logo from '../Logo'\n\nfunction Footer() {\n return (\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n © Copyright 2023. All Rights Reserved by DevUI.\n
\n\n
\n \n
\n \n Company\n
\n- \n
- \n
- \n
- \n
- \n
\n
\n \n
\n \n Support\n
\n- \n
- \n
- \n
- \n
- \n
\n
\n \n
\n \n Legals\n
\n- \n
- \n
- \n
- \n
\n {label && \n }\n
\n )\n})\n\nexport default Input"
},
{
"path": "12MegaBlog/src/components/Login.jsx",
"content": "import React, {useState} from 'react'\nimport {Link, useNavigate} from 'react-router-dom'\nimport { login as authLogin } from '../store/authSlice'\nimport {Button, Input, Logo} from \"./index\"\nimport {useDispatch} from \"react-redux\"\nimport authService from \"../appwrite/auth\"\nimport {useForm} from \"react-hook-form\"\n\nfunction Login() {\n const navigate = useNavigate()\n const dispatch = useDispatch()\n const {register, handleSubmit} = useForm()\n const [error, setError] = useState(\"\")\n\n const login = async(data) => {\n setError(\"\")\n try {\n const session = await authService.login(data)\n if (session) {\n const userData = await authService.getCurrentUser()\n if(userData) dispatch(authLogin(userData));\n navigate(\"/\")\n }\n } catch (error) {\n setError(error.message)\n }\n }\n\n return (\n \n
\n \n )\n}\n\nexport default Login"
},
{
"path": "12MegaBlog/src/components/Logo.jsx",
"content": "import React from 'react'\n\nfunction Logo({width = '100px'}) {\n return (\n \n \n
\n Sign in to your account
\n\n Don't have any account? \n
{error}
}\n \nLogo
\n )\n}\n\nexport default Logo"
},
{
"path": "12MegaBlog/src/components/PostCard.jsx",
"content": "import React from 'react'\nimport appwriteService from \"../appwrite/config\"\nimport {Link} from 'react-router-dom'\n\nfunction PostCard({$id, title, featuredImage}) {\n \n return (\n \n \n {title}\n
\n \n )\n}\n\n\nexport default PostCard"
},
{
"path": "12MegaBlog/src/components/RTE.jsx",
"content": "import React from 'react'\nimport {Editor } from '@tinymce/tinymce-react';\nimport {Controller } from 'react-hook-form';\n\n\nexport default function RTE({name, control, label, defaultValue =\"\"}) {\n return (\n \n })
\n\n
\n \n {label && }\n\n (\n
\n )\n}\n\n"
},
{
"path": "12MegaBlog/src/components/Select.jsx",
"content": "import React, {useId} from 'react'\n\nfunction Select({\n options,\n label,\n className,\n ...props\n}, ref) {\n const id = useId()\n return (\n \n {label && }\n \n {options?.map((option) => (\n \n ))}\n \n
\n )\n}\n\nexport default React.forwardRef(Select)"
},
{
"path": "12MegaBlog/src/components/Signup.jsx",
"content": "import React, {useState} from 'react'\nimport authService from '../appwrite/auth'\nimport {Link ,useNavigate} from 'react-router-dom'\nimport {login} from '../store/authSlice'\nimport {Button, Input, Logo} from './index.js'\nimport {useDispatch} from 'react-redux'\nimport {useForm} from 'react-hook-form'\n\nfunction Signup() {\n const navigate = useNavigate()\n const [error, setError] = useState(\"\")\n const dispatch = useDispatch()\n const {register, handleSubmit} = useForm()\n\n const create = async(data) => {\n setError(\"\")\n try {\n const userData = await authService.createAccount(data)\n if (userData) {\n const userData = await authService.getCurrentUser()\n if(userData) dispatch(login(userData));\n navigate(\"/\")\n }\n } catch (error) {\n setError(error.message)\n }\n }\n\n return (\n \n
\n )\n}\n\nexport default Signup"
},
{
"path": "12MegaBlog/src/components/container/Container.jsx",
"content": "import React from 'react'\n\nfunction Container({children}) {\n return \n
\n\n \n \n
\n Sign up to create account
\n\n Already have an account? \n
{error}
}\n\n \n{children}
;\n \n}\n\nexport default Container"
},
{
"path": "12MegaBlog/src/components/index.js",
"content": "import Select from \"./Select\";\nimport Header from \"./Header/Header\";\nimport Footer from \"./Footer/Footer\";\nimport Container from \"./container/Container\";\nimport Logo from \"./Logo\";\nimport LogoutBtn from \"./Header/LogoutBtn\";\nimport RTE from \"./RTE\";\nimport Signup from \"./Signup\";\nimport Login from \"./Login\";\nimport Button from \"./Button\";\nimport PostForm from \"./post-form/PostForm\";\nimport PostCard from \"./PostCard\";\nimport AuthLayout from \"./AuthLayout\";\nimport Input from \"./Input\";\nexport {\n Header,\n Footer,\n Container,\n Logo,\n LogoutBtn,\n RTE,\n Signup,\n Login,\n Button,\n PostForm,\n PostCard,\n AuthLayout, \n Input,\n Select,\n}"
},
{
"path": "12MegaBlog/src/components/post-form/PostForm.jsx",
"content": "import React, { useCallback } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { Button, Input, RTE, Select } from \"..\";\nimport appwriteService from \"../../appwrite/config\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useSelector } from \"react-redux\";\n\nexport default function PostForm({ post }) {\n const { register, handleSubmit, watch, setValue, control, getValues } = useForm({\n defaultValues: {\n title: post?.title || \"\",\n slug: post?.$id || \"\",\n content: post?.content || \"\",\n status: post?.status || \"active\",\n },\n });\n\n const navigate = useNavigate();\n const userData = useSelector((state) => state.auth.userData);\n\n const submit = async (data) => {\n if (post) {\n const file = data.image[0] ? await appwriteService.uploadFile(data.image[0]) : null;\n\n if (file) {\n appwriteService.deleteFile(post.featuredImage);\n }\n\n const dbPost = await appwriteService.updatePost(post.$id, {\n ...data,\n featuredImage: file ? file.$id : undefined,\n });\n\n if (dbPost) {\n navigate(`/post/${dbPost.$id}`);\n }\n } else {\n const file = await appwriteService.uploadFile(data.image[0]);\n\n if (file) {\n const fileId = file.$id;\n data.featuredImage = fileId;\n const dbPost = await appwriteService.createPost({ ...data, userId: userData.$id });\n\n if (dbPost) {\n navigate(`/post/${dbPost.$id}`);\n }\n }\n }\n };\n\n const slugTransform = useCallback((value) => {\n if (value && typeof value === \"string\")\n return value\n .trim()\n .toLowerCase()\n .replace(/[^a-zA-Z\\d\\s]+/g, \"-\")\n .replace(/\\s/g, \"-\");\n\n return \"\";\n }, []);\n\n React.useEffect(() => {\n const subscription = watch((value, { name }) => {\n if (name === \"title\") {\n setValue(\"slug\", slugTransform(value.title), { shouldValidate: true });\n }\n });\n\n return () => subscription.unsubscribe();\n }, [watch, slugTransform, setValue]);\n\n return (\n \n );\n}\n"
},
{
"path": "12MegaBlog/src/conf/conf.js",
"content": "const conf = {\n appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL),\n appwriteProjectId: String(import.meta.env.VITE_APPWRITE_PROJECT_ID),\n appwriteDatabaseId: String(import.meta.env.VITE_APPWRITE_DATABASE_ID),\n appwriteCollectionId: String(import.meta.env.VITE_APPWRITE_COLLECTION_ID),\n appwriteBucketId: String(import.meta.env.VITE_APPWRITE_BUCKET_ID),\n}\n// there was a name issue with the import.meta.env.VITE_APPWRITE_URL, it was later fixed in debugging video\n\nexport default conf"
},
{
"path": "12MegaBlog/src/index.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "12MegaBlog/src/main.jsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\nimport { Provider } from 'react-redux'\nimport store from './store/store.js'\nimport { RouterProvider, createBrowserRouter } from 'react-router-dom'\nimport Home from './pages/Home.jsx'\nimport { AuthLayout, Login } from './components/index.js'\n\n\nimport AddPost from \"./pages/AddPost\";\nimport Signup from './pages/Signup'\nimport EditPost from \"./pages/EditPost\";\n\nimport Post from \"./pages/Post\";\n\nimport AllPosts from \"./pages/AllPosts\";\n\nconst router = createBrowserRouter([\n {\n path: \"/\",\n element: \n \n \n
\n )\n}\n\nexport default AddPost"
},
{
"path": "12MegaBlog/src/pages/AllPosts.jsx",
"content": "import React, {useState, useEffect} from 'react'\nimport { Container, PostCard } from '../components'\nimport appwriteService from \"../appwrite/config\";\n\nfunction AllPosts() {\n const [posts, setPosts] = useState([])\n useEffect(() => {}, [])\n appwriteService.getPosts([]).then((posts) => {\n if (posts) {\n setPosts(posts.documents)\n }\n })\n return (\n \n \n \n
\n )\n}\n\nexport default AllPosts"
},
{
"path": "12MegaBlog/src/pages/EditPost.jsx",
"content": "import React, {useEffect, useState} from 'react'\nimport {Container, PostForm} from '../components'\nimport appwriteService from \"../appwrite/config\";\nimport { useNavigate, useParams } from 'react-router-dom';\n\nfunction EditPost() {\n const [post, setPosts] = useState(null)\n const {slug} = useParams()\n const navigate = useNavigate()\n\n useEffect(() => {\n if (slug) {\n appwriteService.getPost(slug).then((post) => {\n if (post) {\n setPosts(post)\n }\n })\n } else {\n navigate('/')\n }\n }, [slug, navigate])\n return post ? (\n \n {posts.map((post) => (\n
\n \n
\n ))}\n \n \n \n
\n ) : null\n}\n\nexport default EditPost"
},
{
"path": "12MegaBlog/src/pages/Home.jsx",
"content": "import React, {useEffect, useState} from 'react'\nimport appwriteService from \"../appwrite/config\";\nimport {Container, PostCard} from '../components'\n\nfunction Home() {\n const [posts, setPosts] = useState([])\n\n useEffect(() => {\n appwriteService.getPosts().then((posts) => {\n if (posts) {\n setPosts(posts.documents)\n }\n })\n }, [])\n \n if (posts.length === 0) {\n return (\n \n \n \n
\n )\n }\n return (\n \n
\n \n
\n \n Login to read posts\n
\n\n \n \n
\n )\n}\n\nexport default Home"
},
{
"path": "12MegaBlog/src/pages/Login.jsx",
"content": "import React from 'react'\nimport { Login as loginComponent } from '../components'\nfunction Login() {\n return (\n \n {posts.map((post) => (\n
\n \n
\n ))}\n \n
\n )\n}\n\nexport default Login"
},
{
"path": "12MegaBlog/src/pages/Post.jsx",
"content": "import React, { useEffect, useState } from \"react\";\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\nimport appwriteService from \"../appwrite/config\";\nimport { Button, Container } from \"../components\";\nimport parse from \"html-react-parser\";\nimport { useSelector } from \"react-redux\";\n\nexport default function Post() {\n const [post, setPost] = useState(null);\n const { slug } = useParams();\n const navigate = useNavigate();\n\n const userData = useSelector((state) => state.auth.userData);\n\n const isAuthor = post && userData ? post.userId === userData.$id : false;\n\n useEffect(() => {\n if (slug) {\n appwriteService.getPost(slug).then((post) => {\n if (post) setPost(post);\n else navigate(\"/\");\n });\n } else navigate(\"/\");\n }, [slug, navigate]);\n\n const deletePost = () => {\n appwriteService.deletePost(post.$id).then((status) => {\n if (status) {\n appwriteService.deleteFile(post.featuredImage);\n navigate(\"/\");\n }\n });\n };\n\n return post ? (\n \n \n \n
\n ) : null;\n}\n"
},
{
"path": "12MegaBlog/src/pages/Signup.jsx",
"content": "import React from 'react'\nimport { Signup as SignupComponent } from '../components'\n\nfunction Signup() {\n return (\n \n
\n \n \n \n \n \n
\n )}\n \n
\n {post.title}
\n\n {parse(post.content)}\n
\n \n
\n )\n}\n\nexport default Signup"
},
{
"path": "12MegaBlog/src/store/authSlice.js",
"content": "import { createSlice } from \"@reduxjs/toolkit\";\n\nconst initialState = {\n status : false,\n userData: null\n}\n\nconst authSlice = createSlice({\n name: \"auth\",\n initialState,\n reducers: {\n login: (state, action) => {\n state.status = true;\n state.userData = action.payload.userData;\n },\n logout: (state) => {\n state.status = false;\n state.userData = null;\n }\n }\n})\n\nexport const {login, logout} = authSlice.actions;\n\nexport default authSlice.reducer;"
},
{
"path": "12MegaBlog/src/store/store.js",
"content": "import {configureStore} from '@reduxjs/toolkit';\nimport authSlice from './authSlice';\n\nconst store = configureStore({\n reducer: {\n auth : authSlice,\n //TODO: add more slices here for posts\n }\n});\n\n\nexport default store;"
},
{
"path": "12MegaBlog/tailwind.config.js",
"content": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n\n"
},
{
"path": "12MegaBlog/vite.config.js",
"content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n})\n"
},
{
"path": "contextNotes.md",
"content": "# Notes for context api\n\n## ThemeBtn UI\n\n```javascript\nexport default function ThemeBtn() {\n \n\n return (\n \n );\n}\n\n\n```\n\n## Card UI\n\n```javascript\nexport default function Card() {\n return (\n \n \n \n \n
\n );\n}\n\n```\n## App UI\n\n```javascript\n\n\n \n \n \n
\n \n Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport\n
\n \n\n \n \n \n \n \n
\n \n $599\n \n Add to cart\n \n
\n \n
\n\n```\n\n## remember to change config in tailwind\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n darkMode: \"class\",\n theme: {\n extend: {},\n },\n plugins: [],\n}\n\n\n\n\n```\n\n"
},
{
"path": "currency.md",
"content": "# notes for currency converter app\n\n## api link\n\n```javascript\nlet url = `https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`\n\n```\n\n## input box\n\n```javascript\n\nfunction InputBox({\n label,\n \n className = \"\",\n}) {\n \n\n return (\n \n
\n \n \n
\n\n \n \n
\n \n
\n );\n}\n\nexport default InputBox;\n\n```\n\n\n## app js\n\n```javascript\nfunction App() {\n \n\n return (\n \n \n
\n \n \n \n \n \n \n
\n Currency Type
\n\n
\n \n );\n\n```"
},
{
"path": "customReact/customreact.js",
"content": "function customRender(reactElement, container){\n /*\n const domElement = document.createElement(reactElement.type)\n domElement.innerHTML = reactElement.children\n domElement.setAttribute('href', reactElement.props.href)\n domElement.setAttribute('target', reactElement.props.target)\n\n container.appendChild(domElement)\n */\n\n const domElement = document.createElement(reactElement.type)\n domElement.innerHTML = reactElement.children\n for (const prop in reactElement.props) {\n if (prop === 'children') continue;\n domElement.setAttribute(prop, reactElement.props[prop])\n }\n container.appendChild(domElement)\n}\n\nconst reactElement = {\n type: 'a',\n props: {\n href: 'https://google.com',\n target: '_blank'\n },\n children: 'Click me to visit google'\n}\n\nconst mainContainer = document.querySelector('#root')\n\ncustomRender(reactElement, mainContainer)"
},
{
"path": "customReact/index.html",
"content": "\n\n\n \n \n \n {\n e.preventDefault();\n \n }}\n >\n
\n \n
\n \n \n swap\n \n
\n \n
\n \n \n Main value: {value.value}
\nMultiplied value: {multipliedValue}
*/}\n \n )\n}\n\nexport default App\n" }, { "path": "interview-discussion/src/index.css", "content": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n color-scheme: light dark;\n color: rgba(255, 255, 255, 0.87);\n background-color: #242424;\n\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n}\n\na {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n}\na:hover {\n color: #535bf2;\n}\n\nbody {\n margin: 0;\n display: flex;\n place-items: center;\n min-width: 320px;\n min-height: 100vh;\n}\n\nh1 {\n font-size: 3.2em;\n line-height: 1.1;\n}\n\nbutton {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n}\nbutton:hover {\n border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n}\n\n@media (prefers-color-scheme: light) {\n :root {\n color: #213547;\n background-color: #ffffff;\n }\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n}\n" }, { "path": "interview-discussion/src/main.jsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n\n \n\n
\n );\n}\n\n```\n\n## About us component\n\n```javascript\nexport default function About() {\n return (\n \n \n
\n\n \n Lorem Ipsum Yojo
\n\n
\n );\n}\n```\n\n## Contact us Component\n\n```javascript\nexport default function Contact() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n React development is carried out by passionate developers\n
\n\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum omnis voluptatem\n accusantium nemo perspiciatis delectus atque autem! Voluptatum tenetur beatae unde\n aperiam, repellat expedita consequatur! Officiis id consequatur atque doloremque!\n
\n\n Nobis minus voluptatibus pariatur dignissimos libero quaerat iure expedita at?\n Asperiores nemo possimus nesciunt dicta veniam aspernatur quam mollitia.\n
\n\n
\n );\n}\n\n```\n\n\n"
},
{
"path": "readme.md",
"content": "# ReactJS In-Depth Tutorial Series\n\nWelcome to the comprehensive repository dedicated to teaching ReactJS in depth. This series covers not just the basics but dives deep into the intricacies of ReactJS to ensure that you emerge with a solid foundation and deep understanding of the most popular frontend library in the world.\n\n## 🌟 Features\n\n- **In-Depth Explanations**: Each concept is broken down for easier understanding and comprehensive learning.\n- **Project-Based Learning**: Multiple projects to ensure that your theoretical knowledge is supplemented with practical experience.\n- **Free Video Series**: All lessons are available in video format on our YouTube channel \"chai aur code\".\n\n## 🚀 Getting Started\n\n1. Clone this repository:\n ```bash\n git clone https://github.com/hiteshchoudhary/chai-aur-react.git\n ```\n\n2. Navigate to each project folder and follow the instructions in the respective README to set up and run the project.\n\n3. Parallelly, watch the video lessons on the [\"chai aur code\" YouTube channel](https://www.youtube.com/channel/UCNQ6FEtztATuaVhZKCY28Yw) for a detailed walk-through.\n\n## 📚 Modules & Projects\n\n1. **React JS RoadMap**:\n \n - [Watch Lesson](https://www.youtube.com/watch?v=vz1RlUyrc3w&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige)\n\n2. **Create react projects**:\n - [Watch Lesson](https://www.youtube.com/watch?v=k3KqQvywToE&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=2)\n\n3. **Understand the react flow and structure**:\n - [Watch Lesson](https://www.youtube.com/watch?v=yNbnA5pryMg&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=3)\n4. **Create your own react library and JSX**:\n - [Watch Lesson](https://www.youtube.com/watch?v=kAOuj6o7Kxs&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=4)\n\n... _(on going series)_\n\n## 📖 Additional Resources\n\n- [Official React Documentation](https://reactjs.org/docs/getting-started.html)\n- [React Community Support on Discord](https://hitesh.ai/discord)\n\n## 💼 Contribution\n\nContributions are always welcomed. Feel free to raise issues or send in pull requests. Please do not update the existing code as users when they watch videos, they expect same code in repo.\n\n## 📺 \"chai aur code\" on YouTube\n\nDon't forget to subscribe to [\"chai aur code\"](https://www.youtube.com/channel/UCNQ6FEtztATuaVhZKCY28Yw) on YouTube for the entire video series and much more!\n\n## 🙏 Acknowledgements\n\nA big thank you to the React community, Open Source contributors, and all the students and professionals who've provided their feedback and support to make this series better!\n\n---\n\n**Happy Learning!** ✨\n\n---\n\n_Made with ☕️ by HiteshChoudhary_"
},
{
"path": "reduxToolkitTodo/.eslintrc.cjs",
"content": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plugin:react/recommended',\n 'plugin:react/jsx-runtime',\n 'plugin:react-hooks/recommended',\n ],\n ignorePatterns: ['dist', '.eslintrc.cjs'],\n parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n settings: { react: { version: '18.2' } },\n plugins: ['react-refresh'],\n rules: {\n 'react-refresh/only-export-components': [\n 'warn',\n { allowConstantExport: true },\n ],\n },\n}\n"
},
{
"path": "reduxToolkitTodo/.gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
},
{
"path": "reduxToolkitTodo/README.md",
"content": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@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\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n"
},
{
"path": "reduxToolkitTodo/index.html",
"content": "\n\n \n \n \n \n \n
\n \n
\n \n
\n \n
\n\n \n \n Get in touch: \n
\n\n Fill in the form to start a conversation\n
\n\n\n \n
\n\n \n Acme Inc, Street, State, Postal Code\n
\n \n \n
\n\n \n +44 1234567890\n
\n \n \n
\n \n info@acme.org\n
\n Learn about redux toolkit
\nTodos
\n - \n {todos.map((todo) => (\n
{todo.text}
\n \n
\n```\n\n\n"
}
]\n
\n Manage Your Todos
\n\n {/* Todo form goes here */} \n
\n \n {/*Loop and Add TodoItem here */}\n
\n