REACT apps MY app
npm create vite@latest
cd directory
npm install
npm run dev
1) Food Delivery app
pages
1)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;
}
2)App.jsx
import React from 'react'
function App() {
return (
<div >
<Home/>
</div>
)
}
export default App
3) category.jsx
import { TiThSmallOutline } from "react-icons/ti";
import { MdOutlineFreeBreakfast } from "react-icons/md";
import { TbSoup } from "react-icons/tb";
import { CiBowlNoodles } from "react-icons/ci";
import { MdOutlineFoodBank } from "react-icons/md";
import { GiFullPizza } from "react-icons/gi";
import { GiHamburger } from "react-icons/gi";
export const Categories=[
{
id:1,
name:'ALL',
icon:<TiThSmallOutline className="w-[60px] h-[60px] text-green-600"/>
},
{
id:2,
name:'breakfast',
image:<MdOutlineFreeBreakfast className="w-[60px] h-[60px] text-green-600"/>
},
{
id:3,
name:'Soups',
image:<TbSoup className="w-[60px] h-[60px] text-green-600"/>
},
{
id:4,
name:'Pasta',
icon:<CiBowlNoodles className="w-[60px] h-[60px] text-green-600"/>
},
{
id:5,
name:'main_course',
icon:<MdOutlineFoodBank className="w-[60px] h-[60px] text-green-600"/>
},
{
id:6,
name:'pizza',
icon:<GiFullPizza className="w-[60px] h-[60px] text-green-600"/>
},
{
id:7,
name:'burger',
icon:<GiHamburger className="w-[60px] h-[60px] text-green-600"/>
},
]
export default Categories
4) Food.js
import image1 from "./assets/image1.avif";
import image2 from "./assets/image2.avif";
import image3 from "./assets/image3.avif";
import image4 from "./assets/image4.avif";
import image5 from "./assets/image5.avif";
import image6 from "./assets/image6.avif";
import image7 from "./assets/image7.avif";
import image8 from "./assets/image8.avif";
import image9 from "./assets/image9.avif";
import image10 from "./assets/image10.avif";
import image11 from "./assets/image11.avif";
import image12 from "./assets/image12.avif";
import image13 from "./assets/image13.avif";
import image14 from "./assets/image14.webp";
import image15 from "./assets/image15.avif";
import image16 from "./assets/image16.avif";
import image17 from "./assets/image17.avif";
import image18 from "./assets/image18.avif";
import image19 from "./assets/image19.avif";
import image20 from "./assets/image20.avif";
import image21 from "./assets/image21.avif";
import image22 from "./assets/image22.avif";
import image23 from "./assets/image23.avif";
import image24 from "./assets/image24.avif";
import image25 from "./assets/image25.avif";
export const food_items = [
{"id": 1, "food_name": "Pancakes", "food_category": "breakfast", "food_type": "veg", "food_quantity": 1, "food_image": image1, "price": 499},
{"id": 2, "food_name": "Chicken Soup", "food_category": "soups", "food_type": "non_veg", "food_quantity": 1, "food_image": image2, "price": 399},
{"id": 3, "food_name": "Minestrone Soup", "food_category": "soups", "food_type": "veg", "food_quantity": 1, "food_image": image3, "price": 349},
{"id": 4, "food_name": "Spaghetti Carbonara", "food_category": "pasta", "food_type": "non_veg", "food_quantity": 1, "food_image": image4, "price": 999},
{"id": 5, "food_name": "Veg Alfredo Pasta", "food_category": "pasta", "food_type": "veg", "food_quantity": 1, "food_image": image5, "price": 899},
{"id": 6, "food_name": "Chicken Alfredo Pasta", "food_category": "pasta", "food_type": "non_veg", "food_quantity": 1, "food_image": image6, "price": 1099},
{"id": 7, "food_name": "Paneer Butter Masala", "food_category": "main_course", "food_type": "veg", "food_quantity": 1, "food_image": image7, "price": 799},
{"id": 8, "food_name": "Chicken Biryani", "food_category": "main_course", "food_type": "non_veg", "food_quantity": 1, "food_image": image8, "price": 1199},
{"id": 9, "food_name": "Margherita Pizza", "food_category": "pizza", "food_type": "veg", "food_quantity": 1, "food_image": image9, "price": 649},
{"id": 10, "food_name": "Pepperoni Pizza", "food_category": "pizza", "food_type": "non_veg", "food_quantity": 1, "food_image": image10, "price": 749},
{"id": 11, "food_name": "Veggie Burger", "food_category": "burger", "food_type": "veg", "food_quantity": 1, "food_image": image11, "price": 499},
{"id": 12, "food_name": "Chicken Burger", "food_category": "burger", "food_type": "non_veg", "food_quantity": 1, "food_image": image12, "price": 599},
{"id": 13, "food_name": "Tomato Soup", "food_category": "soups", "food_type": "veg", "food_quantity": 1, "food_image": image13, "price": 299},
{"id": 14, "food_name": "Egg Sandwich", "food_category": "breakfast", "food_type": "non_veg", "food_quantity": 1, "food_image": image14, "price": 349},
{"id": 15, "food_name": "Mushroom Soup", "food_category": "soups", "food_type": "veg", "food_quantity": 1, "food_image": image15, "price": 349},
{"id": 16, "food_name": "Chicken Tikka Masala", "food_category": "main_course", "food_type": "non_veg", "food_quantity": 1, "food_image": image16, "price": 1199},
{"id": 17, "food_name": "Cheese Omelette", "food_category": "breakfast", "food_type": "non_veg", "food_quantity": 1, "food_image": image17, "price": 399},
{"id": 18, "food_name": "Fettuccine Alfredo", "food_category": "pasta", "food_type": "veg", "food_quantity": 1, "food_image": image18, "price": 949},
{"id": 19, "food_name": "Garlic Bread", "food_category": "pizza", "food_type": "veg", "food_quantity": 1, "food_image": image19, "price": 299},
{"id": 20, "food_name": "Fish and Chips", "food_category": "main_course", "food_type": "non_veg", "food_quantity": 1, "food_image": image20, "price": 1099},
{"id": 21, "food_name": "Hash Browns", "food_category": "breakfast", "food_type": "veg", "food_quantity": 1, "food_image": image21, "price": 249},
{"id": 22, "food_name": "Vegetable Soup", "food_category": "soups", "food_type": "veg", "food_quantity": 1, "food_image": image22, "price": 329},
{"id": 23, "food_name": "Egg Fried Rice", "food_category": "main_course", "food_type": "non_veg", "food_quantity": 1, "food_image": image23, "price": 599},
{"id": 24, "food_name": "Hawaiian Pizza", "food_category": "pizza", "food_type": "non_veg", "food_quantity": 1, "food_image": image24, "price": 799},
{"id": 25, "food_name": "Pasta Primavera", "food_category": "pasta", "food_type": "veg", "food_quantity": 1, "food_image": image25, "price": 899}
];
5)index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
6)main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<UserContext>
<App />
</UserContext>
)
7)gitignore 8)eslint.config.js
9)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>Food Delivery</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
8)pakage-lock.json 9)pakage.json 10)postcss.config.js 11)Readme.md 12)tailwind.config.js
13)vite.config.js
14)Nav.jsx
import React from 'react'
import { MdFastfood } from "react-icons/md";
import { FaSearch } from "react-icons/fa";
import { MdOutlineShoppingBag } from "react-icons/md";
function Nav() {
let{input,setInput,cate,setCate,showCart,setShowCart}=useContext(dataContext)
useEffect(()=>{
let newlist=food_items.filter((item)=>item.food_name.includes(input)||item.food_name.toLowerCase().includes(input))
setCate(newlist)
},[input])
return (
<div className='w-full h-[100px] flex justify-between items-center px-5 md:px-8 '>
<div className='w-[60px] h-[60px] bg-white flex justify-center items-center rounded-md'>
<MdFastfood className='w-[30px] h-[30px] text-green-500'/>
</div>
<form className='w-[45%] h-[60%] bg-white flex items-center px-5 gap-5 rounded-md shadow-md md:w-[70%]' onSubmit={()=>e.preventDefault()}>
<FaSearch className='text-green-500 w-[20px] h-[20px] '/>
<input type="text" placeholder='search Items...'
className='w-[100%] outline-none text-[16px] md:text-[20px]' onchange={()=>setInput(e.target.value)} value={input}/>
</form>
<div className='w-[60px] h-[60px] bg-white flex justify-center items-center rounded-md shadow-xl relative' onClick={( )=>{
setShowCart(true)
}}>
<span className='absolute top-0 right-2 text-green-500 font-bold text-[18px]'>0</span>
<MdOutlineShoppingBag className='w-[30px] h-[30px] text-green-500'/>
</div>
</div>
)
}
export default Nav
15) card.jsx
import React from 'react'
import image1 from "../assets/image1.avif"
import { LuLeafyGreen } from "react-icons/lu";
import { GiChickenOven } from "react-icons/gi";
function card({name,image,id,price,type}) {
return (
<div className='w-[300px] h-[400px] bg-white p-3 rounded-lg flex flex-col gap-3 shadow-lg hover:border-2 border-green-300 '>
<div className='w-[100%] h-[60%] overflow-hidden rounded-lg'>
<img src={image} alt="" className='object-cover'/>
</div>
<div className='text-2xl font-semibold'>
{name}
</div>
<div className='w-[100%] flex justify-between items-center'>
<div className='text-lg font-bold text-green-500'>Rs {price}/-</div>
<div className='flex justify-center items-center gap-2 text-green-500 text-lg font-semibold '>{type==="veg"?<LuLeafyGreen />:<GiChickenOven />} <span>{type}</span></div>
</div>
<button className='w-full p-3 rounded-lg bg-green-500 text-white hover:bg-green-400 transition-all '>Add to dish</button>
</div>
)
}
export default card
16)usercontext.jsx
import React, { createContext, useState } from 'react';
import { food_items } from '../food'
export const dataContext = createcontext()
function UserContext({ children }) {
let [cate, setCate] = usestate(food_items)
let [input, setInput] = useState("")
let [showCart, setShowCart] = useState(false)
let data = {
input,
setInput,
cate,
setCate,
showCart,
setShowCart,
}
return (
<div>
<dataContext.Provider value={data}>
{children}
</dataContext.Provider>
</div>
)
}
export default usercontext
17)Home.jsx
import React from 'react'
import Nav from '../components/Nav';
import Categories, { categories } from '../category';
import Card from '../components/card';
import { food_items } from '../food'
import { dataContext } from '../context/usercontext';
import { GiCrossMark } from "react-icons/gi";
function Home() {
let {cate,setCate,input,showCart,setShowCart}=useContext(dataContext)
function filter(category) {
if (category === "All") {
setCate(food_items)
} else {
let newList = food_items.filter((item) => (item.food_category == category))
setCate(newList)
}
}
return (
<div className='bg-slate-200 w-full min-h-screen'>
<Nav />
{!input>0?<div className='flex flex-wrap justify-center items-center gap-5 w-[100%]'>
{categories.map((item)=>{
return <div clasName='w-[140px] h-[150px] bg-white flex flex-col items-start gap-5 w-[140px] h-[150px] justify-start text-[20px] font-semibold text-gray-600 rounded-lg shadow-xl hover:bg-green-200 cursor-pointer transition-all duration-200' onclick={()=>filter(item.name)}>
{item.icon}
{item.name}
</div>
})}
</div>:null}
<div className='w-full flex-wrap gap-5 px-5 justify-center items-center pt-8 pb-8 '>
{cate.map((item) => (
<Card name={item.food_name} image={item.food_image}
price={item.price} id={item.id} type={item.food_type} />
))}
</div>
<div className={'w-[40vw] h-[100%] fixed top-0 right-0 bg-white shadow-xl p-6 ${showCart?"translate-x-0":"translate-x-full"}'} >
<header className='w-[100%] flex justify-between items-center'>
<span className='text-green-400 text-[18px] font-semibold'>Order items</span>
<GiCrossMark className='w-[30px] h-[30px] text-green-400 text-[18px] font-semibold cursor-pointer hover:text-gray-600' onClick={()=>setsShowCart(false)}/>
</header>
</div>
</div>
)
}
export default Home
2)SmartAIBot
npm create vite@latest
cd directory
npm i to node-modulus
create 2 folder in src 1)context 2)pages
1)usercontext.jsx
import React from 'react'
export const dataContext = createContext()
function UserContext({children}) {
let [startRes,setStartRes]=useState(false)
let [popUp,setPopUp]=useState(false)
let [input,setInput]=useState("")
let value={
startRes,setStartRes,
popUp,setPopUP,
input,setInput
}
return (
<div>
<dataContext.provider value={value}>
{children}
</dataContext.provider>
</div>
)
}
export default UserContext
2)in pages 1) Chat.jsx 2) Home.jsx
1)Chat.jsx
import React from 'react'
function Chat() {
return (
<div className="chat-page">
<div className="user">
<img src="" alt="" />
<span>user</span>
</div>
<div className="ai">
<img src="" alt="" />
<span>ai</span>
</div>
</div>
)
}
export default Chat
2)home.jsx
import React from 'react'
import "../App.css"
import { RiImageAiFill } from "react-icons/ri";
import { RiImageAddFill } from "react-icons/ri";
import { IoChatboxEllipses } from "react-icons/io5";
import { FaPlus } from "react-icons/fa6";
import { FaArrowAltCircleUp } from "react-icons/fa";
import { dataContext } from '../context/UserContext';
import Chat from './Chat';
function Home() {
let { startRes, setStartRes, popUp, setPopUP,input,setInput} = useContext(dataContext)
async function handleSubmit(e) {
setStartRes(true)
}
return (
<div className='home'>
<nav>
<div className="logo">
smart AI Bot
</div>
</nav>
{!startRes ? <div className="hero">
<span id="tag">What can I help with ?</span>
<div className="cate">
<div className="upImg">
<RiImageAddFill />
<span>Upload Image</span>
</div>
<div className="genImg">
<RiImageAiFill />
<span>Generate Image</span>
</div>
<div className="chat">
<IoChatboxEllipses />
<span> Let's Chat </span>
</div>
</div>
</div>
:
<Chat />
}
<form className="input-box" onSubmit={(e) => {
e.preventDefault()
if(input){
handleSubmit(e)}
}
}>
{popUp? <div className="pop-up">
<div className="select-up">
<RiImageAddFill />
<span>Upload Image</span>
</div>
<div className="select-gen">
<RiImageAiFill />
<span>Generate Image</span>
</div>
</div>: null}
<div id="add" onclick={() => {
setPopUP(prev => !prev)
}}>
<FaPlus />
</div>
<input type="text" placeholder='Ask Something...' onChange={(e)=>setInput (e.target.value)} value={input} />
{input? <button id="Submit">
<FaArrowAltCircleUp />
</button>:null}
</form>
</div>
)
}
export default Home
3) in src assets context pages then
1) APP.css
.home{
width: 100%;
height: 100vh;
overflow: hidden;
}
.nav{
width: 100%;
height: 80px;
display:flex;
align-items: center;
justify-content: start;
color: white;
padding: 10px 30px;
font-size: 30px;
}
.hero{
width: 100%;
height: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap:wrap;
color: white;
gap: 20px;
padding: 10px 20px;
}
#tag{
font-size: 2vmax;
}
.cate{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.upImg, .genImg,.chat{
padding: 10px 20px;
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 19px;
border-radius: 30px;
cursor: pointer;
}
.upImg svg{
width: 25px;
height: 25px;
color: rgb(7, 240, 11);
}
.genImg svg{
width: 25px;
height: 25px;
color: rgb(7, 236, 248);
}
.chat svg{
width: 25px;
height: 25px;
color: rgb(240, 155, 11);
}
.upImg:hover, .genImg:hover,.chat:hover{
background-color: rgba(240, 248, 255, 0.108);
}
.input-box{
width: 100%;
height: calc(100vh - 80vh - 70%);
display: flex;
align-items:center;
justify-content: center;
gap: 20px;
padding: 0px 20px;
position: fixed;
bottom: 0;
}
#add,#submit{
width: 60px;
height: 60px;
border: 2px solid white;
border-radius: 50px;
background-color: rgb(11, 16, 17);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#add svg{
width: 30px;
height: 30px;
}
#submit svg{
width: 25px;
height: 25px;
}
form input{
width:calc( 100% - 120px);
height:60px;
background-color: rgb(11, 16, 17);
border: 2px solid rgba(255, 255, 255, 0.297);
outline: none;
border-radius: 30px;
color: white;
padding: 10px 20px;
font-size: 19px;
}
.chat-page{
width: 100%;
height: 70%;
display: flex;
align-items: start;
justify-content: start;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.user,.ai{
width: 90%;
padding: 20px 30px;
color: white;
background-color: rgb(11, 16, 17);
border: 2px solid rgba(255, 255, 255, 0.297);
border-radius: 20px;
font-size: 20px;
}
.pop-up{
width: 200px;
height: 120px;
background-color: rgb(11, 16, 17);
border: 2px solid rgba(255, 255, 255, 0.297);
position: absolute;
bottom:120px;
left: 15%;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 5px;
}
.select-up,.select-gen{
color: white;
width: 100%;
padding: 10px;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
font-size: 16px;
border-radius: 20px;
cursor: pointer;
}
.select-up:hover,.select-gen:hover{
background-color: rgba(240, 248, 255, 0.164);
}
.select-up svg{
color: rgb(7, 240, 11);
width: 25px;
height: 25px;
}
.select-gen svg{
color: rgb(7, 236, 240);
width: 25px;
height: 25px;
}
@media (max-width: 500px){
#tag{
font-size: 20px;
}
}
2)App.jsx
import React from 'react'
import Home from './pages/Home'
function App() {
return (
<div>
<Home/>
</div>
)
}
export default App
3)index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', serif;
}
body{
width: 100%;
height: 100vh;
background-color: black;
}
4)Main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<UserContext>
<App />
</UserContext>
)
5)gitignore 6)eslint.config.js
7)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smart AI Bot - Upload image | generate image | Chat</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
8)pakage-lock.json 9)pakage.json 10)Readme.md 11)vite.config.js
3)Basic of Node.js and HTTP Status code and File system
1) HTTP STATUS
// 1. ========================= HTTP STATUS CODE ========================
//------ 2xx : SUCCESSFUL RESPONSES -------------------
// 200 - The request succeeded. (getting information about fitness, or
getting infromation)
// 201 - The request succeeded, and a new resource was created as a result.
// ------- 3xx: Redirectoin Responses -----------------
// 301 - The URL of the requested resource has been changed permanently.
The new URL is given in the response.
// ------ 4xx: Client Error Responses -----------------
// 404 - NOT FOUND - The server cannot find the requested resource.
In the browser, this means the URL is not recognized.
// 401 - Unauthorized - "unauthenticated".
That is, the client must authenticate itself to get the requested response.
(WRONG PASSWORD TO ENTER Facebook).
// 403 - Forbidden - The client does not have access rights to the content;
that is, it is unauthorized,
// so the server is refusing to give the requested resource.
Unlike 401 Unauthorized, the client's identity is
// known to the server.
// (YOU entered facebook, but you still cant see admin page ::::
you are authorized to FB page but forbidden to its admin page).
// 405 - Method not allowed -
// 422 - Unprocessable Content - The request was well-formed
but was unable to be followed due to semantic errors.
// 429 - Too Many Requests - The user has sent too many requests
in a given amount of time
// (A server will send back 429 even though the request is correct,
but client has SPAMMED the request at a perticualr given time )
// -------- 5XX: Server Error Responses ----------------
// 500 - Internal server error - The server has encountered a situation it does
not know how to handle. This error is generic
// 502 - Bad Gateway - This error response means that the server,
while working as a gateway to get a response needed to handle the request,
got an invalid response.
// 503 Service Unavailable - The server is not ready to handle the request.
// 2. ============================ HTTP METHODS ==========================
// 1. get - get the resource
// 2. post - create a new Resource
// 3. PUT -> create a new resource if the resource do not exist, else EDIT the
whole Resource. (FULLY)
// 4. Patch -> Edit a resource (Partially)
// 5. Delete -> delete a resource (seen it rarely)
// 6. Option -> to check server rediness to accept the next request.
2)File system with node.js
const fs = require("node:fs");
//-------- CREATE A FILE ----------
fs.appendFile("../modules/HttpModule.js","hi there nodejs"
(error)={
if(error){
console.log("error ",error);
}
}
)
// ------------- Read A File
fs.appendFile("../modules/HttpModule.js",(err,data)=>{
if(err){
console.log("error is ",err);
} else {
console.log("Hires is my data")
console.log(data);
console.log(data.tostring());
}
})
//------ update a file ------
fs.appendFile("../modules","\nsecond line", (error)=>{
if(error){
console.log("error", error);
}
});
//--------Delete A file---
fs.unlink("../modules/HttpModules.js", error => {
if(error){
console.log("error", error);
}else{
console.log("file is deleted");
}
})
//----- Rename a file --------
fs.rename("../Modules/HttpModule.js",(err)=>{
if(error){
console.log("error", error);
}else{
console.log("file is renamed");
}
})
//---------aync ---------
console.log("e");
fs.appendFile("../modules/HttpModule.js","hi there js world");
(error)=>{
if(error){
console.log("error", error);
}else{
console.log("file is created succesfull")
}
}
console.log("b")
//------- SYNC ----------
// in node js as very careful and mindful if you are using any method ends with sync.
console.log("a");
fs.appendFile("../modules/HttpModule.js","hi there js world");
console.log("b");
const string = ""
fs.appendFileSync("")
console.log("")
// read file
const filecontentstring = fs.readFileSync("../modules/httpModules.js")
const filecontentbuffer = fs.readFileSync("../modules/httpModules.js")
console.log(filecontentstring)
console.log(filecontentbuffer)
3)Coming soon
0 Comments
if you have any doubts. please let me know