Showing preview only (236K chars total). Download the full file or copy to clipboard to get everything.
Repository: hiteshchoudhary/chai-aur-react
Branch: main
Commit: 651285bff5ba
Files: 223
Total size: 195.0 KB
Directory structure:
gitextract_ev68w7bd/
├── .gitignore
├── .vscode/
│ └── settings.json
├── 01basicreact/
│ ├── .gitignore
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src/
│ ├── App.js
│ ├── Chai.jsx
│ └── index.js
├── 01vitereact/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.jsx
│ │ ├── chai.jsx
│ │ └── main.jsx
│ └── vite.config.js
├── 02counter/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── 03tailwindprops/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── Card.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 04bgChanger/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── bun.lockb
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 05passwordGenerator/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 06currencyConvertor/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── InputBox.jsx
│ │ │ └── index.js
│ │ ├── hooks/
│ │ │ └── useCurrencyInfo.js
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 07reactRouter/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── Layout.jsx
│ │ ├── components/
│ │ │ ├── About/
│ │ │ │ └── About.jsx
│ │ │ ├── Contact/
│ │ │ │ └── Contact.jsx
│ │ │ ├── Footer/
│ │ │ │ └── Footer.jsx
│ │ │ ├── Github/
│ │ │ │ └── Github.jsx
│ │ │ ├── Header/
│ │ │ │ └── Header.jsx
│ │ │ ├── Home/
│ │ │ │ └── Home.jsx
│ │ │ └── User/
│ │ │ └── User.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 08miniContext/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Login.jsx
│ │ │ └── Profile.jsx
│ │ ├── context/
│ │ │ ├── UserContext.js
│ │ │ └── UserContextProvider.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── 09themeswitcher/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── Card.jsx
│ │ │ └── ThemeBtn.jsx
│ │ ├── contexts/
│ │ │ └── theme.js
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 10todocontextLocal/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ ├── TodoForm.jsx
│ │ │ ├── TodoItem.jsx
│ │ │ └── index.js
│ │ ├── contexts/
│ │ │ ├── TodoContext.js
│ │ │ └── index.js
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
├── 12MegaBlog/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── bun.lockb
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── appwrite/
│ │ │ ├── auth.js
│ │ │ └── config.js
│ │ ├── components/
│ │ │ ├── AuthLayout.jsx
│ │ │ ├── Button.jsx
│ │ │ ├── Footer/
│ │ │ │ └── Footer.jsx
│ │ │ ├── Header/
│ │ │ │ ├── Header.jsx
│ │ │ │ └── LogoutBtn.jsx
│ │ │ ├── Input.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Logo.jsx
│ │ │ ├── PostCard.jsx
│ │ │ ├── RTE.jsx
│ │ │ ├── Select.jsx
│ │ │ ├── Signup.jsx
│ │ │ ├── container/
│ │ │ │ └── Container.jsx
│ │ │ ├── index.js
│ │ │ └── post-form/
│ │ │ └── PostForm.jsx
│ │ ├── conf/
│ │ │ └── conf.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── pages/
│ │ │ ├── AddPost.jsx
│ │ │ ├── AllPosts.jsx
│ │ │ ├── EditPost.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Post.jsx
│ │ │ └── Signup.jsx
│ │ └── store/
│ │ ├── authSlice.js
│ │ └── store.js
│ ├── tailwind.config.js
│ └── vite.config.js
├── contextNotes.md
├── currency.md
├── customReact/
│ ├── customreact.js
│ └── index.html
├── interview-discussion/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
├── reactRouterNotes.md
├── readme.md
├── reduxToolkitTodo/
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── bun.lockb
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── app/
│ │ │ └── store.js
│ │ ├── components/
│ │ │ ├── AddTodo.jsx
│ │ │ └── Todos.jsx
│ │ ├── features/
│ │ │ └── todo/
│ │ │ └── todoSlice.js
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
└── todoContextapiNotes.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
12MegaBlog/.env
================================================
FILE: .vscode/settings.json
================================================
{
"editor.acceptSuggestionOnEnter": "on",
"liveServer.settings.port": 5501
}
================================================
FILE: 01basicreact/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: 01basicreact/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: 01basicreact/package.json
================================================
{
"name": "01basicreact",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: 01basicreact/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
================================================
FILE: 01basicreact/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: 01basicreact/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: 01basicreact/src/App.js
================================================
import Chai from "./Chai";
function App() {
return (
<>
<Chai/>
</>
);
}
export default App;
================================================
FILE: 01basicreact/src/Chai.jsx
================================================
function Chai(){
return(
<h2>chai in react</h2>
)
}
export default Chai
================================================
FILE: 01basicreact/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
================================================
FILE: 01vitereact/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 01vitereact/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 01vitereact/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 01vitereact/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 01vitereact/package.json
================================================
{
"name": "01vitereact",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 01vitereact/src/App.jsx
================================================
import Chai from "./chai"
function App() {
const username = "chai aur code"
return (
<>
<Chai/>
<h1>chai aur react {username}</h1>
<p>test para</p>
</>
)
}
export default App
================================================
FILE: 01vitereact/src/chai.jsx
================================================
function Chai(){
return(
<h3>chai is ready</h3>
)
}
export default Chai
================================================
FILE: 01vitereact/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
function MyApp(){
return (
<div>
<h1>Custom App | chai</h1>
</div>
)
}
// const ReactElement = {
// type: 'a',
// props: {
// href: 'https://google.com',
// target: '_blank'
// },
// children: 'Click me to visit google'
// }
const anotherElement = (
<a href="https://google.com" target='_blank'>Visit google</a>
)
const anotherUser = "chai aur react"
const reactElement = React.createElement(
'a',
{href: 'https://google.com',target: '_blank' },
'click me to visit google',
anotherElement
)
ReactDOM.createRoot(document.getElementById('root')).render(
reactElement
)
================================================
FILE: 01vitereact/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 02counter/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 02counter/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 02counter/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 02counter/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 02counter/package.json
================================================
{
"name": "02counter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 02counter/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 02counter/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [counter, setCounter] = useState(15)
//let counter = 15
const addValue = () => {
//counter = counter + 1
setCounter(prevCounter => prevCounter + 1)
setCounter(prevCounter => prevCounter + 1 )
setCounter(prevCounter => prevCounter + 1)
setCounter(prevCounter => prevCounter + 1)
}
const removeValue = () => {
setCounter(counter - 1)
}
return (
<>
<h1>Chai aur react</h1>
<h2>Counter value: {counter}</h2>
<button
onClick={addValue}
>Add value {counter}</button>
<br />
<button
onClick={removeValue}
>remove value {counter}</button>
<p>footer: {counter}</p>
</>
)
}
export default App
================================================
FILE: 02counter/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: 02counter/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 02counter/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 03tailwindprops/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 03tailwindprops/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 03tailwindprops/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 03tailwindprops/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 03tailwindprops/package.json
================================================
{
"name": "03tailwindprops",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.28",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 03tailwindprops/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 03tailwindprops/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 03tailwindprops/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Card from './components/Card'
function App() {
const [count, setCount] = useState(0)
let myObj = {
username: "hitesh",
age: 21
}
let newArr = [1, 2, 3]
return (
<>
<h1 className='bg-green-400 text-black p-4 rounded-xl mb-4'>Tailwind test</h1>
<Card username="chaiaurcode" btnText="click me" />
<Card username="hitesh" />
</>
)
}
export default App
================================================
FILE: 03tailwindprops/src/components/Card.jsx
================================================
import React from 'react'
function Card({username, btnText="visit me"}) {
console.log(username);
return (
<div className="relative h-[400px] w-[300px] rounded-md ">
<img
src="https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHVzZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
alt="AirMax Pro"
className="z-0 h-full w-full rounded-md object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
<div className="absolute bottom-4 left-4 text-left">
<h1 className="text-lg font-semibold text-white">{username}</h1>
<p className="mt-2 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
debitis?
</p>
<button className="mt-2 inline-flex cursor-pointer items-center text-sm font-semibold text-white">
{btnText } →
</button>
</div>
</div>
)
}
export default Card
================================================
FILE: 03tailwindprops/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: 03tailwindprops/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 03tailwindprops/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 03tailwindprops/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 04bgChanger/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 04bgChanger/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 04bgChanger/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 04bgChanger/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 04bgChanger/package.json
================================================
{
"name": "04bgchanger",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.28",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 04bgChanger/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 04bgChanger/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 04bgChanger/src/App.jsx
================================================
import { useState } from "react"
function App() {
const [color, setColor] = useState("olive")
return (
<div className="w-full h-screen duration-200"
style={{backgroundColor: color}}
>
<div className="fixed flex flex-wrap justify-center bottom-12 inset-x-0 px-2">
<div className="flex flex-wrap justify-center gap-3 shadow-lg bg-white px-3 py-2 rounded-3xl">
<button
onClick={() => setColor("red")}
className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
style={{backgroundColor: "red"}}
>Red</button>
<button
onClick={() => setColor("green")}
className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
style={{backgroundColor: "green"}}
>Green</button>
<button
onClick={() => setColor("blue")}
className="outline-none px-4 py-1 rounded-full text-white shadow-lg"
style={{backgroundColor: "blue"}}
>Blue</button>
</div>
</div>
</div>
)
}
export default App
================================================
FILE: 04bgChanger/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 04bgChanger/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 04bgChanger/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 04bgChanger/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 05passwordGenerator/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 05passwordGenerator/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 05passwordGenerator/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 05passwordGenerator/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body style="background-color: #000;">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 05passwordGenerator/package.json
================================================
{
"name": "05passwordgenerator",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.28",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 05passwordGenerator/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 05passwordGenerator/src/App.css
================================================
================================================
FILE: 05passwordGenerator/src/App.jsx
================================================
import { useState, useCallback, useEffect, useRef } from 'react'
function App() {
const [length, setLength] = useState(8)
const [numberAllowed, setNumberAllowed] = useState(false);
const [charAllowed, setCharAllowed] = useState(false)
const [password, setPassword] = useState("")
//useRef hook
const passwordRef = useRef(null)
const passwordGenerator = useCallback(() => {
let pass = ""
let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
if (numberAllowed) str += "0123456789"
if (charAllowed) str += "!@#$%^&*-_+=[]{}~`"
for (let i = 1; i <= length; i++) {
let char = Math.floor(Math.random() * str.length + 1)
pass += str.charAt(char)
}
setPassword(pass)
}, [length, numberAllowed, charAllowed, setPassword])
const copyPasswordToClipboard = useCallback(() => {
passwordRef.current?.select();
passwordRef.current?.setSelectionRange(0, 999);
window.navigator.clipboard.writeText(password)
}, [password])
useEffect(() => {
passwordGenerator()
}, [length, numberAllowed, charAllowed, passwordGenerator])
return (
<div className="w-full max-w-md mx-auto shadow-md rounded-lg px-4 py-3 my-8 bg-gray-800 text-orange-500">
<h1 className='text-white text-center my-3'>Password generator</h1>
<div className="flex shadow rounded-lg overflow-hidden mb-4">
<input
type="text"
value={password}
className="outline-none w-full py-1 px-3"
placeholder="Password"
readOnly
ref={passwordRef}
/>
<button
onClick={copyPasswordToClipboard}
className='outline-none bg-blue-700 text-white px-3 py-0.5 shrink-0'
>copy</button>
</div>
<div className='flex text-sm gap-x-2'>
<div className='flex items-center gap-x-1'>
<input
type="range"
min={6}
max={100}
value={length}
className='cursor-pointer'
onChange={(e) => {setLength(e.target.value)}}
/>
<label>Length: {length}</label>
</div>
<div className="flex items-center gap-x-1">
<input
type="checkbox"
defaultChecked={numberAllowed}
id="numberInput"
onChange={() => {
setNumberAllowed((prev) => !prev);
}}
/>
<label htmlFor="numberInput">Numbers</label>
</div>
<div className="flex items-center gap-x-1">
<input
type="checkbox"
defaultChecked={charAllowed}
id="characterInput"
onChange={() => {
setCharAllowed((prev) => !prev )
}}
/>
<label htmlFor="characterInput">Characters</label>
</div>
</div>
</div>
)
}
export default App
================================================
FILE: 05passwordGenerator/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 05passwordGenerator/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 05passwordGenerator/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 05passwordGenerator/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 06currencyConvertor/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 06currencyConvertor/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 06currencyConvertor/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 06currencyConvertor/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 06currencyConvertor/package.json
================================================
{
"name": "06currencyconvertor",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 06currencyConvertor/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 06currencyConvertor/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 06currencyConvertor/src/App.jsx
================================================
import { useState } from 'react'
import {InputBox} from './components'
import useCurrencyInfo from './hooks/useCurrencyInfo'
function App() {
const [amount, setAmount] = useState(0)
const [from, setFrom] = useState("usd")
const [to, setTo] = useState("inr")
const [convertedAmount, setConvertedAmount] = useState(0)
const currencyInfo = useCurrencyInfo(from)
const options = Object.keys(currencyInfo)
const swap = () => {
setFrom(to)
setTo(from)
setConvertedAmount(amount)
setAmount(convertedAmount)
}
const convert = () => {
setConvertedAmount(amount * currencyInfo[to])
}
return (
<div
className="w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat"
style={{
backgroundImage: `url('https://images.pexels.com/photos/3532540/pexels-photo-3532540.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')`,
}}
>
<div className="w-full">
<div className="w-full max-w-md mx-auto border border-gray-60 rounded-lg p-5 backdrop-blur-sm bg-white/30">
<form
onSubmit={(e) => {
e.preventDefault();
convert()
}}
>
<div className="w-full mb-1">
<InputBox
label="From"
amount={amount}
currencyOptions={options}
onCurrencyChange={(currency) => setAmount(amount)}
selectCurrency={from}
onAmountChange={(amount) => setAmount(amount)}
/>
</div>
<div className="relative w-full h-0.5">
<button
type="button"
className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-white rounded-md bg-blue-600 text-white px-2 py-0.5"
onClick={swap}
>
swap
</button>
</div>
<div className="w-full mt-1 mb-4">
<InputBox
label="To"
amount={convertedAmount}
currencyOptions={options}
onCurrencyChange={(currency) => setTo(currency)}
selectCurrency={from}
amountDisable
/>
</div>
<button type="submit" className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg">
Convert {from.toUpperCase()} to {to.toUpperCase()}
</button>
</form>
</div>
</div>
</div>
);
}
export default App
================================================
FILE: 06currencyConvertor/src/components/InputBox.jsx
================================================
import React, {useId} from 'react'
function InputBox({
label,
amount,
onAmountChange,
onCurrencyChange,
currencyOptions = [],
selectCurrency = "usd",
amountDisable = false,
currencyDisable = false,
className = "",
}) {
const amountInputId = useId()
return (
<div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
<div className="w-1/2">
<label htmlFor={amountInputId} className="text-black/40 mb-2 inline-block">
{label}
</label>
<input
id={amountInputId}
className="outline-none w-full bg-transparent py-1.5"
type="number"
placeholder="Amount"
disabled={amountDisable}
value={amount}
onChange={(e) => onAmountChange && onAmountChange(Number(e.target.value))}
/>
</div>
<div className="w-1/2 flex flex-wrap justify-end text-right">
<p className="text-black/40 mb-2 w-full">Currency Type</p>
<select
className="rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none"
value={selectCurrency}
onChange={(e) => onCurrencyChange && onCurrencyChange(e.target.value)}
disabled={currencyDisable}
>
{currencyOptions.map((currency) => (
<option key={currency} value={currency}>
{currency}
</option>
))}
</select>
</div>
</div>
);
}
export default InputBox;
================================================
FILE: 06currencyConvertor/src/components/index.js
================================================
import InputBox from './InputBox'
export {InputBox}
================================================
FILE: 06currencyConvertor/src/hooks/useCurrencyInfo.js
================================================
import {useEffect, useState} from "react"
function useCurrencyInfo(currency){
const [data, setData] = useState({})
useEffect(() => {
fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)
.then((res) => res.json())
.then((res) => setData(res[currency]))
console.log(data);
}, [currency])
console.log(data);
return data
}
export default useCurrencyInfo;
================================================
FILE: 06currencyConvertor/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 06currencyConvertor/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 06currencyConvertor/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 06currencyConvertor/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 07reactRouter/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 07reactRouter/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 07reactRouter/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 07reactRouter/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 07reactRouter/package.json
================================================
{
"name": "07reactrouter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 07reactRouter/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 07reactRouter/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 07reactRouter/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'
import Home from './components/Home/Home'
function App() {
const [count, setCount] = useState(0)
return (
<>
</>
)
}
export default App
================================================
FILE: 07reactRouter/src/Layout.jsx
================================================
import React from 'react'
import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'
import { Outlet } from 'react-router-dom'
function Layout() {
return (
<>
<Header/>
<Outlet />
<Footer />
</>
)
}
export default Layout
================================================
FILE: 07reactRouter/src/components/About/About.jsx
================================================
import React from 'react'
export default function About() {
return (
<div className="py-16 bg-white">
<div className="container m-auto px-6 text-gray-600 md:px-12 xl:px-6">
<div className="space-y-6 md:space-y-0 md:flex md:gap-6 lg:items-center lg:gap-12">
<div className="md:5/12 lg:w-5/12">
<img
src="https://tailus.io/sources/blocks/left-image/preview/images/startup.png"
alt="image"
/>
</div>
<div className="md:7/12 lg:w-6/12">
<h2 className="text-2xl text-gray-900 font-bold md:text-4xl">
React development is carried out by passionate developers
</h2>
<p className="mt-6 text-gray-600">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum omnis voluptatem
accusantium nemo perspiciatis delectus atque autem! Voluptatum tenetur beatae unde
aperiam, repellat expedita consequatur! Officiis id consequatur atque doloremque!
</p>
<p className="mt-4 text-gray-600">
Nobis minus voluptatibus pariatur dignissimos libero quaerat iure expedita at?
Asperiores nemo possimus nesciunt dicta veniam aspernatur quam mollitia.
</p>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: 07reactRouter/src/components/Contact/Contact.jsx
================================================
import React from 'react'
export default function Contact() {
return (
<div className="relative flex items-top justify-center min-h-[700px] bg-white sm:items-center sm:pt-0">
<div className="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div className="mt-8 overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-2">
<div className="p-6 mr-2 bg-gray-100 sm:rounded-lg">
<h1 className="text-3xl sm:text-4xl text-gray-800 font-extrabold tracking-tight">
Get in touch:
</h1>
<p className="text-normal text-lg sm:text-xl font-medium text-gray-600 mt-2">
Fill in the form to start a conversation
</p>
<div className="flex items-center mt-8 text-gray-600">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
className="w-8 h-8 text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<div className="ml-4 text-md tracking-wide font-semibold w-40">
Acme Inc, Street, State, Postal Code
</div>
</div>
<div className="flex items-center mt-4 text-gray-600">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
className="w-8 h-8 text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
<div className="ml-4 text-md tracking-wide font-semibold w-40">
+44 1234567890
</div>
</div>
<div className="flex items-center mt-2 text-gray-600">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
className="w-8 h-8 text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<div className="ml-4 text-md tracking-wide font-semibold w-40">
info@acme.org
</div>
</div>
</div>
<form className="p-6 flex flex-col justify-center">
<div className="flex flex-col">
<label for="name" className="hidden">
Full Name
</label>
<input
type="name"
name="name"
id="name"
placeholder="Full Name"
className="w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/>
</div>
<div className="flex flex-col mt-2">
<label for="email" className="hidden">
Email
</label>
<input
type="email"
name="email"
id="email"
placeholder="Email"
className="w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/>
</div>
<div className="flex flex-col mt-2">
<label for="tel" className="hidden">
Number
</label>
<input
type="tel"
name="tel"
id="tel"
placeholder="Telephone Number"
className="w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
/>
</div>
<button
type="submit"
className="md:w-32 bg-orange-700 hover:bg-blue-dark text-white font-bold py-3 px-6 rounded-lg mt-3 hover:bg-orange-600 transition ease-in-out duration-300"
>
Submit
</button>
</form>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: 07reactRouter/src/components/Footer/Footer.jsx
================================================
import React from 'react'
import { Link } from 'react-router-dom';
export default function Footer() {
return (
<footer className="bg-white border-y">
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0">
<Link to="/" className="flex items-center">
<img
src="https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className="mr-3 h-16"
alt="Logo"
/>
</Link>
</div>
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Resources</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<Link to="/" className="hover:underline">
Home
</Link>
</li>
<li>
<Link to="/about" className="hover:underline">
About
</Link>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Follow us</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<a
href="https://github.com/hiteshchoudhary"
className="hover:underline"
target="_blank"
rel="noreferrer"
>
Github
</a>
</li>
<li>
<Link to="/" className="hover:underline">
Discord
</Link>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Legal</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<Link to="#" className="hover:underline">
Privacy Policy
</Link>
</li>
<li>
<Link to="#" className="hover:underline">
Terms & Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm text-gray-500 sm:text-center">
© 2023
<a href="https://hiteshchoudhary.com/" className="hover:underline">
hiteshchoudhary
</a>
. All Rights Reserved.
</span>
<div className="flex mt-4 space-x-5 sm:justify-center sm:mt-0">
<Link to="#" className="text-gray-500 hover:text-gray-900">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 8 19"
>
<path
fill-rule="evenodd"
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">Facebook page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 21 16"
>
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
</svg>
<span className="sr-only">Discord community</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 17"
>
<path
fill-rule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">Twitter page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">GitHub account</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">Dribbble account</span>
</Link>
</div>
</div>
</div>
</footer>
);
}
================================================
FILE: 07reactRouter/src/components/Github/Github.jsx
================================================
import React, { useEffect, useState } from 'react'
import { useLoaderData } from 'react-router-dom'
function Github() {
const data = useLoaderData()
// const [data, setData] = useState([])
// useEffect(() => {
// fetch('https://api.github.com/users/hiteshchoudhary')
// .then(response => response.json())
// .then(data => {
// console.log(data);
// setData(data)
// })
// }, [])
return (
<div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl'>Github followers: {data.followers}
<img src={data.avatar_url} alt="Git picture" width={300} />
</div>
)
}
export default Github
export const githubInfoLoader = async () => {
const response = await fetch('https://api.github.com/users/hiteshchoudhary')
return response.json()
}
================================================
FILE: 07reactRouter/src/components/Header/Header.jsx
================================================
import React from 'react'
import {Link, NavLink} from 'react-router-dom'
export default function Header() {
return (
<header className="shadow sticky z-50 top-0">
<nav className="bg-white border-gray-200 px-4 lg:px-6 py-2.5">
<div className="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
<Link to="/" className="flex items-center">
<img
src="https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className="mr-3 h-12"
alt="Logo"
/>
</Link>
<div className="flex items-center lg:order-2">
<Link
to="#"
className="text-gray-800 hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Log in
</Link>
<Link
to="#"
className="text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Get started
</Link>
</div>
<div
className="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1"
id="mobile-menu-2"
>
<ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li>
<NavLink
to="/"
className={({isActive}) =>
`block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Home
</NavLink>
</li>
<li>
<NavLink
to="/about"
className={({isActive}) =>
`block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
About
</NavLink>
</li>
<li>
<NavLink
to="/contact"
className={({isActive}) =>
`block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Contact
</NavLink>
</li>
<li>
<NavLink
to="/github"
className={({isActive}) =>
`block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Github
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
}
================================================
FILE: 07reactRouter/src/components/Home/Home.jsx
================================================
import React from 'react'
import { Link } from 'react-router-dom';
export default function Home() {
return (
<div className="mx-auto w-full max-w-7xl">
<aside className="relative overflow-hidden text-black rounded-lg sm:mx-16 mx-2 sm:py-16">
<div className="relative z-10 max-w-screen-xl px-4 pb-20 pt-10 sm:py-24 mx-auto sm:px-6 lg:px-8">
<div className="max-w-xl sm:mt-1 mt-80 space-y-8 text-center sm:text-right sm:ml-auto">
<h2 className="text-4xl font-bold sm:text-5xl">
Download Now
<span className="hidden sm:block text-4xl">Lorem Ipsum</span>
</h2>
<Link
className="inline-flex text-white items-center px-6 py-3 font-medium bg-orange-700 rounded-lg hover:opacity-75"
to="/"
>
<svg
fill="white"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z" />
</svg>
Download now
</Link>
</div>
</div>
<div className="absolute inset-0 w-full sm:my-20 sm:pt-1 pt-12 h-full ">
<img className="w-96" src="https://i.ibb.co/5BCcDYB/Remote2.png" alt="image1" />
</div>
</aside>
<div className="grid place-items-center sm:mt-20">
<img className="sm:w-96 w-48" src="https://i.ibb.co/2M7rtLk/Remote1.png" alt="image2" />
</div>
<h1 className="text-center text-2xl sm:text-5xl py-10 font-medium">Lorem Ipsum Yojo</h1>
</div>
);
}
================================================
FILE: 07reactRouter/src/components/User/User.jsx
================================================
import React from 'react'
import { useParams } from 'react-router-dom'
function User() {
const {userid} = useParams()
return (
<div className='bg-gray-600 text-white text-3xl p-4'>User: {userid}</div>
)
}
export default User
================================================
FILE: 07reactRouter/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 07reactRouter/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
import Layout from './Layout.jsx'
import Home from './components/Home/Home.jsx'
import About from './components/About/About.jsx'
import Contact from './components/Contact/Contact.jsx'
import User from './components/User/User.jsx'
import Github, { githubInfoLoader } from './components/Github/Github.jsx'
// const router = createBrowserRouter([
// {
// path: '/',
// element: <Layout/>,
// children: [
// {
// path: "",
// element: <Home />
// },
// {
// path: "about",
// element: <About />
// },
// {
// path: "contact",
// element: <Contact />
// }
// ]
// }
// ])
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<Layout />}>
<Route path='' element={<Home />} />
<Route path='about' element={<About />} />
<Route path='contact' element={<Contact />} />
<Route path='user/:userid' element={<User />} />
<Route
loader={githubInfoLoader}
path='github'
element={<Github />}
/>
</Route>
)
)
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
)
================================================
FILE: 07reactRouter/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 07reactRouter/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 08miniContext/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 08miniContext/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 08miniContext/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 08miniContext/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 08miniContext/package.json
================================================
{
"name": "08minicontext",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 08miniContext/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 08miniContext/src/App.jsx
================================================
import './App.css'
import Login from './components/Login'
import Profile from './components/Profile'
import UserContextProvider from './context/UserContextProvider'
function App() {
return (
<UserContextProvider>
<h1>React with Chai and share is important</h1>
<Login />
<Profile />
</UserContextProvider>
)
}
export default App
================================================
FILE: 08miniContext/src/components/Login.jsx
================================================
import React, {useState, useContext} from 'react'
import UserContext from '../context/UserContext'
function Login() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const {setUser} = useContext(UserContext)
const handleSubmit = (e) => {
e.preventDefault()
setUser({username, password})
}
return (
<div>
<h2>Login</h2>
<input type='text'
value={username}
onChange={(e) => setUsername(e.target.value) }
placeholder='username' />
{" "}
<input type='text'
value={password}
onChange={(e) => setPassword(e.target.value) }
placeholder='password' />
<button onClick={handleSubmit}>Submit</button>
</div>
)
}
export default Login
================================================
FILE: 08miniContext/src/components/Profile.jsx
================================================
import React, {useContext} from 'react'
import UserContext from '../context/UserContext'
function Profile() {
const {user} = useContext(UserContext)
if (!user) return <div>please login</div>
return <div>Welcome {user.username}</div>
}
export default Profile
================================================
FILE: 08miniContext/src/context/UserContext.js
================================================
import React from 'react'
const UserContext = React.createContext()
export default UserContext;
================================================
FILE: 08miniContext/src/context/UserContextProvider.jsx
================================================
import React from "react";
import UserContext from "./UserContext";
const UserContextProvider = ({children}) => {
const [user, setUser] = React.useState(null)
return(
<UserContext.Provider value={{user, setUser}}>
{children}
</UserContext.Provider>
)
}
export default UserContextProvider
================================================
FILE: 08miniContext/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: 08miniContext/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 08miniContext/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 09themeswitcher/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 09themeswitcher/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 09themeswitcher/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 09themeswitcher/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 09themeswitcher/package.json
================================================
{
"name": "09themeswitcher",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 09themeswitcher/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 09themeswitcher/src/App.css
================================================
================================================
FILE: 09themeswitcher/src/App.jsx
================================================
import { useEffect, useState } from 'react'
import './App.css'
import { ThemeProvider } from './contexts/theme'
import ThemeBtn from './components/ThemeBtn'
import Card from './components/Card'
function App() {
const [themeMode, setThemeMode] = useState("light")
const lightTheme = () => {
setThemeMode("light")
}
const darkTheme = () => {
setThemeMode("dark")
}
// actual change in theme
useEffect(() => {
document.querySelector('html').classList.remove("light", "dark")
document.querySelector('html').classList.add(themeMode)
}, [themeMode])
return (
<ThemeProvider value={{themeMode, lightTheme, darkTheme}}>
<div className="flex flex-wrap min-h-screen items-center">
<div className="w-full">
<div className="w-full max-w-sm mx-auto flex justify-end mb-4">
<ThemeBtn />
</div>
<div className="w-full max-w-sm mx-auto">
<Card />
</div>
</div>
</div>
</ThemeProvider>
)
}
export default App
================================================
FILE: 09themeswitcher/src/components/Card.jsx
================================================
import React from 'react'
export default function Card() {
return (
<div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<a href="/">
<img className="p-8 rounded-t-lg" src="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" alt="product_image1" />
</a>
<div className="px-5 pb-5">
<a href="/">
<h5 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport
</h5>
</a>
<div className="flex items-center mt-2.5 mb-5">
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-gray-200 dark:text-gray-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
4.0
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
<a
href="/"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Add to cart
</a>
</div>
</div>
</div>
);
}
================================================
FILE: 09themeswitcher/src/components/ThemeBtn.jsx
================================================
import React from 'react'
import useTheme from '../contexts/theme';
export default function ThemeBtn() {
const {themeMode, lightTheme, darkTheme} = useTheme()
const onChangeBtn = (e) => {
const darkModeStatus = e.currentTarget.checked
if (darkModeStatus) {
darkTheme()
} else {
lightTheme()
}
}
return (
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
className="sr-only peer"
onChange={onChangeBtn}
checked={themeMode=== "dark"}
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span className="ml-3 text-sm font-medium text-gray-900">Toggle Theme</span>
</label>
);
}
================================================
FILE: 09themeswitcher/src/contexts/theme.js
================================================
import { createContext, useContext } from "react";
export const ThemeContext = createContext({
themeMode: "light",
darkTheme: () => {},
lightTheme: () => {},
})
export const ThemeProvider = ThemeContext.Provider
export default function useTheme(){
return useContext(ThemeContext)
}
================================================
FILE: 09themeswitcher/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 09themeswitcher/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 09themeswitcher/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 09themeswitcher/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 10todocontextLocal/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 10todocontextLocal/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 10todocontextLocal/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 10todocontextLocal/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 10todocontextLocal/package.json
================================================
{
"name": "10todocontextlocal",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 10todocontextLocal/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 10todocontextLocal/src/App.css
================================================
================================================
FILE: 10todocontextLocal/src/App.jsx
================================================
import { useState, useEffect } from 'react'
import {TodoProvider} from './contexts'
import './App.css'
import TodoForm from './components/TodoForm'
import TodoItem from './components/TodoItem'
function App() {
const [todos, setTodos] = useState([])
const addTodo = (todo) => {
setTodos((prev) => [{id: Date.now(), ...todo}, ...prev] )
}
const updateTodo = (id, todo) => {
setTodos((prev) => prev.map((prevTodo) => (prevTodo.id === id ? todo : prevTodo )))
}
const deleteTodo = (id) => {
setTodos((prev) => prev.filter((todo) => todo.id !== id))
}
const toggleComplete = (id) => {
//console.log(id);
setTodos((prev) =>
prev.map((prevTodo) =>
prevTodo.id === id ? { ...prevTodo,
completed: !prevTodo.completed } : prevTodo))
}
useEffect(() => {
const todos = JSON.parse(localStorage.getItem("todos"))
if (todos && todos.length > 0) {
setTodos(todos)
}
}, [])
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todos))
}, [todos])
return (
<TodoProvider value={{todos, addTodo, updateTodo, deleteTodo, toggleComplete}}>
<div className="bg-[#172842] min-h-screen py-8">
<div className="w-full max-w-2xl mx-auto shadow-md rounded-lg px-4 py-3 text-white">
<h1 className="text-2xl font-bold text-center mb-8 mt-2">Manage Your Todos</h1>
<div className="mb-4">
{/* Todo form goes here */}
<TodoForm />
</div>
<div className="flex flex-wrap gap-y-3">
{/*Loop and Add TodoItem here */}
{todos.map((todo) => (
<div key={todo.id}
className='w-full'
>
<TodoItem todo={todo} />
</div>
))}
</div>
</div>
</div>
</TodoProvider>
)
}
export default App
================================================
FILE: 10todocontextLocal/src/components/TodoForm.jsx
================================================
import React, { useState } from 'react'
import { useTodo } from '../contexts/TodoContext';
function TodoForm() {
const [todo, setTodo] = useState("")
const {addTodo} = useTodo()
const add = (e) => {
e.preventDefault()
if (!todo) return
addTodo({ todo, completed: false})
setTodo("")
}
return (
<form onSubmit={add} className="flex">
<input
type="text"
placeholder="Write Todo..."
className="w-full border border-black/10 rounded-l-lg px-3 outline-none duration-150 bg-white/20 py-1.5"
value={todo}
onChange={(e) => setTodo(e.target.value)}
/>
<button type="submit" className="rounded-r-lg px-3 py-1 bg-green-600 text-white shrink-0">
Add
</button>
</form>
);
}
export default TodoForm;
================================================
FILE: 10todocontextLocal/src/components/TodoItem.jsx
================================================
import React, { useState } from 'react'
import { useTodo } from '../contexts/TodoContext';
function TodoItem({ todo }) {
const [isTodoEditable, setIsTodoEditable] = useState(false)
const [todoMsg, setTodoMsg] = useState(todo.todo)
const {updateTodo, deleteTodo, toggleComplete} = useTodo()
const editTodo = () => {
updateTodo(todo.id, {...todo, todo: todoMsg})
setIsTodoEditable(false)
}
const toggleCompleted = () => {
//console.log(todo.id);
toggleComplete(todo.id)
}
return (
<div
className={`flex border border-black/10 rounded-lg px-3 py-1.5 gap-x-3 shadow-sm shadow-white/50 duration-300 text-black ${
todo.completed ? "bg-[#c6e9a7]" : "bg-[#ccbed7]"
}`}
>
<input
type="checkbox"
className="cursor-pointer"
checked={todo.completed}
onChange={toggleCompleted}
/>
<input
type="text"
className={`border outline-none w-full bg-transparent rounded-lg ${
isTodoEditable ? "border-black/10 px-2" : "border-transparent"
} ${todo.completed ? "line-through" : ""}`}
value={todoMsg}
onChange={(e) => setTodoMsg(e.target.value)}
readOnly={!isTodoEditable}
/>
{/* Edit, Save Button */}
<button
className="inline-flex w-8 h-8 rounded-lg text-sm border border-black/10 justify-center items-center bg-gray-50 hover:bg-gray-100 shrink-0 disabled:opacity-50"
onClick={() => {
if (todo.completed) return;
if (isTodoEditable) {
editTodo();
} else setIsTodoEditable((prev) => !prev);
}}
disabled={todo.completed}
>
{isTodoEditable ? "📁" : "✏️"}
</button>
{/* Delete Todo Button */}
<button
className="inline-flex w-8 h-8 rounded-lg text-sm border border-black/10 justify-center items-center bg-gray-50 hover:bg-gray-100 shrink-0"
onClick={() => deleteTodo(todo.id)}
>
❌
</button>
</div>
);
}
export default TodoItem;
================================================
FILE: 10todocontextLocal/src/components/index.js
================================================
import TodoForm from "./TodoForm";
import TodoItem from "./TodoItem";
export {TodoForm, TodoItem}
================================================
FILE: 10todocontextLocal/src/contexts/TodoContext.js
================================================
import {createContext, useContext} from "react"
export const TodoContext = createContext({
todos: [
{
id: 1,
todo: " Todo msg",
completed: false,
}
],
addTodo: (todo) => {},
updateTodo: (id, todo) => {},
deleteTodo: (id) => {},
toggleComplete: (id) => {}
})
export const useTodo = () => {
return useContext(TodoContext)
}
export const TodoProvider = TodoContext.Provider
================================================
FILE: 10todocontextLocal/src/contexts/index.js
================================================
export {TodoContext, TodoProvider, useTodo} from "./TodoContext"
================================================
FILE: 10todocontextLocal/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 10todocontextLocal/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: 10todocontextLocal/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 10todocontextLocal/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: 12MegaBlog/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: 12MegaBlog/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 12MegaBlog/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 12MegaBlog/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body class="bg-slate-400">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: 12MegaBlog/package.json
================================================
{
"name": "12megablog",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@tinymce/tinymce-react": "^4.3.0",
"appwrite": "^13.0.0",
"html-react-parser": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.46.1",
"react-redux": "^8.1.2",
"react-router-dom": "^6.16.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.30",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
================================================
FILE: 12MegaBlog/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
================================================
FILE: 12MegaBlog/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: 12MegaBlog/src/App.jsx
================================================
import React, { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import './App.css'
import authService from "./appwrite/auth"
import {login, logout} from "./store/authSlice"
import { Footer, Header } from './components'
import { Outlet } from 'react-router-dom'
function App() {
const [loading, setLoading] = useState(true)
const dispatch = useDispatch()
useEffect(() => {
authService.getCurrentUser()
.then((userData) => {
if (userData) {
dispatch(login({userData}))
} else {
dispatch(logout())
}
})
.finally(() => setLoading(false))
}, [])
return !loading ? (
<div className='min-h-screen flex flex-wrap content-between bg-gray-400'>
<div className='w-full block'>
<Header />
<main>
TODO: <Outlet />
</main>
<Footer />
</div>
</div>
) : null
}
export default App
================================================
FILE: 12MegaBlog/src/appwrite/auth.js
================================================
import conf from '../conf/conf.js';
import { Client, Account, ID } from "appwrite";
export class AuthService {
client = new Client();
account;
constructor() {
this.client
.setEndpoint(conf.appwriteUrl)
.setProject(conf.appwriteProjectId);
this.account = new Account(this.client);
}
async createAccount({email, password, name}) {
try {
const userAccount = await this.account.create(ID.unique(), email, password, name);
if (userAccount) {
// call another method
return this.login({email, password});
} else {
return userAccount;
}
} catch (error) {
throw error;
}
}
async login({email, password}) {
try {
return await this.account.createEmailSession(email, password);
} catch (error) {
throw error;
}
}
async getCurrentUser() {
try {
return await this.account.get();
} catch (error) {
console.log("Appwrite serive :: getCurrentUser :: error", error);
}
return null;
}
async logout() {
try {
await this.account.deleteSessions();
} catch (error) {
console.log("Appwrite serive :: logout :: error", error);
}
}
}
const authService = new AuthService();
export default authService
================================================
FILE: 12MegaBlog/src/appwrite/config.js
================================================
import conf from '../conf/conf.js';
import { Client, ID, Databases, Storage, Query } from "appwrite";
export class Service{
client = new Client();
databases;
bucket;
constructor(){
this.client
.setEndpoint(conf.appwriteUrl)
.setProject(conf.appwriteProjectId);
this.databases = new Databases(this.client);
this.bucket = new Storage(this.client);
}
async createPost({title, slug, content, featuredImage, status, userId}){
try {
return await this.databases.createDocument(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
slug,
{
title,
content,
featuredImage,
status,
userId,
}
)
} catch (error) {
console.log("Appwrite serive :: createPost :: error", error);
}
}
async updatePost(slug, {title, content, featuredImage, status}){
try {
return await this.databases.updateDocument(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
slug,
{
title,
content,
featuredImage,
status,
}
)
} catch (error) {
console.log("Appwrite serive :: updatePost :: error", error);
}
}
async deletePost(slug){
try {
await this.databases.deleteDocument(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
slug
)
return true
} catch (error) {
console.log("Appwrite serive :: deletePost :: error", error);
return false
}
}
async getPost(slug){
try {
return await this.databases.getDocument(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
slug
)
} catch (error) {
console.log("Appwrite serive :: getPost :: error", error);
return false
}
}
async getPosts(queries = [Query.equal("status", "active")]){
try {
return await this.databases.listDocuments(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
queries,
)
} catch (error) {
console.log("Appwrite serive :: getPosts :: error", error);
return false
}
}
// file upload service
async uploadFile(file){
try {
return await this.bucket.createFile(
conf.appwriteBucketId,
ID.unique(),
file
)
} catch (error) {
console.log("Appwrite serive :: uploadFile :: error", error);
return false
}
}
async deleteFile(fileId){
try {
await this.bucket.deleteFile(
conf.appwriteBucketId,
fileId
)
return true
} catch (error) {
console.log("Appwrite serive :: deleteFile :: error", error);
return false
}
}
getFilePreview(fileId){
return this.bucket.getFilePreview(
conf.appwriteBucketId,
fileId
)
}
}
const service = new Service()
export default service
================================================
FILE: 12MegaBlog/src/components/AuthLayout.jsx
================================================
import React, {useEffect, useState} from 'react'
import {useSelector} from 'react-redux'
import {useNavigate} from 'react-router-dom'
export default function Protected({children, authentication = true}) {
const navigate = useNavigate()
const [loader, setLoader] = useState(true)
const authStatus = useSelector(state => state.auth.status)
useEffect(() => {
//TODO: make it more easy to understand
// if (authStatus ===true){
// navigate("/")
// } else if (authStatus === false) {
// navigate("/login")
// }
//let authValue = authStatus === true ? true : false
if(authentication && authStatus !== authentication){
navigate("/login")
} else if(!authentication && authStatus !== authentication){
navigate("/")
}
setLoader(false)
}, [authStatus, navigate, authentication])
return loader ? <h1>Loading...</h1> : <>{children}</>
}
================================================
FILE: 12MegaBlog/src/components/Button.jsx
================================================
import React from "react";
export default function Button({
children,
type = "button",
bgColor = "bg-blue-600",
textColor = "text-white",
className = "",
...props
}) {
return (
<button className={`px-4 py-2 rounded-lg ${bgColor} ${textColor} ${className}`} {...props}>
{children}
</button>
);
}
================================================
FILE: 12MegaBlog/src/components/Footer/Footer.jsx
================================================
import React from 'react'
import { Link } from 'react-router-dom'
import Logo from '../Logo'
function Footer() {
return (
<section className="relative overflow-hidden py-10 bg-gray-400 border border-t-2 border-t-black">
<div className="relative z-10 mx-auto max-w-7xl px-4">
<div className="-m-6 flex flex-wrap">
<div className="w-full p-6 md:w-1/2 lg:w-5/12">
<div className="flex h-full flex-col justify-between">
<div className="mb-4 inline-flex items-center">
<Logo width="100px" />
</div>
<div>
<p className="text-sm text-gray-600">
© Copyright 2023. All Rights Reserved by DevUI.
</p>
</div>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-2/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Company
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Features
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Pricing
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Affiliate Program
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Press Kit
</Link>
</li>
</ul>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-2/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Support
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Account
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Help
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Contact Us
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Customer Support
</Link>
</li>
</ul>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-3/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Legals
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Terms & Conditions
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Privacy Policy
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Licensing
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
)
}
export default Footer
================================================
FILE: 12MegaBlog/src/components/Header/Header.jsx
================================================
import React from 'react'
import {Container, Logo, LogoutBtn} from '../index'
import { Link } from 'react-router-dom'
import {useSelector} from 'react-redux'
import { useNavigate } from 'react-router-dom'
function Header() {
const authStatus = useSelector((state) => state.auth.status)
const navigate = useNavigate()
const navItems = [
{
name: 'Home',
slug: "/",
active: true
},
{
name: "Login",
slug: "/login",
active: !authStatus,
},
{
name: "Signup",
slug: "/signup",
active: !authStatus,
},
{
name: "All Posts",
slug: "/all-posts",
active: authStatus,
},
{
name: "Add Post",
slug: "/add-post",
active: authStatus,
},
]
return (
<header className='py-3 shadow bg-gray-500'>
<Container>
<nav className='flex'>
<div className='mr-4'>
<Link to='/'>
<Logo width='70px' />
</Link>
</div>
<ul className='flex ml-auto'>
{navItems.map((item) =>
item.active ? (
<li key={item.name}>
<button
onClick={() => navigate(item.slug)}
className='inline-bock px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
>{item.name}</button>
</li>
) : null
)}
{authStatus && (
<li>
<LogoutBtn />
</li>
)}
</ul>
</nav>
</Container>
</header>
)
}
export default Header
================================================
FILE: 12MegaBlog/src/components/Header/LogoutBtn.jsx
================================================
import React from 'react'
import {useDispatch} from 'react-redux'
import authService from '../../appwrite/auth'
import {logout} from '../../store/authSlice'
function LogoutBtn() {
const dispatch = useDispatch()
const logoutHandler = () => {
authService.logout().then(() => {
dispatch(logout())
})
}
return (
<button
className='inline-bock px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
onClick={logoutHandler}
>Logout</button>
)
}
export default LogoutBtn
================================================
FILE: 12MegaBlog/src/components/Input.jsx
================================================
import React, {useId} from 'react'
const Input = React.forwardRef( function Input({
label,
type = "text",
className = "",
...props
}, ref){
const id = useId()
return (
<div className='w-full'>
{label && <label
className='inline-block mb-1 pl-1'
htmlFor={id}>
{label}
</label>
}
<input
type={type}
className={`px-3 py-2 rounded-lg bg-white text-black outline-none focus:bg-gray-50 duration-200 border border-gray-200 w-full ${className}`}
ref={ref}
{...props}
id={id}
/>
</div>
)
})
export default Input
================================================
FILE: 12MegaBlog/src/components/Login.jsx
================================================
import React, {useState} from 'react'
import {Link, useNavigate} from 'react-router-dom'
import { login as authLogin } from '../store/authSlice'
import {Button, Input, Logo} from "./index"
import {useDispatch} from "react-redux"
import authService from "../appwrite/auth"
import {useForm} from "react-hook-form"
function Login() {
const navigate = useNavigate()
const dispatch = useDispatch()
const {register, handleSubmit} = useForm()
const [error, setError] = useState("")
const login = async(data) => {
setError("")
try {
const session = await authService.login(data)
if (session) {
const userData = await authService.getCurrentUser()
if(userData) dispatch(authLogin(userData));
navigate("/")
}
} catch (error) {
setError(error.message)
}
}
return (
<div
className='flex items-center justify-center w-full'
>
<div className={`mx-auto w-full max-w-lg bg-gray-100 rounded-xl p-10 border border-black/10`}>
<div className="mb-2 flex justify-center">
<span className="inline-block w-full max-w-[100px]">
<Logo width="100%" />
</span>
</div>
<h2 className="text-center text-2xl font-bold leading-tight">Sign in to your account</h2>
<p className="mt-2 text-center text-base text-black/60">
Don't have any account?
<Link
to="/signup"
className="font-medium text-primary transition-all duration-200 hover:underline"
>
Sign Up
</Link>
</p>
{error && <p className="text-red-600 mt-8 text-center">{error}</p>}
<form onSubmit={handleSubmit(login)} className='mt-8'>
<div className='space-y-5'>
<Input
label="Email: "
placeholder="Enter your email"
type="email"
{...register("email", {
required: true,
validate: {
matchPatern: (value) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
"Email address must be a valid address",
}
})}
/>
<Input
label="Password: "
type="password"
placeholder="Enter your password"
{...register("password", {
required: true,
})}
/>
<Button
type="submit"
className="w-full"
>Sign in</Button>
</div>
</form>
</div>
</div>
)
}
export default Login
================================================
FILE: 12MegaBlog/src/components/Logo.jsx
================================================
import React from 'react'
function Logo({width = '100px'}) {
return (
<div>Logo</div>
)
}
export default Logo
================================================
FILE: 12MegaBlog/src/components/PostCard.jsx
================================================
import React from 'react'
import appwriteService from "../appwrite/config"
import {Link} from 'react-router-dom'
function PostCard({$id, title, featuredImage}) {
return (
<Link to={`/post/${$id}`}>
<div className='w-full bg-gray-100 rounded-xl p-4'>
<div className='w-full justify-center mb-4'>
<img src={appwriteService.getFilePreview(featuredImage)} alt={title}
className='rounded-xl' />
</div>
<h2
className='text-xl font-bold'
>{title}</h2>
</div>
</Link>
)
}
export default PostCard
================================================
FILE: 12MegaBlog/src/components/RTE.jsx
================================================
import React from 'react'
import {Editor } from '@tinymce/tinymce-react';
import {Controller } from 'react-hook-form';
export default function RTE({name, control, label, defaultValue =""}) {
return (
<div className='w-full'>
{label && <label className='inline-block mb-1 pl-1'>{label}</label>}
<Controller
name={name || "content"}
control={control}
render={({field: {onChange}}) => (
<Editor
initialValue={defaultValue}
init={{
initialValue: defaultValue,
height: 500,
menubar: true,
plugins: [
"image",
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"code",
"help",
"wordcount",
"anchor",
],
toolbar:
"undo redo | blocks | image | bold italic forecolor | alignleft aligncenter bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |removeformat | help",
content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
}}
onEditorChange={onChange}
/>
)}
/>
</div>
)
}
================================================
FILE: 12MegaBlog/src/components/Select.jsx
================================================
import React, {useId} from 'react'
function Select({
options,
label,
className,
...props
}, ref) {
const id = useId()
return (
<div className='w-full'>
{label && <label htmlFor={id} className=''></label>}
<select
{...props}
id={id}
ref={ref}
className={`px-3 py-2 rounded-lg bg-white text-black outline-none focus:bg-gray-50 duration-200 border border-gray-200 w-full ${className}`}
>
{options?.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
)
}
export default React.forwardRef(Select)
================================================
FILE: 12MegaBlog/src/components/Signup.jsx
================================================
import React, {useState} from 'react'
import authService from '../appwrite/auth'
import {Link ,useNavigate} from 'react-router-dom'
import {login} from '../store/authSlice'
import {Button, Input, Logo} from './index.js'
import {useDispatch} from 'react-redux'
import {useForm} from 'react-hook-form'
function Signup() {
const navigate = useNavigate()
const [error, setError] = useState("")
const dispatch = useDispatch()
const {register, handleSubmit} = useForm()
const create = async(data) => {
setError("")
try {
const userData = await authService.createAccount(data)
if (userData) {
const userData = await authService.getCurrentUser()
if(userData) dispatch(login(userData));
navigate("/")
}
} catch (error) {
setError(error.message)
}
}
return (
<div className="flex items-center justify-center">
<div className={`mx-auto w-full max-w-lg bg-gray-100 rounded-xl p-10 border border-black/10`}>
<div className="mb-2 flex justify-center">
<span className="inline-block w-full max-w-[100px]">
<Logo width="100%" />
</span>
</div>
<h2 className="text-center text-2xl font-bold leading-tight">Sign up to create account</h2>
<p className="mt-2 text-center text-base text-black/60">
Already have an account?
<Link
to="/login"
className="font-medium text-primary transition-all duration-200 hover:underline"
>
Sign In
</Link>
</p>
{error && <p className="text-red-600 mt-8 text-center">{error}</p>}
<form onSubmit={handleSubmit(create)}>
<div className='space-y-5'>
<Input
label="Full Name: "
placeholder="Enter your full name"
{...register("name", {
required: true,
})}
/>
<Input
label="Email: "
placeholder="Enter your email"
type="email"
{...register("email", {
required: true,
validate: {
matchPatern: (value) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
"Email address must be a valid address",
}
})}
/>
<Input
label="Password: "
type="password"
placeholder="Enter your password"
{...register("password", {
required: true,})}
/>
<Button type="submit" className="w-full">
Create Account
</Button>
</div>
</form>
</div>
</div>
)
}
export default Signup
================================================
FILE: 12MegaBlog/src/components/container/Container.jsx
================================================
import React from 'react'
function Container({children}) {
return <div className='w-full max-w-7xl mx-auto px-4'>{children}</div>;
}
export default Container
================================================
FILE: 12MegaBlog/src/components/index.js
================================================
import Select from "./Select";
import Header from "./Header/Header";
import Footer from "./Footer/Footer";
import Container from "./container/Container";
import Logo from "./Logo";
import LogoutBtn from "./Header/LogoutBtn";
import RTE from "./RTE";
import Signup from "./Signup";
import Login from "./Login";
import Button from "./Button";
import PostForm from "./post-form/PostForm";
import PostCard from "./PostCard";
import AuthLayout from "./AuthLayout";
import Input from "./Input";
export {
Header,
Footer,
Container,
Logo,
LogoutBtn,
RTE,
Signup,
Login,
Button,
PostForm,
PostCard,
AuthLayout,
Input,
Select,
}
================================================
FILE: 12MegaBlog/src/components/post-form/PostForm.jsx
================================================
import React, { useCallback } from "react";
import { useForm } from "react-hook-form";
import { Button, Input, RTE, Select } from "..";
import appwriteService from "../../appwrite/config";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
export default function PostForm({ post }) {
const { register, handleSubmit, watch, setValue, control, getValues } = useForm({
defaultValues: {
title: post?.title || "",
slug: post?.$id || "",
content: post?.content || "",
status: post?.status || "active",
},
});
const navigate = useNavigate();
const userData = useSelector((state) => state.auth.userData);
const submit = async (data) => {
if (post) {
const file = data.image[0] ? await appwriteService.uploadFile(data.image[0]) : null;
if (file) {
appwriteService.deleteFile(post.featuredImage);
}
const dbPost = await appwriteService.updatePost(post.$id, {
...data,
featuredImage: file ? file.$id : undefined,
});
if (dbPost) {
navigate(`/post/${dbPost.$id}`);
}
} else {
const file = await appwriteService.uploadFile(data.image[0]);
if (file) {
const fileId = file.$id;
data.featuredImage = fileId;
const dbPost = await appwriteService.createPost({ ...data, userId: userData.$id });
if (dbPost) {
navigate(`/post/${dbPost.$id}`);
}
}
}
};
const slugTransform = useCallback((value) => {
if (value && typeof value === "string")
return value
.trim()
.toLowerCase()
.replace(/[^a-zA-Z\d\s]+/g, "-")
.replace(/\s/g, "-");
return "";
}, []);
React.useEffect(() => {
const subscription = watch((value, { name }) => {
if (name === "title") {
setValue("slug", slugTransform(value.title), { shouldValidate: true });
}
});
return () => subscription.unsubscribe();
}, [watch, slugTransform, setValue]);
return (
<form onSubmit={handleSubmit(submit)} className="flex flex-wrap">
<div className="w-2/3 px-2">
<Input
label="Title :"
placeholder="Title"
className="mb-4"
{...register("title", { required: true })}
/>
<Input
label="Slug :"
placeholder="Slug"
className="mb-4"
{...register("slug", { required: true })}
onInput={(e) => {
setValue("slug", slugTransform(e.currentTarget.value), { shouldValidate: true });
}}
/>
<RTE label="Content :" name="content" control={control} defaultValue={getValues("content")} />
</div>
<div className="w-1/3 px-2">
<Input
label="Featured Image :"
type="file"
className="mb-4"
accept="image/png, image/jpg, image/jpeg, image/gif"
{...register("image", { required: !post })}
/>
{post && (
<div className="w-full mb-4">
<img
src={appwriteService.getFilePreview(post.featuredImage)}
alt={post.title}
className="rounded-lg"
/>
</div>
)}
<Select
options={["active", "inactive"]}
label="Status"
className="mb-4"
{...register("status", { required: true })}
/>
<Button type="submit" bgColor={post ? "bg-green-500" : undefined} className="w-full">
{post ? "Update" : "Submit"}
</Button>
</div>
</form>
);
}
================================================
FILE: 12MegaBlog/src/conf/conf.js
================================================
const conf = {
appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL),
appwriteProjectId: String(import.meta.env.VITE_APPWRITE_PROJECT_ID),
appwriteDatabaseId: String(import.meta.env.VITE_APPWRITE_DATABASE_ID),
appwriteCollectionId: String(import.meta.env.VITE_APPWRITE_COLLECTION_ID),
appwriteBucketId: String(import.meta.env.VITE_APPWRITE_BUCKET_ID),
}
// there was a name issue with the import.meta.env.VITE_APPWRITE_URL, it was later fixed in debugging video
export default conf
================================================
FILE: 12MegaBlog/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
================================================
FILE: 12MegaBlog/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import store from './store/store.js'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import Home from './pages/Home.jsx'
import { AuthLayout, Login } from './components/index.js'
import AddPost from "./pages/AddPost";
import Signup from './pages/Signup'
import EditPost from "./pages/EditPost";
import Post from "./pages/Post";
import AllPosts from "./pages/AllPosts";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/login",
element: (
<AuthLayout authentication={false}>
<Login />
</AuthLayout>
),
},
{
path: "/signup",
element: (
<AuthLayout authentication={false}>
<Signup />
</AuthLayout>
),
},
{
path: "/all-posts",
element: (
<AuthLayout authentication>
{" "}
<AllPosts />
</AuthLayout>
),
},
{
path: "/add-post",
element: (
<AuthLayout authentication>
{" "}
<AddPost />
</AuthLayout>
),
},
{
path: "/edit-post/:slug",
element: (
<AuthLayout authentication>
{" "}
<EditPost />
</AuthLayout>
),
},
{
path: "/post/:slug",
element: <Post />,
},
],
},
])
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router}/>
</Provider>
</React.StrictMode>,
)
================================================
FILE: 12MegaBlog/src/pages/AddPost.jsx
================================================
import React from 'react'
import { Container, PostForm } from '../components'
function AddPost() {
return (
<div className='py-8'>
<Container>
<PostForm />
</Container>
</div>
)
}
export default AddPost
================================================
FILE: 12MegaBlog/src/pages/AllPosts.jsx
================================================
import React, {useState, useEffect} from 'react'
import { Container, PostCard } from '../components'
import appwriteService from "../appwrite/config";
function AllPosts() {
const [posts, setPosts] = useState([])
useEffect(() => {}, [])
appwriteService.getPosts([]).then((posts) => {
if (posts) {
setPosts(posts.documents)
}
})
return (
<div className='w-full py-8'>
<Container>
<div className='flex flex-wrap'>
{posts.map((post) => (
<div key={post.$id} className='p-2 w-1/4'>
<PostCard {...post} />
</div>
))}
</div>
</Container>
</div>
)
}
export default AllPosts
================================================
FILE: 12MegaBlog/src/pages/EditPost.jsx
================================================
import React, {useEffect, useState} from 'react'
import {Container, PostForm} from '../components'
import appwriteService from "../appwrite/config";
import { useNavigate, useParams } from 'react-router-dom';
function EditPost() {
const [post, setPosts] = useState(null)
const {slug} = useParams()
const navigate = useNavigate()
useEffect(() => {
if (slug) {
appwriteService.getPost(slug).then((post) => {
if (post) {
setPosts(post)
}
})
} else {
navigate('/')
}
}, [slug, navigate])
return post ? (
<div className='py-8'>
<Container>
<PostForm post={post} />
</Container>
</div>
) : null
}
export default EditPost
================================================
FILE: 12MegaBlog/src/pages/Home.jsx
================================================
import React, {useEffect, useState} from 'react'
import appwriteService from "../appwrite/config";
import {Container, PostCard} from '../components'
function Home() {
const [posts, setPosts] = useState([])
useEffect(() => {
appwriteService.getPosts().then((posts) => {
if (posts) {
setPosts(posts.documents)
}
})
}, [])
if (posts.length === 0) {
return (
<div className="w-full py-8 mt-4 text-center">
<Container>
<div className="flex flex-wrap">
<div className="p-2 w-full">
<h1 className="text-2xl font-bold hover:text-gray-500">
Login to read posts
</h1>
</div>
</div>
</Container>
</div>
)
}
return (
<div className='w-full py-8'>
<Container>
<div className='flex flex-wrap'>
{posts.map((post) => (
<div key={post.$id} className='p-2 w-1/4'>
<PostCard {...post} />
</div>
))}
</div>
</Container>
</div>
)
}
export default Home
================================================
FILE: 12MegaBlog/src/pages/Login.jsx
================================================
import React from 'react'
import { Login as loginComponent } from '../components'
function Login() {
return (
<div className='py-8'>
<loginComponent />
</div>
)
}
export default Login
================================================
FILE: 12MegaBlog/src/pages/Post.jsx
================================================
import React, { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import appwriteService from "../appwrite/config";
import { Button, Container } from "../components";
import parse from "html-react-parser";
import { useSelector } from "react-redux";
export default function Post() {
const [post, setPost] = useState(null);
const { slug } = useParams();
const navigate = useNavigate();
const userData = useSelector((state) => state.auth.userData);
const isAuthor = post && userData ? post.userId === userData.$id : false;
useEffect(() => {
if (slug) {
appwriteService.getPost(slug).then((post) => {
if (post) setPost(post);
else navigate("/");
});
} else navigate("/");
}, [slug, navigate]);
const deletePost = () => {
appwriteService.deletePost(post.$id).then((status) => {
if (status) {
appwriteService.deleteFile(post.featuredImage);
navigate("/");
}
});
};
return post ? (
<div className="py-8">
<Container>
<div className="w-full flex justify-center mb-4 relative border rounded-xl p-2">
<img
src={appwriteService.getFilePreview(post.featuredImage)}
alt={post.title}
className="rounded-xl"
/>
{isAuthor && (
<div className="absolute right-6 top-6">
<Link to={`/edit-post/${post.$id}`}>
<Button bgColor="bg-green-500" className="mr-3">
Edit
</Button>
</Link>
<Button bgColor="bg-red-500" onClick={deletePost}>
Delete
</Button>
</div>
)}
</div>
<div className="w-full mb-6">
<h1 className="text-2xl font-bold">{post.title}</h1>
</div>
<div className="browser-css">
{parse(post.content)}
</div>
</Container>
</div>
) : null;
}
================================================
FILE: 12MegaBlog/src/pages/Signup.jsx
================================================
import React from 'react'
import { Signup as SignupComponent } from '../components'
function Signup() {
return (
<div className='py-8'>
<SignupComponent />
</div>
)
}
export default Signup
================================================
FILE: 12MegaBlog/src/store/authSlice.js
================================================
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
status : false,
userData: null
}
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
login: (state, action) => {
state.status = true;
state.userData = action.payload.userData;
},
logout: (state) => {
state.status = false;
state.userData = null;
}
}
})
export const {login, logout} = authSlice.actions;
export default authSlice.reducer;
================================================
FILE: 12MegaBlog/src/store/store.js
================================================
import {configureStore} from '@reduxjs/toolkit';
import authSlice from './authSlice';
const store = configureStore({
reducer: {
auth : authSlice,
//TODO: add more slices here for posts
}
});
export default store;
================================================
FILE: 12MegaBlog/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
================================================
FILE: 12MegaBlog/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: contextNotes.md
================================================
# Notes for context api
## ThemeBtn UI
```javascript
export default function ThemeBtn() {
return (
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
className="sr-only peer"
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span className="ml-3 text-sm font-medium text-gray-900">Toggle Theme</span>
</label>
);
}
```
## Card UI
```javascript
export default function Card() {
return (
<div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<a href="/">
<img className="p-8 rounded-t-lg" src="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" alt="product_image1" />
</a>
<div className="px-5 pb-5">
<a href="/">
<h5 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport
</h5>
</a>
<div className="flex items-center mt-2.5 mb-5">
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-yellow-300 mr-1"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<svg
className="w-4 h-4 text-gray-200 dark:text-gray-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
</svg>
<span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">
4.0
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
<a
href="/"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Add to cart
</a>
</div>
</div>
</div>
);
}
```
## App UI
```javascript
<div className="flex flex-wrap min-h-screen items-center">
<div className="w-full">
<div className="w-full max-w-sm mx-auto flex justify-end mb-4">
</div>
<div className="w-full max-w-sm mx-auto">
</div>
</div>
</div>
```
## remember to change config in tailwind
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
```
================================================
FILE: currency.md
================================================
# notes for currency converter app
## api link
```javascript
let url = `https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`
```
## input box
```javascript
function InputBox({
label,
className = "",
}) {
return (
<div className={`bg-white p-3 rounded-lg text-sm flex `}>
<div className="w-1/2">
<label className="text-black/40 mb-2 inline-block">
label
</label>
<input
className="outline-none w-full bg-transparent py-1.5"
type="number"
placeholder="Amount"
/>
</div>
<div className="w-1/2 flex flex-wrap justify-end text-right">
<p className="text-black/40 mb-2 w-full">Currency Type</p>
<select
className="rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none"
>
<option value="usd">
usd
</option>
</select>
</div>
</div>
);
}
export default InputBox;
```
## app js
```javascript
function App() {
return (
<div
className="w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat"
style={{
backgroundImage: `url('${BackgroundImage}')`,
}}
>
<div className="w-full">
<div className="w-full max-w-md mx-auto border border-gray-60 rounded-lg p-5 backdrop-blur-sm bg-white/30">
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<div className="w-full mb-1">
<InputBox
label="From"
/>
</div>
<div className="relative w-full h-0.5">
<button
type="button"
className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-white rounded-md bg-blue-600 text-white px-2 py-0.5"
>
swap
</button>
</div>
<div className="w-full mt-1 mb-4">
<InputBox
label="To"
/>
</div>
<button type="submit" className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg">
Convert
</button>
</form>
</div>
</div>
</div>
);
```
================================================
FILE: customReact/customreact.js
================================================
function customRender(reactElement, container){
/*
const domElement = document.createElement(reactElement.type)
domElement.innerHTML = reactElement.children
domElement.setAttribute('href', reactElement.props.href)
domElement.setAttribute('target', reactElement.props.target)
container.appendChild(domElement)
*/
const domElement = document.createElement(reactElement.type)
domElement.innerHTML = reactElement.children
for (const prop in reactElement.props) {
if (prop === 'children') continue;
domElement.setAttribute(prop, reactElement.props[prop])
}
container.appendChild(domElement)
}
const reactElement = {
type: 'a',
props: {
href: 'https://google.com',
target: '_blank'
},
children: 'Click me to visit google'
}
const mainContainer = document.querySelector('#root')
customRender(reactElement, mainContainer)
================================================
FILE: customReact/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom React App</title>
</head>
<body>
<div id="root"></div>
<script src="./customreact.js"></script>
</body>
</html>
================================================
FILE: interview-discussion/.eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: interview-discussion/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: interview-discussion/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: interview-discussion/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: interview-discussion/package.json
================================================
{
"name": "interview-discussion",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}
================================================
FILE: interview-discussion/src/App.css
================================================
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
================================================
FILE: interview-discussion/src/App.jsx
================================================
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useEffect } from 'react'
function App() {
console.log("App rendered", Math.random());
const [value, setValue] = useState({
value: 0,
})
//const [multipliedValue, setMultipliedValue] = useState(1)
//let multipliedValue = value * 5
// const multiplybyfive = () => {
// //setMultipliedValue(value * 5)
// setValue(value + 1)
// }
const clickMe = () => {
setValue({
value: 0,
})
}
return (
<>
<h1>Main value: {value.value} </h1>
<button
onClick={clickMe}
>Click to multiply by 5</button>
{/* <h2>Multiplied value: {multipliedValue} </h2> */}
</>
)
}
export default App
================================================
FILE: interview-discussion/src/index.css
================================================
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: interview-discussion/src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
================================================
FILE: interview-discussion/vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
================================================
FILE: reactRouterNotes.md
================================================
# all raw html css file for react router video
## header component
```javascript
export default function Header() {
return (
<header className="shadow sticky z-50 top-0">
<nav className="bg-white border-gray-200 px-4 lg:px-6 py-2.5">
<div className="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
<Link to="/" className="flex items-center">
<img
src="https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className="mr-3 h-12"
alt="Logo"
/>
</Link>
<div className="flex items-center lg:order-2">
<Link
to="#"
className="text-gray-800 hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Log in
</Link>
<Link
to="#"
className="text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Get started
</Link>
</div>
<div
className="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1"
id="mobile-menu-2"
>
<ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li>
<NavLink
className={() =>
`block py-2 pr-4 pl-3 duration-200 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Home
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
}
```
## Footer component
```javascript
export default function Footer() {
return (
<footer className="bg-white border-y">
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0">
<Link to="/" className="flex items-center">
<img
src="https://alexharkness.com/wp-content/uploads/2020/06/logo-2.png"
className="mr-3 h-16"
alt="Logo"
/>
</Link>
</div>
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Resources</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<Link to="/" className="hover:underline">
Home
</Link>
</li>
<li>
<Link to="/about" className="hover:underline">
About
</Link>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Follow us</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<a
href="https://github.com/hiteshchoudhary"
className="hover:underline"
target="_blank"
rel="noreferrer"
>
Github
</a>
</li>
<li>
<Link to="/" className="hover:underline">
Discord
</Link>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">Legal</h2>
<ul className="text-gray-500 font-medium">
<li className="mb-4">
<Link to="#" className="hover:underline">
Privacy Policy
</Link>
</li>
<li>
<Link to="#" className="hover:underline">
Terms & Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm text-gray-500 sm:text-center">
© 2023
<a href="https://hiteshchoudhary.com/" className="hover:underline">
hiteshchoudhary
</a>
. All Rights Reserved.
</span>
<div className="flex mt-4 space-x-5 sm:justify-center sm:mt-0">
<Link to="#" className="text-gray-500 hover:text-gray-900">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 8 19"
>
<path
fill-rule="evenodd"
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">Facebook page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 21 16"
>
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
</svg>
<span className="sr-only">Discord community</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 17"
>
<path
fill-rule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clip-rule="evenodd"
/>
</svg>
<span className="sr-only">Twitter page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644
gitextract_ev68w7bd/ ├── .gitignore ├── .vscode/ │ └── settings.json ├── 01basicreact/ │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public/ │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ └── src/ │ ├── App.js │ ├── Chai.jsx │ └── index.js ├── 01vitereact/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.jsx │ │ ├── chai.jsx │ │ └── main.jsx │ └── vite.config.js ├── 02counter/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js ├── 03tailwindprops/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ └── Card.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 04bgChanger/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── bun.lockb │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 05passwordGenerator/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 06currencyConvertor/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ ├── InputBox.jsx │ │ │ └── index.js │ │ ├── hooks/ │ │ │ └── useCurrencyInfo.js │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 07reactRouter/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── Layout.jsx │ │ ├── components/ │ │ │ ├── About/ │ │ │ │ └── About.jsx │ │ │ ├── Contact/ │ │ │ │ └── Contact.jsx │ │ │ ├── Footer/ │ │ │ │ └── Footer.jsx │ │ │ ├── Github/ │ │ │ │ └── Github.jsx │ │ │ ├── Header/ │ │ │ │ └── Header.jsx │ │ │ ├── Home/ │ │ │ │ └── Home.jsx │ │ │ └── User/ │ │ │ └── User.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 08miniContext/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ ├── Login.jsx │ │ │ └── Profile.jsx │ │ ├── context/ │ │ │ ├── UserContext.js │ │ │ └── UserContextProvider.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js ├── 09themeswitcher/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ ├── Card.jsx │ │ │ └── ThemeBtn.jsx │ │ ├── contexts/ │ │ │ └── theme.js │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 10todocontextLocal/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ ├── TodoForm.jsx │ │ │ ├── TodoItem.jsx │ │ │ └── index.js │ │ ├── contexts/ │ │ │ ├── TodoContext.js │ │ │ └── index.js │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js ├── 12MegaBlog/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── bun.lockb │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── appwrite/ │ │ │ ├── auth.js │ │ │ └── config.js │ │ ├── components/ │ │ │ ├── AuthLayout.jsx │ │ │ ├── Button.jsx │ │ │ ├── Footer/ │ │ │ │ └── Footer.jsx │ │ │ ├── Header/ │ │ │ │ ├── Header.jsx │ │ │ │ └── LogoutBtn.jsx │ │ │ ├── Input.jsx │ │ │ ├── Login.jsx │ │ │ ├── Logo.jsx │ │ │ ├── PostCard.jsx │ │ │ ├── RTE.jsx │ │ │ ├── Select.jsx │ │ │ ├── Signup.jsx │ │ │ ├── container/ │ │ │ │ └── Container.jsx │ │ │ ├── index.js │ │ │ └── post-form/ │ │ │ └── PostForm.jsx │ │ ├── conf/ │ │ │ └── conf.js │ │ ├── index.css │ │ ├── main.jsx │ │ ├── pages/ │ │ │ ├── AddPost.jsx │ │ │ ├── AllPosts.jsx │ │ │ ├── EditPost.jsx │ │ │ ├── Home.jsx │ │ │ ├── Login.jsx │ │ │ ├── Post.jsx │ │ │ └── Signup.jsx │ │ └── store/ │ │ ├── authSlice.js │ │ └── store.js │ ├── tailwind.config.js │ └── vite.config.js ├── contextNotes.md ├── currency.md ├── customReact/ │ ├── customreact.js │ └── index.html ├── interview-discussion/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js ├── reactRouterNotes.md ├── readme.md ├── reduxToolkitTodo/ │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── bun.lockb │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── app/ │ │ │ └── store.js │ │ ├── components/ │ │ │ ├── AddTodo.jsx │ │ │ └── Todos.jsx │ │ ├── features/ │ │ │ └── todo/ │ │ │ └── todoSlice.js │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js └── todoContextapiNotes.md
SYMBOL INDEX (74 symbols across 60 files)
FILE: 01basicreact/src/App.js
function App (line 4) | function App() {
FILE: 01basicreact/src/Chai.jsx
function Chai (line 1) | function Chai(){
FILE: 01vitereact/src/App.jsx
function App (line 6) | function App() {
FILE: 01vitereact/src/chai.jsx
function Chai (line 1) | function Chai(){
FILE: 01vitereact/src/main.jsx
function MyApp (line 6) | function MyApp(){
FILE: 02counter/src/App.jsx
function App (line 6) | function App() {
FILE: 03tailwindprops/src/App.jsx
function App (line 7) | function App() {
FILE: 03tailwindprops/src/components/Card.jsx
function Card (line 3) | function Card({username, btnText="visit me"}) {
FILE: 04bgChanger/src/App.jsx
function App (line 4) | function App() {
FILE: 05passwordGenerator/src/App.jsx
function App (line 5) | function App() {
FILE: 06currencyConvertor/src/App.jsx
function App (line 6) | function App() {
FILE: 06currencyConvertor/src/components/InputBox.jsx
function InputBox (line 3) | function InputBox({
FILE: 06currencyConvertor/src/hooks/useCurrencyInfo.js
function useCurrencyInfo (line 4) | function useCurrencyInfo(currency){
FILE: 07reactRouter/src/App.jsx
function App (line 9) | function App() {
FILE: 07reactRouter/src/Layout.jsx
function Layout (line 6) | function Layout() {
FILE: 07reactRouter/src/components/About/About.jsx
function About (line 3) | function About() {
FILE: 07reactRouter/src/components/Contact/Contact.jsx
function Contact (line 3) | function Contact() {
FILE: 07reactRouter/src/components/Footer/Footer.jsx
function Footer (line 4) | function Footer() {
FILE: 07reactRouter/src/components/Github/Github.jsx
function Github (line 4) | function Github() {
FILE: 07reactRouter/src/components/Header/Header.jsx
function Header (line 4) | function Header() {
FILE: 07reactRouter/src/components/Home/Home.jsx
function Home (line 4) | function Home() {
FILE: 07reactRouter/src/components/User/User.jsx
function User (line 4) | function User() {
FILE: 08miniContext/src/App.jsx
function App (line 7) | function App() {
FILE: 08miniContext/src/components/Login.jsx
function Login (line 4) | function Login() {
FILE: 08miniContext/src/components/Profile.jsx
function Profile (line 4) | function Profile() {
FILE: 09themeswitcher/src/App.jsx
function App (line 8) | function App() {
FILE: 09themeswitcher/src/components/Card.jsx
function Card (line 3) | function Card() {
FILE: 09themeswitcher/src/components/ThemeBtn.jsx
function ThemeBtn (line 4) | function ThemeBtn() {
FILE: 09themeswitcher/src/contexts/theme.js
function useTheme (line 11) | function useTheme(){
FILE: 10todocontextLocal/src/App.jsx
function App (line 7) | function App() {
FILE: 10todocontextLocal/src/components/TodoForm.jsx
function TodoForm (line 4) | function TodoForm() {
FILE: 10todocontextLocal/src/components/TodoItem.jsx
function TodoItem (line 4) | function TodoItem({ todo }) {
FILE: 12MegaBlog/src/App.jsx
function App (line 9) | function App() {
FILE: 12MegaBlog/src/appwrite/auth.js
class AuthService (line 5) | class AuthService {
method constructor (line 9) | constructor() {
method createAccount (line 17) | async createAccount({email, password, name}) {
method login (line 31) | async login({email, password}) {
method getCurrentUser (line 39) | async getCurrentUser() {
method logout (line 49) | async logout() {
FILE: 12MegaBlog/src/appwrite/config.js
class Service (line 4) | class Service{
method constructor (line 9) | constructor(){
method createPost (line 17) | async createPost({title, slug, content, featuredImage, status, userId}){
method updatePost (line 36) | async updatePost(slug, {title, content, featuredImage, status}){
method deletePost (line 55) | async deletePost(slug){
method getPost (line 70) | async getPost(slug){
method getPosts (line 84) | async getPosts(queries = [Query.equal("status", "active")]){
method uploadFile (line 101) | async uploadFile(file){
method deleteFile (line 114) | async deleteFile(fileId){
method getFilePreview (line 127) | getFilePreview(fileId){
FILE: 12MegaBlog/src/components/AuthLayout.jsx
function Protected (line 5) | function Protected({children, authentication = true}) {
FILE: 12MegaBlog/src/components/Button.jsx
function Button (line 3) | function Button({
FILE: 12MegaBlog/src/components/Footer/Footer.jsx
function Footer (line 5) | function Footer() {
FILE: 12MegaBlog/src/components/Header/Header.jsx
function Header (line 7) | function Header() {
FILE: 12MegaBlog/src/components/Header/LogoutBtn.jsx
function LogoutBtn (line 6) | function LogoutBtn() {
FILE: 12MegaBlog/src/components/Login.jsx
function Login (line 9) | function Login() {
FILE: 12MegaBlog/src/components/Logo.jsx
function Logo (line 3) | function Logo({width = '100px'}) {
FILE: 12MegaBlog/src/components/PostCard.jsx
function PostCard (line 5) | function PostCard({$id, title, featuredImage}) {
FILE: 12MegaBlog/src/components/RTE.jsx
function RTE (line 6) | function RTE({name, control, label, defaultValue =""}) {
FILE: 12MegaBlog/src/components/Select.jsx
function Select (line 3) | function Select({
FILE: 12MegaBlog/src/components/Signup.jsx
function Signup (line 9) | function Signup() {
FILE: 12MegaBlog/src/components/container/Container.jsx
function Container (line 3) | function Container({children}) {
FILE: 12MegaBlog/src/components/post-form/PostForm.jsx
function PostForm (line 8) | function PostForm({ post }) {
FILE: 12MegaBlog/src/pages/AddPost.jsx
function AddPost (line 4) | function AddPost() {
FILE: 12MegaBlog/src/pages/AllPosts.jsx
function AllPosts (line 5) | function AllPosts() {
FILE: 12MegaBlog/src/pages/EditPost.jsx
function EditPost (line 6) | function EditPost() {
FILE: 12MegaBlog/src/pages/Home.jsx
function Home (line 5) | function Home() {
FILE: 12MegaBlog/src/pages/Login.jsx
function Login (line 3) | function Login() {
FILE: 12MegaBlog/src/pages/Post.jsx
function Post (line 8) | function Post() {
FILE: 12MegaBlog/src/pages/Signup.jsx
function Signup (line 4) | function Signup() {
FILE: customReact/customreact.js
function customRender (line 1) | function customRender(reactElement, container){
FILE: interview-discussion/src/App.jsx
function App (line 7) | function App() {
FILE: reduxToolkitTodo/src/App.jsx
function App (line 8) | function App() {
FILE: reduxToolkitTodo/src/components/AddTodo.jsx
function AddTodo (line 5) | function AddTodo() {
FILE: reduxToolkitTodo/src/components/Todos.jsx
function Todos (line 5) | function Todos() {
Condensed preview — 223 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (223K chars).
[
{
"path": ".gitignore",
"chars": 26,
"preview": ".DS_Store\n12MegaBlog/.env\n"
},
{
"path": ".vscode/settings.json",
"chars": 84,
"preview": "{\n \"editor.acceptSuggestionOnEnter\": \"on\",\n \"liveServer.settings.port\": 5501\n}"
},
{
"path": "01basicreact/.gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "01basicreact/README.md",
"chars": 3359,
"preview": "# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebo"
},
{
"path": "01basicreact/package.json",
"chars": 815,
"preview": "{\n \"name\": \"01basicreact\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\""
},
{
"path": "01basicreact/public/index.html",
"chars": 659,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.i"
},
{
"path": "01basicreact/public/manifest.json",
"chars": 492,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "01basicreact/public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "01basicreact/src/App.js",
"chars": 117,
"preview": "\nimport Chai from \"./Chai\";\n\nfunction App() {\n return (\n <>\n <Chai/>\n \n </>\n );\n}\n\nexport default App;\n"
},
{
"path": "01basicreact/src/Chai.jsx",
"chars": 88,
"preview": "function Chai(){\n return(\n <h2>chai in react</h2>\n )\n}\n\nexport default Chai"
},
{
"path": "01basicreact/src/index.js",
"chars": 196,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nimport App from './App';\n\n\nconst root = ReactDOM.cr"
},
{
"path": "01vitereact/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "01vitereact/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "01vitereact/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "01vitereact/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "01vitereact/package.json",
"chars": 655,
"preview": "{\n \"name\": \"01vitereact\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\""
},
{
"path": "01vitereact/src/App.jsx",
"chars": 206,
"preview": "\n\nimport Chai from \"./chai\"\n\n\nfunction App() {\n const username = \"chai aur code\"\n\n return (\n <>\n <Chai/>\n <h1"
},
{
"path": "01vitereact/src/chai.jsx",
"chars": 88,
"preview": "function Chai(){\n return(\n <h3>chai is ready</h3>\n )\n}\n\nexport default Chai"
},
{
"path": "01vitereact/src/main.jsx",
"chars": 769,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\n\nimport App from './App.jsx'\n\nfunction MyApp(){\n re"
},
{
"path": "01vitereact/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "02counter/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "02counter/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "02counter/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "02counter/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "02counter/package.json",
"chars": 653,
"preview": "{\n \"name\": \"02counter\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n"
},
{
"path": "02counter/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "02counter/src/App.jsx",
"chars": 859,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "02counter/src/index.css",
"chars": 1195,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "02counter/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "02counter/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "03tailwindprops/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "03tailwindprops/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "03tailwindprops/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "03tailwindprops/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "03tailwindprops/package.json",
"chars": 746,
"preview": "{\n \"name\": \"03tailwindprops\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"v"
},
{
"path": "03tailwindprops/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "03tailwindprops/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "03tailwindprops/src/App.jsx",
"chars": 532,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "03tailwindprops/src/components/Card.jsx",
"chars": 992,
"preview": "import React from 'react'\n\nfunction Card({username, btnText=\"visit me\"}) {\n console.log(username);\n return (\n <di"
},
{
"path": "03tailwindprops/src/index.css",
"chars": 1255,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n font-family: Inter, system-ui, Avenir, Helvetica, "
},
{
"path": "03tailwindprops/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "03tailwindprops/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "03tailwindprops/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "04bgChanger/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "04bgChanger/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "04bgChanger/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "04bgChanger/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "04bgChanger/package.json",
"chars": 742,
"preview": "{\n \"name\": \"04bgchanger\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\""
},
{
"path": "04bgChanger/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "04bgChanger/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "04bgChanger/src/App.jsx",
"chars": 1083,
"preview": "import { useState } from \"react\"\n\n\nfunction App() {\n const [color, setColor] = useState(\"olive\")\n\n return (\n <div c"
},
{
"path": "04bgChanger/src/index.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "04bgChanger/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "04bgChanger/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "04bgChanger/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "05passwordGenerator/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "05passwordGenerator/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "05passwordGenerator/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "05passwordGenerator/index.html",
"chars": 393,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "05passwordGenerator/package.json",
"chars": 750,
"preview": "{\n \"name\": \"05passwordgenerator\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\""
},
{
"path": "05passwordGenerator/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "05passwordGenerator/src/App.css",
"chars": 0,
"preview": ""
},
{
"path": "05passwordGenerator/src/App.jsx",
"chars": 2853,
"preview": "import { useState, useCallback, useEffect, useRef } from 'react'\n\n\n\nfunction App() {\n const [length, setLength] = useSt"
},
{
"path": "05passwordGenerator/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "05passwordGenerator/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "05passwordGenerator/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "05passwordGenerator/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "06currencyConvertor/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "06currencyConvertor/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "06currencyConvertor/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "06currencyConvertor/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "06currencyConvertor/package.json",
"chars": 750,
"preview": "{\n \"name\": \"06currencyconvertor\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\""
},
{
"path": "06currencyConvertor/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "06currencyConvertor/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "06currencyConvertor/src/App.jsx",
"chars": 2988,
"preview": "import { useState } from 'react'\nimport {InputBox} from './components'\nimport useCurrencyInfo from './hooks/useCurrencyI"
},
{
"path": "06currencyConvertor/src/components/InputBox.jsx",
"chars": 1819,
"preview": "import React, {useId} from 'react'\n\nfunction InputBox({\n label,\n amount,\n onAmountChange,\n onCurrencyChange,"
},
{
"path": "06currencyConvertor/src/components/index.js",
"chars": 52,
"preview": "import InputBox from './InputBox'\n\nexport {InputBox}"
},
{
"path": "06currencyConvertor/src/hooks/useCurrencyInfo.js",
"chars": 451,
"preview": "import {useEffect, useState} from \"react\"\n\n\nfunction useCurrencyInfo(currency){\n const [data, setData] = useState({})"
},
{
"path": "06currencyConvertor/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "06currencyConvertor/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "06currencyConvertor/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "06currencyConvertor/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "07reactRouter/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "07reactRouter/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "07reactRouter/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "07reactRouter/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "07reactRouter/package.json",
"chars": 779,
"preview": "{\n \"name\": \"07reactrouter\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vit"
},
{
"path": "07reactRouter/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "07reactRouter/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "07reactRouter/src/App.jsx",
"chars": 390,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "07reactRouter/src/Layout.jsx",
"chars": 283,
"preview": "import React from 'react'\nimport Header from './components/Header/Header'\nimport Footer from './components/Footer/Footer"
},
{
"path": "07reactRouter/src/components/About/About.jsx",
"chars": 1588,
"preview": "import React from 'react'\n\nexport default function About() {\n return (\n <div className=\"py-16 bg-white\">\n "
},
{
"path": "07reactRouter/src/components/Contact/Contact.jsx",
"chars": 7767,
"preview": "import React from 'react'\n\nexport default function Contact() {\n return (\n <div className=\"relative flex items-"
},
{
"path": "07reactRouter/src/components/Footer/Footer.jsx",
"chars": 10639,
"preview": "import React from 'react'\nimport { Link } from 'react-router-dom';\n\nexport default function Footer() {\n return (\n "
},
{
"path": "07reactRouter/src/components/Github/Github.jsx",
"chars": 816,
"preview": "import React, { useEffect, useState } from 'react'\nimport { useLoaderData } from 'react-router-dom'\n\nfunction Github() {"
},
{
"path": "07reactRouter/src/components/Header/Header.jsx",
"chars": 4369,
"preview": "import React from 'react'\nimport {Link, NavLink} from 'react-router-dom'\n\nexport default function Header() {\n return "
},
{
"path": "07reactRouter/src/components/Home/Home.jsx",
"chars": 2443,
"preview": "import React from 'react'\nimport { Link } from 'react-router-dom';\n\nexport default function Home() {\n return (\n "
},
{
"path": "07reactRouter/src/components/User/User.jsx",
"chars": 238,
"preview": "import React from 'react'\nimport { useParams } from 'react-router-dom'\n\nfunction User() {\n const {userid} = useParams"
},
{
"path": "07reactRouter/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "07reactRouter/src/main.jsx",
"chars": 1468,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\nimpor"
},
{
"path": "07reactRouter/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "07reactRouter/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "08miniContext/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "08miniContext/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "08miniContext/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "08miniContext/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "08miniContext/package.json",
"chars": 657,
"preview": "{\n \"name\": \"08minicontext\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vit"
},
{
"path": "08miniContext/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "08miniContext/src/App.jsx",
"chars": 366,
"preview": "\nimport './App.css'\nimport Login from './components/Login'\nimport Profile from './components/Profile'\nimport UserContext"
},
{
"path": "08miniContext/src/components/Login.jsx",
"chars": 806,
"preview": "import React, {useState, useContext} from 'react'\nimport UserContext from '../context/UserContext'\n\nfunction Login() {\n "
},
{
"path": "08miniContext/src/components/Profile.jsx",
"chars": 277,
"preview": "import React, {useContext} from 'react'\nimport UserContext from '../context/UserContext'\n\nfunction Profile() {\n const"
},
{
"path": "08miniContext/src/context/UserContext.js",
"chars": 99,
"preview": "import React from 'react'\n\nconst UserContext = React.createContext()\n\nexport default UserContext;\n\n"
},
{
"path": "08miniContext/src/context/UserContextProvider.jsx",
"chars": 325,
"preview": "import React from \"react\";\nimport UserContext from \"./UserContext\";\n\nconst UserContextProvider = ({children}) => {\n c"
},
{
"path": "08miniContext/src/index.css",
"chars": 1195,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "08miniContext/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "08miniContext/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "09themeswitcher/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "09themeswitcher/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "09themeswitcher/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "09themeswitcher/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "09themeswitcher/package.json",
"chars": 746,
"preview": "{\n \"name\": \"09themeswitcher\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"v"
},
{
"path": "09themeswitcher/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "09themeswitcher/src/App.css",
"chars": 0,
"preview": ""
},
{
"path": "09themeswitcher/src/App.jsx",
"chars": 1072,
"preview": "\nimport { useEffect, useState } from 'react'\nimport './App.css'\nimport { ThemeProvider } from './contexts/theme'\nimport "
},
{
"path": "09themeswitcher/src/components/Card.jsx",
"chars": 5044,
"preview": "import React from 'react'\n\nexport default function Card() {\n return (\n <div className=\"w-full bg-white border "
},
{
"path": "09themeswitcher/src/components/ThemeBtn.jsx",
"chars": 1270,
"preview": "import React from 'react'\nimport useTheme from '../contexts/theme';\n\nexport default function ThemeBtn() {\n \n const"
},
{
"path": "09themeswitcher/src/contexts/theme.js",
"chars": 300,
"preview": "import { createContext, useContext } from \"react\";\n\nexport const ThemeContext = createContext({\n themeMode: \"light\",\n"
},
{
"path": "09themeswitcher/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "09themeswitcher/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "09themeswitcher/tailwind.config.js",
"chars": 204,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "09themeswitcher/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "10todocontextLocal/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "10todocontextLocal/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "10todocontextLocal/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "10todocontextLocal/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "10todocontextLocal/package.json",
"chars": 749,
"preview": "{\n \"name\": \"10todocontextlocal\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\":"
},
{
"path": "10todocontextLocal/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "10todocontextLocal/src/App.css",
"chars": 1,
"preview": "\n"
},
{
"path": "10todocontextLocal/src/App.jsx",
"chars": 2073,
"preview": "import { useState, useEffect } from 'react'\nimport {TodoProvider} from './contexts'\nimport './App.css'\nimport TodoForm f"
},
{
"path": "10todocontextLocal/src/components/TodoForm.jsx",
"chars": 872,
"preview": "import React, { useState } from 'react'\nimport { useTodo } from '../contexts/TodoContext';\n\nfunction TodoForm() {\n co"
},
{
"path": "10todocontextLocal/src/components/TodoItem.jsx",
"chars": 2260,
"preview": "import React, { useState } from 'react'\nimport { useTodo } from '../contexts/TodoContext';\n\nfunction TodoItem({ todo }) "
},
{
"path": "10todocontextLocal/src/components/index.js",
"chars": 98,
"preview": "import TodoForm from \"./TodoForm\";\nimport TodoItem from \"./TodoItem\";\n\nexport {TodoForm, TodoItem}"
},
{
"path": "10todocontextLocal/src/contexts/TodoContext.js",
"chars": 454,
"preview": "import {createContext, useContext} from \"react\"\n\nexport const TodoContext = createContext({\n todos: [\n {\n "
},
{
"path": "10todocontextLocal/src/contexts/index.js",
"chars": 64,
"preview": "export {TodoContext, TodoProvider, useTodo} from \"./TodoContext\""
},
{
"path": "10todocontextLocal/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "10todocontextLocal/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
},
{
"path": "10todocontextLocal/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "10todocontextLocal/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "12MegaBlog/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "12MegaBlog/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "12MegaBlog/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "12MegaBlog/index.html",
"chars": 382,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "12MegaBlog/package.json",
"chars": 975,
"preview": "{\n \"name\": \"12megablog\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\","
},
{
"path": "12MegaBlog/postcss.config.js",
"chars": 80,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "12MegaBlog/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "12MegaBlog/src/App.jsx",
"chars": 922,
"preview": "import React, { useState, useEffect } from 'react'\nimport { useDispatch } from 'react-redux'\nimport './App.css'\nimport a"
},
{
"path": "12MegaBlog/src/appwrite/auth.js",
"chars": 1472,
"preview": "import conf from '../conf/conf.js';\nimport { Client, Account, ID } from \"appwrite\";\n\n\nexport class AuthService {\n cli"
},
{
"path": "12MegaBlog/src/appwrite/config.js",
"chars": 3570,
"preview": "import conf from '../conf/conf.js';\nimport { Client, ID, Databases, Storage, Query } from \"appwrite\";\n\nexport class Serv"
},
{
"path": "12MegaBlog/src/components/AuthLayout.jsx",
"chars": 982,
"preview": "import React, {useEffect, useState} from 'react'\nimport {useSelector} from 'react-redux'\nimport {useNavigate} from 'reac"
},
{
"path": "12MegaBlog/src/components/Button.jsx",
"chars": 356,
"preview": "import React from \"react\";\n\nexport default function Button({\n children,\n type = \"button\",\n bgColor = \"bg-blue-6"
},
{
"path": "12MegaBlog/src/components/Footer/Footer.jsx",
"chars": 6962,
"preview": "import React from 'react'\nimport { Link } from 'react-router-dom'\nimport Logo from '../Logo'\n\nfunction Footer() {\n retu"
},
{
"path": "12MegaBlog/src/components/Header/Header.jsx",
"chars": 1609,
"preview": "import React from 'react'\nimport {Container, Logo, LogoutBtn} from '../index'\nimport { Link } from 'react-router-dom'\nim"
},
{
"path": "12MegaBlog/src/components/Header/LogoutBtn.jsx",
"chars": 525,
"preview": "import React from 'react'\nimport {useDispatch} from 'react-redux'\nimport authService from '../../appwrite/auth'\nimport {"
},
{
"path": "12MegaBlog/src/components/Input.jsx",
"chars": 710,
"preview": "import React, {useId} from 'react'\n\nconst Input = React.forwardRef( function Input({\n label,\n type = \"text\",\n c"
},
{
"path": "12MegaBlog/src/components/Login.jsx",
"chars": 2900,
"preview": "import React, {useState} from 'react'\nimport {Link, useNavigate} from 'react-router-dom'\nimport { login as authLogin } f"
},
{
"path": "12MegaBlog/src/components/Logo.jsx",
"chars": 119,
"preview": "import React from 'react'\n\nfunction Logo({width = '100px'}) {\n return (\n <div>Logo</div>\n )\n}\n\nexport default Logo"
},
{
"path": "12MegaBlog/src/components/PostCard.jsx",
"chars": 616,
"preview": "import React from 'react'\nimport appwriteService from \"../appwrite/config\"\nimport {Link} from 'react-router-dom'\n\nfuncti"
},
{
"path": "12MegaBlog/src/components/RTE.jsx",
"chars": 1570,
"preview": "import React from 'react'\nimport {Editor } from '@tinymce/tinymce-react';\nimport {Controller } from 'react-hook-form';\n\n"
},
{
"path": "12MegaBlog/src/components/Select.jsx",
"chars": 707,
"preview": "import React, {useId} from 'react'\n\nfunction Select({\n options,\n label,\n className,\n ...props\n}, ref) {\n "
},
{
"path": "12MegaBlog/src/components/Signup.jsx",
"chars": 3383,
"preview": "import React, {useState} from 'react'\nimport authService from '../appwrite/auth'\nimport {Link ,useNavigate} from 'react-"
},
{
"path": "12MegaBlog/src/components/container/Container.jsx",
"chars": 164,
"preview": "import React from 'react'\n\nfunction Container({children}) {\n return <div className='w-full max-w-7xl mx-auto px-4'>{chi"
},
{
"path": "12MegaBlog/src/components/index.js",
"chars": 675,
"preview": "import Select from \"./Select\";\nimport Header from \"./Header/Header\";\nimport Footer from \"./Footer/Footer\";\nimport Contai"
},
{
"path": "12MegaBlog/src/components/post-form/PostForm.jsx",
"chars": 4311,
"preview": "import React, { useCallback } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { Button, Input, RTE, Sele"
},
{
"path": "12MegaBlog/src/conf/conf.js",
"chars": 503,
"preview": "const conf = {\n appwriteUrl: String(import.meta.env.VITE_APPWRITE_URL),\n appwriteProjectId: String(import.meta.env"
},
{
"path": "12MegaBlog/src/index.css",
"chars": 58,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
},
{
"path": "12MegaBlog/src/main.jsx",
"chars": 2085,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\nimpor"
},
{
"path": "12MegaBlog/src/pages/AddPost.jsx",
"chars": 244,
"preview": "import React from 'react'\nimport { Container, PostForm } from '../components'\n\nfunction AddPost() {\n return (\n <div "
},
{
"path": "12MegaBlog/src/pages/AllPosts.jsx",
"chars": 763,
"preview": "import React, {useState, useEffect} from 'react'\nimport { Container, PostCard } from '../components'\nimport appwriteServ"
},
{
"path": "12MegaBlog/src/pages/EditPost.jsx",
"chars": 789,
"preview": "import React, {useEffect, useState} from 'react'\nimport {Container, PostForm} from '../components'\nimport appwriteServic"
},
{
"path": "12MegaBlog/src/pages/Home.jsx",
"chars": 1356,
"preview": "import React, {useEffect, useState} from 'react'\nimport appwriteService from \"../appwrite/config\";\nimport {Container, Po"
},
{
"path": "12MegaBlog/src/pages/Login.jsx",
"chars": 204,
"preview": "import React from 'react'\nimport { Login as loginComponent } from '../components'\nfunction Login() {\n return (\n <div"
},
{
"path": "12MegaBlog/src/pages/Post.jsx",
"chars": 2397,
"preview": "import React, { useEffect, useState } from \"react\";\nimport { Link, useNavigate, useParams } from \"react-router-dom\";\nimp"
},
{
"path": "12MegaBlog/src/pages/Signup.jsx",
"chars": 210,
"preview": "import React from 'react'\nimport { Signup as SignupComponent } from '../components'\n\nfunction Signup() {\n return (\n "
},
{
"path": "12MegaBlog/src/store/authSlice.js",
"chars": 535,
"preview": "import { createSlice } from \"@reduxjs/toolkit\";\n\nconst initialState = {\n status : false,\n userData: null\n}\n\nconst "
},
{
"path": "12MegaBlog/src/store/store.js",
"chars": 239,
"preview": "import {configureStore} from '@reduxjs/toolkit';\nimport authSlice from './authSlice';\n\nconst store = configureStore({\n "
},
{
"path": "12MegaBlog/tailwind.config.js",
"chars": 183,
"preview": "/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx"
},
{
"path": "12MegaBlog/vite.config.js",
"chars": 163,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport defau"
},
{
"path": "contextNotes.md",
"chars": 6662,
"preview": "# Notes for context api\n\n## ThemeBtn UI\n\n```javascript\nexport default function ThemeBtn() {\n \n\n return (\n <"
},
{
"path": "currency.md",
"chars": 3153,
"preview": "# notes for currency converter app\n\n## api link\n\n```javascript\nlet url = `https://cdn.jsdelivr.net/gh/fawazahmed0/curren"
},
{
"path": "customReact/customreact.js",
"chars": 914,
"preview": "function customRender(reactElement, container){\n /*\n const domElement = document.createElement(reactElement.type)\n"
},
{
"path": "customReact/index.html",
"chars": 279,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "interview-discussion/.eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": "interview-discussion/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "interview-discussion/README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "interview-discussion/index.html",
"chars": 361,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "interview-discussion/package.json",
"chars": 664,
"preview": "{\n \"name\": \"interview-discussion\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev"
},
{
"path": "interview-discussion/src/App.css",
"chars": 606,
"preview": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n paddin"
},
{
"path": "interview-discussion/src/App.jsx",
"chars": 807,
"preview": "import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './A"
},
{
"path": "interview-discussion/src/index.css",
"chars": 1195,
"preview": ":root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n\n"
},
{
"path": "interview-discussion/src/main.jsx",
"chars": 235,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReac"
}
]
// ... and 23 more files (download for full content)
About this extraction
This page contains the full source code of the hiteshchoudhary/chai-aur-react GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 223 files (195.0 KB), approximately 57.4k tokens, and a symbol index with 74 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.