DEV Community: Ishaan Orkar

useState tutorials

Ishaan Orkar — Sun, 19 Apr 2026 23:01:50 +0000

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './MyOrders.css'

function MyOrders({ user }) {
  const navigate = useNavigate()
  const [orders, setOrders] = useState([])

  useEffect(() => {
    if (!user) { navigate('/login'); return }
    const load = async () => {
      const res  = await fetch(`/api/orders/${user.customerID}`)
      const data = await res.json()
      setOrders(data)
    }
    load()
  }, [user])

  if (!user) return <div className="page"><p>Please log in.</p></div>

  return (
    <div className="page">
      <h1>My Orders</h1>
      {orders.length === 0 && <p>No orders yet.</p>}
      {orders.map(order => (
        <div key={order.orderID} className="order-card">
          <p className="order-product">{order.product_name}</p>
          <p>Quantity: {order.product_quantity}</p>
          <p>Date: {new Date(order.order_date).toLocaleDateString()}</p>
        </div>
      ))}
    </div>
  )
}

export default MyOrders

.page { padding: 30px; }
.page h1 { margin-bottom: 20px; }

.order-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  max-width: 500px;
}

.order-product {
  font-weight: 700;
  margin-bottom: 8px;
  color: #144A5C;
}

import './Loyalty.css'

function Loyalty() {
  return (
    <div className="page">
      <h1>Loyalty Scheme</h1>
      <p className="subtitle">Complete 8 purchases and get free delivery!</p>

      <div className="loyalty-section">
        <h2>Your Rewards</h2>
        <div className="reward-card">
          <p>10% off all dairy products</p>
          <button>Activate</button>
        </div>
        <div className="reward-card">
          <p>15% off your next order</p>
          <button>Activate</button>
        </div>
      </div>

      <div className="loyalty-section">
        <h2>Stamp Card</h2>
        <div className="stamps">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="stamp">
              {i === 7 ? 'FREE' : i + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Loyalty

How to align images

Ishaan Orkar — Sun, 19 Apr 2026 23:00:54 +0000

import { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import './Checkout.css'

function Checkout({ user }) {
  const location = useLocation()
  const navigate  = useNavigate()
  const basket    = location.state?.basket || []
  const [success, setSuccess] = useState(false)
  const [error,   setError]   = useState('')

  const total = basket.reduce((sum, item) => {
    return sum + item.product_price * item.quantity
  }, 0)

  const placeOrder = async () => {
    if (!user) { navigate('/login'); return }

    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        customerID: user.customerID,
        items: basket.map(item => ({
          productID: item.productID,
          quantity:  item.quantity
        }))
      })
    })

    const data = await res.json()
    if (!res.ok) { setError(data.error); return }
    setSuccess(true)
  }

  if (success) {
    return (
      <div className="page">
        <h1>Order Placed!</h1>
        <p>Thank you for your order.</p>
        <button className="order-btn" onClick={() => navigate('/orders')}>
          View My Orders
        </button>
      </div>
    )
  }

  return (
    <div className="page">
      <h1>Checkout</h1>
      {basket.length === 0 ? <p>Your basket is empty.</p> : (
        <>
          {basket.map((item, index) => (
            <div key={index} className="checkout-item">
              <p className="item-name">{item.product_name}</p>
              <p>Quantity: {item.quantity}</p>
              <p>£{(item.product_price * item.quantity).toFixed(2)}</p>
            </div>
          ))}
          <div className="checkout-total">
            <h2>Total: £{total.toFixed(2)}</h2>
          </div>
          {error && <p className="error">{error}</p>}
          <button className="order-btn" onClick={placeOrder}>Place Order</button>
        </>
      )}
    </div>
  )
}

export default Checkout

.page { padding: 30px; }
.page h1 { margin-bottom: 20px; }

.checkout-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  max-width: 500px;
}

.item-name { font-weight: 700; margin-bottom: 5px; color: #144A5C; }

.checkout-total { margin: 20px 0; }
.checkout-total h2 { color: #A2C24A; }

.error {
  color: white;
  background: red;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.order-btn {
  background: #A2C24A;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Gluten', cursive;
}

mongoDB Login explination

Ishaan Orkar — Sun, 19 Apr 2026 22:46:12 +0000

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Login.css'

function Login({ setUser }) {
  const navigate = useNavigate()
  const [mode, setMode] = useState('login')
  const [role, setRole] = useState('customer')
  const [form, setForm] = useState({
    first_name: '', last_name: '', email: '', password: '', address: ''
  })
  const [error, setError] = useState('')

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value })
  }

  const handleSubmit = async () => {
    setError('')

    if (!form.email)    { setError('Please enter your email'); return }
    if (!form.password) { setError('Please enter your password'); return }

    if (mode === 'register') {
      if (!form.first_name) { setError('Please enter your first name'); return }
      if (!form.last_name)  { setError('Please enter your last name'); return }
      if (form.password.length < 6) { setError('Password must be at least 6 characters'); return }

      const res = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      })
      if (!res.ok) { setError('Registration failed'); return }
    }

    const url = role === 'producer' ? '/api/producer/login' : '/api/login'
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: form.email, password: form.password })
    })
    const data = await res.json()
    if (!res.ok) { setError(data.error); return }

    localStorage.setItem('user', JSON.stringify(data))
    setUser(data)
    navigate(data.role === 'producer' ? '/producer' : '/')
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <h1>{mode === 'login' ? 'Log In' : 'Create Account'}</h1>

        <div className="role-buttons">
          <button onClick={() => setRole('customer')} className={role === 'customer' ? 'active' : ''}>Customer</button>
          <button onClick={() => setRole('producer')} className={role === 'producer' ? 'active' : ''}>Producer</button>
        </div>

        {mode === 'register' && (
          <>
            <input name="first_name" placeholder="First name" onChange={handleChange} />
            <input name="last_name"  placeholder="Last name"  onChange={handleChange} />
            <input name="address"    placeholder="Address"    onChange={handleChange} />
          </>
        )}

        <input name="email"    placeholder="Email"    onChange={handleChange} />
        <input name="password" placeholder="Password" type="password" onChange={handleChange} />

        {error && <p className="error">{error}</p>}

        <button className="submit-btn" onClick={handleSubmit}>
          {mode === 'login' ? 'Log In' : 'Sign Up'}
        </button>

        <p className="toggle-link" onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
          {mode === 'login' ? 'No account? Create one' : 'Already have an account? Log in'}
        </p>
      </div>
    </div>
  )
}

export default Login

.login-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: white;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  border: 1px solid #ccc;
}

.login-card h1 { margin-bottom: 20px; }

.login-card input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: 'Gluten', cursive;
  font-size: 14px;
}

.role-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.role-buttons button {
  flex: 1;
  padding: 10px;
  background: #ccc;
  color: #144A5C;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Gluten', cursive;
}

.role-buttons button.active {
  background: #144A5C;
  color: white;
}

.error {
  color: white;
  background: red;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-align: center;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #A2C24A;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Gluten', cursive;
  font-size: 16px;
  margin-bottom: 15px;
}

.toggle-link {
  text-align: center;
  color: #A2C24A;
  cursor: pointer;
  font-size: 14px;
}

mongoDB ;1

Ishaan Orkar — Sun, 19 Apr 2026 22:45:08 +0000

import './Loyalty.css'

function Loyalty() {
  return (
    <div className="page">
      <h1>Loyalty Scheme</h1>
      <p className="subtitle">Complete 8 purchases and get free delivery!</p>

      <div className="loyalty-section">
        <h2>Your Rewards</h2>
        <div className="reward-card">
          <p>10% off all dairy products</p>
          <button>Activate</button>
        </div>
        <div className="reward-card">
          <p>15% off your next order</p>
          <button>Activate</button>
        </div>
      </div>

      <div className="loyalty-section">
        <h2>Stamp Card</h2>
        <div className="stamps">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="stamp">
              {i === 7 ? 'FREE' : i + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Loyalty

How to build admin routing system.

Ishaan Orkar — Sun, 19 Apr 2026 22:13:59 +0000

import { useState } from 'react'
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Marketplace from './pages/Marketplace'
import Checkout from './pages/Checkout'
import MyOrders from './pages/MyOrders'
import ProducerDashboard from './pages/ProducerDashboard'
import Loyalty from './pages/Loyalty'
import AboutUs from './pages/AboutUs'
import ProducerInfo from './pages/ProducerInfo'
import './index.css'

function Navbar({ user, setUser }) {
  const navigate = useNavigate()

  const handleLogout = () => {
    localStorage.removeItem('user')
    setUser(null)
    navigate('/')
  }

  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/marketplace">Marketplace</Link>
      <Link to="/about">About Us</Link>
      <Link to="/producers">Our Producers</Link>

      {user && user.role === 'customer' && <Link to="/orders">My Orders</Link>}
      {user && user.role === 'customer' && <Link to="/loyalty">Loyalty</Link>}
      {user && user.role === 'producer' && <Link to="/producer">Dashboard</Link>}

      {!user && <Link to="/login">Login</Link>}

      {user && (
        <span style={{ marginLeft:'auto', color:'white' }}>
          Hi {user.name}
        </span>
      )}
      {user && (
        <button
          onClick={handleLogout}
          style={{ background:'#A2C24A', color:'white', border:'none', padding:'8px 16px', borderRadius:'6px', cursor:'pointer', fontFamily:'Gluten, cursive' }}
        >
          Logout
        </button>
      )}
    </nav>
  )
}

function App() {
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user')
    return saved ? JSON.parse(saved) : null
  })

  return (
    <BrowserRouter>
      <Navbar user={user} setUser={setUser} />
      <Routes>
        <Route path="/"            element={<Home />} />
        <Route path="/login"       element={<Login setUser={setUser} />} />
        <Route path="/marketplace" element={<Marketplace user={user} />} />
        <Route path="/checkout"    element={<Checkout user={user} />} />
        <Route path="/orders"      element={<MyOrders user={user} />} />
        <Route path="/producer"    element={<ProducerDashboard user={user} />} />
        <Route path="/loyalty"     element={<Loyalty />} />
        <Route path="/about"       element={<AboutUs />} />
        <Route path="/producers"   element={<ProducerInfo />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Gluten', cursive;
  background: #FAFAF5;
  color: #144A5C;
}

nav {
  background: #144A5C;
  padding: 15px 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}

nav a {
  color: white;
  text-decoration: none;
}

.page {
  padding: 30px;
}