+
+
+
+
+
+
+ {category.name}
+{category.description}
+ + ) +} diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx new file mode 100644 index 0000000..6037da6 --- /dev/null +++ b/frontend/src/components/Footer.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import '../styles/global.css' + +export default function Footer() { + return ( + + ) +} diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx new file mode 100644 index 0000000..8fe840d --- /dev/null +++ b/frontend/src/components/Navbar.jsx @@ -0,0 +1,72 @@ +import React, { useContext } from 'react' +import { Link, useNavigate } from 'react-router-dom' +import { AuthContext } from '../context/AuthContext' +import { CartContext } from '../context/CartContext' +import SearchBar from './SearchBar' +import '../styles/global.css' + +export default function Navbar() { + const { user, token, logout } = useContext(AuthContext) + const { cart } = useContext(CartContext) + const navigate = useNavigate() + + const handleLogout = () => { + logout() + navigate('/') + } + + return ( + + ) +} diff --git a/frontend/src/components/ProductCard.jsx b/frontend/src/components/ProductCard.jsx new file mode 100644 index 0000000..533b3bb --- /dev/null +++ b/frontend/src/components/ProductCard.jsx @@ -0,0 +1,51 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import '../styles/global.css' + +export default function ProductCard({ product }) { + const price = product.discount_price || product.price + const discount = + product.discount_price && product.is_on_sale + ? Math.round( + ((product.price - product.discount_price) / product.price) * 100 + ) + : 0 + + return ( +
+
+ )
+}
diff --git a/frontend/src/components/ProductFilters.jsx b/frontend/src/components/ProductFilters.jsx
new file mode 100644
index 0000000..71139a3
--- /dev/null
+++ b/frontend/src/components/ProductFilters.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import '../styles/global.css'
+
+export default function ProductFilters({ onFilter }) {
+ const [filters, setFilters] = useState({
+ gender: '',
+ priceRange: 'all',
+ onSale: false,
+ })
+
+ const handleFilterChange = (key, value) => {
+ const newFilters = { ...filters, [key]: value }
+ setFilters(newFilters)
+ onFilter(newFilters)
+ }
+
+ return (
+
+ 
+ {product.is_on_sale && discount > 0 && (
+
+ {discount}% OFF
+ )}
+ {product.is_featured && (
+ FEATURED
+ )}
+
+
+ {product.name}
+{product.brand}
+
+ {product.discount_price ? (
+ <>
+ ${product.price.toFixed(2)}
+ ${product.discount_price.toFixed(2)}
+
+ ) : (
+ ${price.toFixed(2)}
+ )}
+
+ + {product.stock > 0 ? ( + In Stock + ) : ( + Out of Stock + )} +
+ + View Details + +
+
+ )
+}
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
new file mode 100644
index 0000000..8c87531
--- /dev/null
+++ b/frontend/src/components/SearchBar.jsx
@@ -0,0 +1,50 @@
+import React, { useState, useContext } from 'react'
+import { AuthContext } from '../context/AuthContext'
+import api from '../api'
+import '../styles/global.css'
+
+export default function SearchBar() {
+ const [query, setQuery] = useState('')
+ const [results, setResults] = useState([])
+ const [showResults, setShowResults] = useState(false)
+
+ const handleSearch = async (e) => {
+ const value = e.target.value
+ setQuery(value)
+
+ if (value.length > 2) {
+ try {
+ const response = await api.get('/products/search', {
+ params: { q: value },
+ })
+ setResults(response.data)
+ setShowResults(true)
+ } catch (error) {
+ console.error('Search error:', error)
+ }
+ } else {
+ setShowResults(false)
+ }
+ }
+
+ return (
+ Filters
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showResults && results.length > 0 && (
+
+ )
+}
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
new file mode 100644
index 0000000..49f4ba6
--- /dev/null
+++ b/frontend/src/context/AuthContext.jsx
@@ -0,0 +1,29 @@
+import React, { createContext, useState, useEffect } from 'react'
+
+export const AuthContext = createContext()
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null)
+ const [token, setToken] = useState(localStorage.getItem('token'))
+ const [loading, setLoading] = useState(false)
+
+ useEffect(() => {
+ if (token) {
+ localStorage.setItem('token', token)
+ } else {
+ localStorage.removeItem('token')
+ }
+ }, [token])
+
+ const logout = () => {
+ setUser(null)
+ setToken(null)
+ localStorage.removeItem('token')
+ }
+
+ return (
+
+ {results.map((product) => (
+
+ {product.name}
+ ${product.price.toFixed(2)}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
new file mode 100644
index 0000000..c5a6b32
--- /dev/null
+++ b/frontend/src/pages/Cart.jsx
@@ -0,0 +1,119 @@
+import React, { useContext } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { CartContext } from '../context/CartContext'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Cart() {
+ const { cart, removeFromCart, updateQuantity, total, clearCart } = useContext(CartContext)
+ const { token } = useContext(AuthContext)
+ const navigate = useNavigate()
+
+ const handleCheckout = () => {
+ if (!token) {
+ navigate('/login')
+ } else if (cart.length === 0) {
+ alert('Your cart is empty')
+ } else {
+ navigate('/checkout')
+ }
+ }
+
+ return (
+ About StyleHub
+ +Our Story
++ Founded in 2020, StyleHub started as a passion project to bring + quality fashion and footwear to customers worldwide. What began as + a small collection has grown into a comprehensive online store + featuring over 1000 products from leading brands. +
+Our Mission
++ We believe everyone deserves access to stylish, high-quality + products at reasonable prices. Our mission is to make fashion + accessible, affordable, and enjoyable for everyone. +
+Our Values
+-
+
- + Quality: We only stock products from trusted + brands and manufacturers + +
- + Customer First: Your satisfaction is our top + priority + +
- + Sustainability: We're committed to eco-friendly + practices + +
- + Innovation: We constantly improve our platform + for the best experience + +
Why Shop with Us?
+
+
+
+
+ π Fast Shipping
+Orders shipped within 24 hours to most locations
+
+
+ π― Money Back
+30-day satisfaction guarantee on all purchases
+
+
+ π Secure Payment
+Your payment information is always protected
+
+
+ π¬ 24/7 Support
+Our team is ready to help anytime
+
+
+ π Best Prices
+We offer competitive prices and frequent discounts
+
+
+ π± Mobile App
+Shop on the go with our mobile apps
+Our Team
++ We have a passionate team of fashion experts, developers, and + customer service professionals working to bring you the best + shopping experience. +
+
+
+ )
+}
diff --git a/frontend/src/pages/Checkout.jsx b/frontend/src/pages/Checkout.jsx
new file mode 100644
index 0000000..7817323
--- /dev/null
+++ b/frontend/src/pages/Checkout.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { CartContext } from '../context/CartContext'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Checkout() {
+ const navigate = useNavigate()
+ const { cart, total, clearCart } = useContext(CartContext)
+ const { token, user } = useContext(AuthContext)
+ const [loading, setLoading] = useState(false)
+ const [formData, setFormData] = useState({
+ shipping_address: user?.address || '',
+ shipping_city: user?.city || '',
+ shipping_postal_code: user?.postal_code || '',
+ shipping_country: user?.country || '',
+ })
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ if (!token) {
+ navigate('/login')
+ return
+ }
+
+ try {
+ setLoading(true)
+ const response = await api.post('/orders', formData, {
+ params: { token },
+ })
+
+ alert('Order placed successfully!')
+ clearCart()
+ navigate(`/orders/${response.data.id}`)
+ } catch (error) {
+ console.error('Error placing order:', error)
+ alert('Error placing order')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+ Shopping Cart
+ + {cart.length === 0 ? ( +
+
+ ) : (
+ Your cart is empty
+ + Continue Shopping + +
+
+ )}
+
+
+
+
+
+
+ | Product | +Price | +Quantity | +Total | +Action | +
|---|---|---|---|---|
|
+
+
+
+
+ {item.product.name} + {item.size &&Size: {item.size} } + {item.color &&Color: {item.color} } + |
+ ${(item.product.discount_price || item.product.price).toFixed(2)} | +
+
+
+ {item.quantity}
+
+
+ |
+ + ${((item.product.discount_price || item.product.price) * item.quantity).toFixed(2)} + | ++ + | +
+
+ Order Summary
+
+
+
+
+
+
+
+ Subtotal:
+ ${total.toFixed(2)}
+
+
+ Shipping:
+ $10.00
+
+
+ Tax:
+ ${(total * 0.1).toFixed(2)}
+
+
+ Total:
+ ${(total + 10 + total * 0.1).toFixed(2)}
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
new file mode 100644
index 0000000..e31d6be
--- /dev/null
+++ b/frontend/src/pages/Contact.jsx
@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+import api from '../api'
+import '../styles/global.css'
+
+export default function Contact() {
+ const [formData, setFormData] = useState({
+ name: '',
+ email: '',
+ subject: '',
+ message: '',
+ })
+ const [loading, setLoading] = useState(false)
+ const [submitted, setSubmitted] = useState(false)
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setLoading(true)
+
+ try {
+ await api.post('/contact', formData)
+ setSubmitted(true)
+ setFormData({
+ name: '',
+ email: '',
+ subject: '',
+ message: '',
+ })
+
+ setTimeout(() => {
+ setSubmitted(false)
+ }, 3000)
+ } catch (error) {
+ console.error('Error sending message:', error)
+ alert('Error sending message')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+ Checkout
+ +
+
+
+
+
+
+ Order Summary
+
+ {cart.map((item, index) => (
+
+
+ {item.product.name} x{item.quantity}
+ ${((item.product.discount_price || item.product.price) * item.quantity).toFixed(2)}
+
+ ))}
+
+ Total: ${(total + 10 + total * 0.1).toFixed(2)}
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..88bde23
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import api from '../api'
+import ProductCard from '../components/ProductCard'
+import CategoryCard from '../components/CategoryCard'
+import '../styles/global.css'
+
+export default function Home() {
+ const [featured, setFeatured] = useState([])
+ const [newArrivals, setNewArrivals] = useState([])
+ const [onSale, setOnSale] = useState([])
+ const [categories, setCategories] = useState([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchData()
+ }, [])
+
+ const fetchData = async () => {
+ try {
+ const [featuredRes, newRes, saleRes, catRes] = await Promise.all([
+ api.get('/products?featured=true&limit=8'),
+ api.get('/products?limit=8'),
+ api.get('/products?on_sale=true&limit=8'),
+ api.get('/categories'),
+ ])
+
+ setFeatured(featuredRes.data)
+ setNewArrivals(newRes.data)
+ setOnSale(saleRes.data)
+ setCategories(catRes.data)
+ } catch (error) {
+ console.error('Error fetching data:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ if (loading) return Contact Us
+ + +Loading...
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+ {/* Category Highlights */}
+
+
+
+ {/* Featured Products */}
+
+
+
+ {/* New Arrivals */}
+
+
+
+ {/* On Sale */}
+
+
+
+ {/* Best Sellers */}
+
+
+
+ {/* Promo Banner */}
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..46800e0
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Login() {
+ const navigate = useNavigate()
+ const { setUser, setToken } = useContext(AuthContext)
+ const [formData, setFormData] = useState({
+ email: '',
+ password: '',
+ })
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setError('')
+ setLoading(true)
+
+ try {
+ const response = await api.post('/auth/login', null, {
+ params: {
+ email: formData.email,
+ password: formData.password,
+ },
+ })
+
+ setToken(response.data.access_token)
+ setUser(response.data.user)
+ navigate('/')
+ } catch (error) {
+ setError('Invalid email or password')
+ console.error('Login error:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+ Welcome to StyleHub
+Discover the latest in fashion and footwear
+ + Shop Now + +Shop by Category
+
+ {categories.map((cat) => (
+
+ Featured Products
+
+ {featured.map((product) => (
+
+ New Arrivals
+
+ {newArrivals.slice(0, 4).map((product) => (
+
+ π₯ Limited Time Offers
+Up to 50% off on selected items
+ + View All Sales + +Best Sellers
+
+ {onSale.slice(0, 4).map((product) => (
+
+ Subscribe to Our Newsletter
+Get exclusive deals and updates
+ + +
+
+ )
+}
diff --git a/frontend/src/pages/Orders.jsx b/frontend/src/pages/Orders.jsx
new file mode 100644
index 0000000..312827d
--- /dev/null
+++ b/frontend/src/pages/Orders.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Orders() {
+ const navigate = useNavigate()
+ const { token } = useContext(AuthContext)
+ const [orders, setOrders] = useState([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ if (!token) {
+ navigate('/login')
+ } else {
+ fetchOrders()
+ }
+ }, [token, navigate])
+
+ const fetchOrders = async () => {
+ try {
+ const response = await api.get('/orders/user/orders', {
+ params: { token },
+ })
+ setOrders(response.data)
+ } catch (error) {
+ console.error('Error fetching orders:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ if (loading) return
+
+ Login
+ + {error &&{error}
}
+
+
+
+ + Don't have an account? Sign up here +
+ +
+
+ Demo Account:
+Email: user@example.com
+Password: password123
+Loading...
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
new file mode 100644
index 0000000..2e38e7c
--- /dev/null
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import api from '../api'
+import { CartContext } from '../context/CartContext'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function ProductDetail() {
+ const { id } = useParams()
+ const navigate = useNavigate()
+ const [product, setProduct] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [selectedSize, setSelectedSize] = useState('')
+ const [selectedColor, setSelectedColor] = useState('')
+ const [quantity, setQuantity] = useState(1)
+ const [inWishlist, setInWishlist] = useState(false)
+ const { addToCart } = useContext(CartContext)
+ const { token } = useContext(AuthContext)
+
+ useEffect(() => {
+ fetchProduct()
+ }, [id])
+
+ const fetchProduct = async () => {
+ try {
+ const response = await api.get(`/products/${id}`)
+ setProduct(response.data)
+ if (response.data.colors.length > 0) setSelectedColor(response.data.colors[0])
+ if (response.data.sizes.length > 0) setSelectedSize(response.data.sizes[0])
+ } catch (error) {
+ console.error('Error fetching product:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleAddToCart = async () => {
+ try {
+ if (!token) {
+ navigate('/login')
+ return
+ }
+
+ await api.post('/cart/add', {
+ product_id: product.id,
+ quantity,
+ size: selectedSize,
+ color: selectedColor,
+ token,
+ })
+
+ addToCart(product, quantity, selectedSize, selectedColor)
+ alert('Product added to cart!')
+ } catch (error) {
+ console.error('Error adding to cart:', error)
+ }
+ }
+
+ const handleToggleWishlist = async () => {
+ if (!token) {
+ navigate('/login')
+ return
+ }
+
+ try {
+ if (inWishlist) {
+ await api.delete(`/wishlist/${product.id}`, { params: { token } })
+ } else {
+ await api.post(`/wishlist/${product.id}`, null, { params: { token } })
+ }
+ setInWishlist(!inWishlist)
+ } catch (error) {
+ console.error('Error updating wishlist:', error)
+ }
+ }
+
+ if (loading) return My Orders
+ + {orders.length === 0 ? ( +
+
+ ) : (
+ You haven't placed any orders yet.
+ + Start Shopping + +
+ {orders.map((order) => (
+
+ )}
+
+
+ ))}
+
+
+
+ Order #{order.order_number}
+ {order.status.toUpperCase()} +
+
+
+
+ Order Date:
+ {new Date(order.created_at).toLocaleDateString()}
+
+
+ Total Amount:
+ ${order.total_amount.toFixed(2)}
+
+
+ Items:
+ {order.items.length} item(s)
+
+
+ {order.items.map((item) => (
+
+
+
+ 
+
+ ))}
+
+
+ {item.product.name}
+Qty: {item.quantity}
+${item.price.toFixed(2)}
+
+
+ Shipping Address
+{order.shipping_address}
++ {order.shipping_city}, {order.shipping_postal_code} +
+{order.shipping_country}
+Loading...
+ if (!product) return Product not found
+
+ const price = product.discount_price || product.price
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/pages/Products.jsx b/frontend/src/pages/Products.jsx
new file mode 100644
index 0000000..616f478
--- /dev/null
+++ b/frontend/src/pages/Products.jsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import api from '../api'
+import ProductCard from '../components/ProductCard'
+import ProductFilters from '../components/ProductFilters'
+import '../styles/global.css'
+
+export default function Products() {
+ const [searchParams] = useSearchParams()
+ const [products, setProducts] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [sortBy, setSortBy] = useState('latest')
+
+ useEffect(() => {
+ fetchProducts()
+ }, [searchParams])
+
+ const fetchProducts = async () => {
+ try {
+ setLoading(true)
+ const categorySlug = searchParams.get('category')
+ const params = { limit: 50 }
+
+ if (categorySlug) {
+ // Get category by slug
+ const catRes = await api.get('/categories')
+ const category = catRes.data.find((c) => c.slug === categorySlug)
+ if (category) params.category_id = category.id
+ }
+
+ const response = await api.get('/products', { params })
+ let sorted = [...response.data]
+
+ if (sortBy === 'price-low') {
+ sorted.sort((a, b) => (a.discount_price || a.price) - (b.discount_price || b.price))
+ } else if (sortBy === 'price-high') {
+ sorted.sort((a, b) => (b.discount_price || b.price) - (a.discount_price || a.price))
+ } else if (sortBy === 'name') {
+ sorted.sort((a, b) => a.name.localeCompare(b.name))
+ }
+
+ setProducts(sorted)
+ } catch (error) {
+ console.error('Error fetching products:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleFilter = (filters) => {
+ // Apply filters locally for now
+ console.log('Filters:', filters)
+ }
+
+ return (
+
+
+
+
+ {product.images.slice(1).map((img, idx) => (
+ 
+ ))}
+
+
+
+
+ {product.name}
+{product.brand}
+ +
+ βββββ (42 reviews)
+
+
+
+ {product.discount_price ? (
+ <>
+ ${product.price.toFixed(2)}
+ ${product.discount_price.toFixed(2)}
+
+ ) : (
+ ${price.toFixed(2)}
+ )}
+
+
+ {product.description}
+ + {product.colors.length > 0 && ( +
+
+
+ )}
+
+ {product.sizes.length > 0 && (
+
+ {product.colors.map((color) => (
+
+ ))}
+
+
+
+
+ )}
+
+
+ {product.sizes.map((size) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {product.stock > 0 ? (
+ β In Stock ({product.stock} available)
+ ) : (
+ β Out of Stock
+ )}
+
+
+
+
+
+
+
+
+
+ Product Details
+-
+
- Category: Shoes +
- Gender: {product.gender} +
- Brand: {product.brand} +
- SKU: {product.id} +
+
+ )
+}
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
new file mode 100644
index 0000000..778b642
--- /dev/null
+++ b/frontend/src/pages/Profile.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Profile() {
+ const navigate = useNavigate()
+ const { token, user, setUser } = useContext(AuthContext)
+ const [formData, setFormData] = useState({
+ full_name: '',
+ phone: '',
+ address: '',
+ city: '',
+ postal_code: '',
+ country: '',
+ })
+ const [loading, setLoading] = useState(true)
+ const [saving, setSaving] = useState(false)
+
+ useEffect(() => {
+ if (!token) {
+ navigate('/login')
+ } else {
+ fetchProfile()
+ }
+ }, [token, navigate])
+
+ const fetchProfile = async () => {
+ try {
+ const response = await api.get('/users/me', {
+ params: { token },
+ })
+ setFormData(response.data)
+ setUser(response.data)
+ } catch (error) {
+ console.error('Error fetching profile:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setSaving(true)
+
+ try {
+ const response = await api.put('/users/me', formData, {
+ params: { token },
+ })
+ setUser(response.data)
+ alert('Profile updated successfully!')
+ } catch (error) {
+ console.error('Error updating profile:', error)
+ alert('Error updating profile')
+ } finally {
+ setSaving(false)
+ }
+ }
+
+ if (loading) return Our Products
+ +
+
+
+
+
+
+
+ {products.length} products
+
+
+ {loading ? (
+ Loading products...
+ ) : products.length > 0 ? (
+
+ {products.map((product) => (
+
+ ) : (
+
+
+ )}
+ No products found.
+Loading...
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
new file mode 100644
index 0000000..b967ce7
--- /dev/null
+++ b/frontend/src/pages/Register.jsx
@@ -0,0 +1,110 @@
+import React, { useState, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { AuthContext } from '../context/AuthContext'
+import '../styles/global.css'
+
+export default function Register() {
+ const navigate = useNavigate()
+ const { setUser, setToken } = useContext(AuthContext)
+ const [formData, setFormData] = useState({
+ email: '',
+ password: '',
+ full_name: '',
+ })
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setError('')
+ setLoading(true)
+
+ try {
+ const response = await api.post('/auth/register', {
+ email: formData.email,
+ password: formData.password,
+ full_name: formData.full_name,
+ })
+
+ alert('Account created successfully! Logging you in...')
+
+ const loginResponse = await api.post('/auth/login', null, {
+ params: {
+ email: formData.email,
+ password: formData.password,
+ },
+ })
+
+ setToken(loginResponse.data.access_token)
+ setUser(loginResponse.data.user)
+ navigate('/')
+ } catch (error) {
+ setError(error.response?.data?.detail || 'Registration failed')
+ console.error('Registration error:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+ My Profile
+ +
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Sales.jsx b/frontend/src/pages/Sales.jsx
new file mode 100644
index 0000000..1d1095d
--- /dev/null
+++ b/frontend/src/pages/Sales.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api'
+import ProductCard from '../components/ProductCard'
+import '../styles/global.css'
+
+export default function Sales() {
+ const [products, setProducts] = useState([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchSaleProducts()
+ }, [])
+
+ const fetchSaleProducts = async () => {
+ try {
+ const response = await api.get('/products', {
+ params: {
+ on_sale: true,
+ limit: 50,
+ },
+ })
+ setProducts(response.data)
+ } catch (error) {
+ console.error('Error fetching sale products:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/pages/Wishlist.jsx b/frontend/src/pages/Wishlist.jsx
new file mode 100644
index 0000000..5122744
--- /dev/null
+++ b/frontend/src/pages/Wishlist.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api'
+import { AuthContext } from '../context/AuthContext'
+import ProductCard from '../components/ProductCard'
+import '../styles/global.css'
+
+export default function Wishlist() {
+ const navigate = useNavigate()
+ const { token } = useContext(AuthContext)
+ const [wishlistItems, setWishlistItems] = useState([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ if (!token) {
+ navigate('/login')
+ } else {
+ fetchWishlist()
+ }
+ }, [token, navigate])
+
+ const fetchWishlist = async () => {
+ try {
+ const response = await api.get('/wishlist', {
+ params: { token },
+ })
+ setWishlistItems(response.data)
+ } catch (error) {
+ console.error('Error fetching wishlist:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleRemoveFromWishlist = async (productId) => {
+ try {
+ await api.delete(`/wishlist/${productId}`, {
+ params: { token },
+ })
+ setWishlistItems(
+ wishlistItems.filter((item) => item.id !== productId)
+ )
+ } catch (error) {
+ console.error('Error removing from wishlist:', error)
+ }
+ }
+
+ if (loading) return
+
+
+ {loading ? (
+ π₯ Limited Time Offers
+Huge discounts on selected items - Limited time only!
+Loading...
+ ) : products.length > 0 ? (
+
+
+ ) : (
+
+ {products.map((product) => (
+
+
+
+ ))}
+
+
+ )}
+ No products on sale at the moment.
+Loading...
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
new file mode 100644
index 0000000..ddbeea9
--- /dev/null
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,1477 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --primary: #ff6b6b;
+ --primary-dark: #ff5252;
+ --secondary: #1a1a1a;
+ --light: #f5f5f5;
+ --gray: #888888;
+ --gray-light: #e0e0e0;
+ --border-radius: 8px;
+ --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+ color: var(--secondary);
+ line-height: 1.6;
+ background-color: #fff;
+}
+
+html, body, #root {
+ height: 100%;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button {
+ cursor: pointer;
+ font-family: inherit;
+ border: none;
+ border-radius: var(--border-radius);
+}
+
+/* App Layout */
+.app {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.main-content {
+ flex: 1;
+ padding: 0;
+}
+
+/* Navbar */
+.navbar {
+ background: white;
+ box-shadow: var(--shadow);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+.navbar-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+}
+
+.navbar-logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ white-space: nowrap;
+}
+
+.logo-icon {
+ font-size: 2rem;
+}
+
+.navbar-center {
+ flex: 1;
+ max-width: 400px;
+}
+
+.navbar-menu {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+ flex-wrap: wrap;
+}
+
+.navbar-menu a {
+ color: var(--secondary);
+ font-weight: 500;
+ transition: color 0.3s;
+}
+
+.navbar-menu a:hover {
+ color: var(--primary);
+}
+
+.navbar-icons {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.icon-btn {
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: transform 0.3s;
+ position: relative;
+}
+
+.icon-btn:hover {
+ transform: scale(1.1);
+}
+
+.cart-count {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background: var(--primary);
+ color: white;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ font-weight: bold;
+}
+
+/* Buttons */
+.btn {
+ padding: 0.75rem 1.5rem;
+ border-radius: var(--border-radius);
+ background: var(--primary);
+ color: white;
+ font-weight: 600;
+ transition: background 0.3s;
+ display: inline-block;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.btn:hover:not(:disabled) {
+ background: var(--primary-dark);
+}
+
+.btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.btn-small {
+ padding: 0.5rem 1rem;
+ font-size: 0.875rem;
+}
+
+.btn-large {
+ padding: 1rem 2rem;
+ font-size: 1rem;
+}
+
+.btn-full {
+ width: 100%;
+}
+
+.btn-secondary {
+ background: transparent;
+ color: var(--primary);
+ border: 2px solid var(--primary);
+}
+
+.btn-secondary:hover {
+ background: var(--light);
+}
+
+.btn-outline {
+ background: transparent;
+ color: var(--secondary);
+ border: 2px solid var(--gray-light);
+}
+
+.btn-outline:hover {
+ border-color: var(--secondary);
+}
+
+.btn-danger {
+ background: #e74c3c;
+}
+
+.btn-danger:hover {
+ background: #c0392b;
+}
+
+.btn-icon {
+ padding: 0.5rem;
+ background: transparent;
+ font-size: 1.5rem;
+ border-radius: 50%;
+ transition: background 0.3s;
+}
+
+.btn-icon:hover {
+ background: var(--light);
+}
+
+.btn-icon.active {
+ background: var(--primary) + '20';
+}
+
+/* Grid */
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+/* Sections */
+.section {
+ max-width: 1200px;
+ margin: 4rem auto;
+ padding: 0 2rem;
+}
+
+.section h2 {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+ color: var(--secondary);
+}
+
+/* Hero Section */
+.hero {
+ background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
+ color: white;
+ padding: 6rem 2rem;
+ text-align: center;
+}
+
+.hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.hero-content p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+}
+
+/* Product Card */
+.product-card {
+ background: white;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.product-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.product-image-container {
+ position: relative;
+ overflow: hidden;
+ aspect-ratio: 1;
+ background: var(--light);
+}
+
+.product-image-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s;
+}
+
+.product-card:hover .product-image-container img {
+ transform: scale(1.05);
+}
+
+.discount-badge, .featured-badge {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: var(--primary);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: 0.875rem;
+}
+
+.featured-badge {
+ right: auto;
+ left: 10px;
+ background: #4CAF50;
+}
+
+.product-info {
+ padding: 1.5rem;
+}
+
+.product-info h3 {
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.brand {
+ color: var(--gray);
+ font-size: 0.875rem;
+ margin-bottom: 0.75rem;
+}
+
+.price {
+ margin-bottom: 0.75rem;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.price .original {
+ color: var(--gray);
+ text-decoration: line-through;
+ font-size: 0.9rem;
+}
+
+.price .discounted,
+.price .current {
+ font-weight: bold;
+ font-size: 1.2rem;
+ color: var(--primary);
+}
+
+.stock {
+ font-size: 0.875rem;
+ margin-bottom: 1rem;
+}
+
+.in-stock {
+ color: #4CAF50;
+ font-weight: 600;
+}
+
+.out-of-stock {
+ color: #e74c3c;
+ font-weight: 600;
+}
+
+/* Category Card */
+.category-card {
+ display: block;
+ background: white;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transition: transform 0.3s;
+ cursor: pointer;
+}
+
+.category-card:hover {
+ transform: translateY(-4px);
+}
+
+.category-card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.category-card h3 {
+ padding: 1rem;
+ font-size: 1.2rem;
+}
+
+.category-card p {
+ padding: 0 1rem 1rem;
+ color: var(--gray);
+ font-size: 0.875rem;
+}
+
+/* Search Bar */
+.search-bar {
+ position: relative;
+ width: 100%;
+}
+
+.search-bar input {
+ width: 100%;
+ padding: 0.75rem 1rem;
+ border: 1px solid var(--gray-light);
+ border-radius: var(--border-radius);
+ font-size: 0.95rem;
+}
+
+.search-results {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ border: 1px solid var(--gray-light);
+ border-top: none;
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ max-height: 300px;
+ overflow-y: auto;
+ z-index: 10;
+}
+
+.search-result-item {
+ display: block;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid var(--gray-light);
+ display: flex;
+ justify-content: space-between;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.search-result-item:hover {
+ background: var(--light);
+}
+
+/* Filters */
+.filters-sidebar {
+ background: var(--light);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ height: fit-content;
+}
+
+.filters-sidebar h3 {
+ margin-bottom: 1.5rem;
+ font-size: 1.1rem;
+}
+
+.filter-group {
+ margin-bottom: 1.5rem;
+}
+
+.filter-group label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+}
+
+.filter-group select,
+.filter-group input[type="checkbox"] {
+ width: 100%;
+ padding: 0.5rem;
+ border: 1px solid var(--gray-light);
+ border-radius: 4px;
+ font-size: 0.9rem;
+}
+
+.filter-group input[type="checkbox"] {
+ width: auto;
+ margin-right: 0.5rem;
+}
+
+/* Products Page */
+.products-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.products-page h1 {
+ margin-bottom: 2rem;
+ font-size: 2rem;
+}
+
+.products-container {
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ gap: 2rem;
+}
+
+.products-content {
+ display: flex;
+ flex-direction: column;
+}
+
+.sort-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ gap: 1rem;
+ flex-wrap: wrap;
+}
+
+.sort-bar select {
+ padding: 0.5rem 1rem;
+ border: 1px solid var(--gray-light);
+ border-radius: var(--border-radius);
+}
+
+.product-count {
+ color: var(--gray);
+ font-size: 0.9rem;
+}
+
+.no-products {
+ text-align: center;
+ padding: 3rem 1rem;
+ color: var(--gray);
+}
+
+/* Product Detail */
+.product-detail {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.detail-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+ margin-top: 2rem;
+}
+
+.detail-images {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.detail-images img {
+ width: 100%;
+ max-height: 500px;
+ object-fit: cover;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+}
+
+.detail-info h1 {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.detail-info .brand {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+.rating {
+ margin-bottom: 1.5rem;
+ font-size: 1rem;
+}
+
+.detail-info .description {
+ color: var(--gray);
+ line-height: 1.8;
+ margin-bottom: 1.5rem;
+}
+
+.option-group {
+ margin-bottom: 1.5rem;
+}
+
+.option-group label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 0.75rem;
+}
+
+.color-options,
+.size-options {
+ display: flex;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.color-btn,
+.size-btn {
+ padding: 0.75rem 1rem;
+ border: 2px solid var(--gray-light);
+ border-radius: var(--border-radius);
+ background: white;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.color-btn:hover,
+.size-btn:hover {
+ border-color: var(--primary);
+}
+
+.color-btn.active,
+.size-btn.active {
+ border-color: var(--primary);
+ background: var(--primary);
+ color: white;
+}
+
+.quantity-selector {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border: 1px solid var(--gray-light);
+ border-radius: var(--border-radius);
+ width: fit-content;
+}
+
+.quantity-selector button {
+ width: 40px;
+ height: 40px;
+ background: transparent;
+ cursor: pointer;
+ font-size: 1.2rem;
+}
+
+.quantity-selector input {
+ width: 60px;
+ border: none;
+ text-align: center;
+ font-weight: bold;
+}
+
+.stock-info {
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background: var(--light);
+ border-radius: var(--border-radius);
+}
+
+.action-buttons {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.action-buttons .btn {
+ flex: 1;
+}
+
+.action-buttons .btn-icon {
+ flex: 0;
+ width: auto;
+}
+
+.product-details {
+ padding-top: 2rem;
+ border-top: 1px solid var(--gray-light);
+}
+
+.product-details h3 {
+ margin-bottom: 1rem;
+}
+
+.product-details ul {
+ list-style: none;
+}
+
+.product-details li {
+ padding: 0.5rem 0;
+ color: var(--gray);
+}
+
+/* Cart Page */
+.cart-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.cart-page h1 {
+ margin-bottom: 2rem;
+}
+
+.empty-cart {
+ text-align: center;
+ padding: 3rem;
+ background: var(--light);
+ border-radius: var(--border-radius);
+}
+
+.empty-cart p {
+ margin-bottom: 1.5rem;
+ color: var(--gray);
+}
+
+.cart-container {
+ display: grid;
+ grid-template-columns: 1fr 350px;
+ gap: 2rem;
+}
+
+.cart-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.cart-table th {
+ background: var(--light);
+ padding: 1rem;
+ text-align: left;
+ font-weight: 600;
+ border-bottom: 2px solid var(--gray-light);
+}
+
+.cart-table td {
+ padding: 1rem;
+ border-bottom: 1px solid var(--gray-light);
+}
+
+.cart-item-product {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+.cart-item-product img {
+ width: 80px;
+ height: 80px;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.product-name {
+ font-weight: 600;
+}
+
+.quantity-control {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border: 1px solid var(--gray-light);
+ border-radius: 4px;
+ width: fit-content;
+}
+
+.quantity-control button {
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ cursor: pointer;
+}
+
+.cart-summary {
+ background: var(--light);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ height: fit-content;
+ position: sticky;
+ top: 100px;
+}
+
+.cart-summary h3 {
+ margin-bottom: 1.5rem;
+}
+
+.summary-rows {
+ margin-bottom: 1.5rem;
+}
+
+.summary-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.75rem 0;
+ border-bottom: 1px solid var(--gray-light);
+}
+
+.summary-row.total {
+ font-weight: bold;
+ font-size: 1.1rem;
+ border-top: 2px solid var(--gray-light);
+ border-bottom: none;
+ padding: 1rem 0;
+}
+
+/* Checkout Page */
+.checkout-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.checkout-page h1 {
+ margin-bottom: 2rem;
+}
+
+.checkout-container {
+ display: grid;
+ grid-template-columns: 1fr 350px;
+ gap: 2rem;
+}
+
+.checkout-form,
+.checkout-summary {
+ background: var(--light);
+ padding: 2rem;
+ border-radius: var(--border-radius);
+}
+
+.form-section {
+ margin-bottom: 2rem;
+}
+
+.form-section h2 {
+ font-size: 1.3rem;
+ margin-bottom: 1rem;
+}
+
+.form-group {
+ margin-bottom: 1rem;
+}
+
+.form-group label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid var(--gray-light);
+ border-radius: var(--border-radius);
+ font-size: 0.95rem;
+ font-family: inherit;
+}
+
+.form-row {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.checkout-summary {
+ height: fit-content;
+ position: sticky;
+ top: 100px;
+}
+
+.summary-items {
+ margin-bottom: 1.5rem;
+}
+
+.summary-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.75rem 0;
+ border-bottom: 1px solid var(--gray-light);
+ font-size: 0.9rem;
+}
+
+.summary-total {
+ padding-top: 1rem;
+ font-size: 1.1rem;
+ color: var(--primary);
+}
+
+/* Auth Pages */
+.auth-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: calc(100vh - 200px);
+ padding: 2rem;
+}
+
+.auth-container {
+ background: white;
+ padding: 3rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow-lg);
+ width: 100%;
+ max-width: 400px;
+}
+
+.auth-container h1 {
+ margin-bottom: 2rem;
+ text-align: center;
+}
+
+.auth-container form {
+ margin-bottom: 1.5rem;
+}
+
+.auth-container p {
+ text-align: center;
+ color: var(--gray);
+ margin-bottom: 1rem;
+}
+
+.auth-container a {
+ color: var(--primary);
+ font-weight: 600;
+}
+
+.error-message {
+ background: #f8d7da;
+ color: #721c24;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+.demo-account {
+ background: #e3f2fd;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ margin-top: 1.5rem;
+ font-size: 0.875rem;
+}
+
+.demo-account p {
+ margin: 0.25rem 0;
+ text-align: left;
+}
+
+/* Profile Page */
+.profile-page,
+.orders-page,
+.wishlist-page {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.profile-page h1,
+.orders-page h1,
+.wishlist-page h1 {
+ margin-bottom: 2rem;
+}
+
+.profile-container {
+ background: var(--light);
+ padding: 2rem;
+ border-radius: var(--border-radius);
+}
+
+.profile-form h2 {
+ font-size: 1.3rem;
+ margin: 1.5rem 0 1rem;
+}
+
+.profile-form h2:first-child {
+ margin-top: 0;
+}
+
+/* Orders Page */
+.orders-container {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.order-card {
+ background: white;
+ border: 1px solid var(--gray-light);
+ border-radius: var(--border-radius);
+ padding: 2rem;
+ box-shadow: var(--shadow);
+}
+
+.order-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ border-bottom: 1px solid var(--gray-light);
+ padding-bottom: 1rem;
+}
+
+.order-header h3 {
+ font-size: 1.2rem;
+}
+
+.status {
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.status.pending {
+ background: #fff3cd;
+ color: #856404;
+}
+
+.status.paid {
+ background: #d4edda;
+ color: #155724;
+}
+
+.status.shipped {
+ background: #d1ecf1;
+ color: #0c5460;
+}
+
+.status.delivered {
+ background: #d4edda;
+ color: #155724;
+}
+
+.order-details {
+ margin-bottom: 1.5rem;
+}
+
+.detail-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.5rem 0;
+ color: var(--gray);
+}
+
+.order-items {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid var(--gray-light);
+}
+
+.order-item {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ margin-bottom: 0.75rem;
+}
+
+.order-item img {
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.shipping-info {
+ background: var(--light);
+ padding: 1rem;
+ border-radius: var(--border-radius);
+}
+
+.shipping-info h4 {
+ margin-bottom: 0.5rem;
+}
+
+.shipping-info p {
+ font-size: 0.9rem;
+ color: var(--gray);
+ margin-bottom: 0.25rem;
+}
+
+/* Wishlist Page */
+.wishlist-item {
+ position: relative;
+}
+
+.wishlist-item .btn {
+ margin-top: 0.5rem;
+}
+
+/* About Page */
+.about-page {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.about-page h1 {
+ margin-bottom: 2rem;
+ font-size: 2.5rem;
+}
+
+.about-section {
+ margin-bottom: 3rem;
+}
+
+.about-section h2 {
+ font-size: 1.8rem;
+ margin-bottom: 1rem;
+ color: var(--primary);
+}
+
+.about-section p {
+ font-size: 1rem;
+ line-height: 1.8;
+ color: var(--gray);
+}
+
+.values-list {
+ list-style: none;
+ margin-top: 1rem;
+}
+
+.values-list li {
+ padding: 1rem;
+ margin-bottom: 0.75rem;
+ background: var(--light);
+ border-left: 4px solid var(--primary);
+ border-radius: 4px;
+}
+
+.why-us-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1.5rem;
+}
+
+.why-us-card {
+ background: var(--light);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ text-align: center;
+ transition: transform 0.3s;
+}
+
+.why-us-card:hover {
+ transform: translateY(-4px);
+}
+
+.why-us-card h3 {
+ font-size: 1.2rem;
+ margin-bottom: 0.75rem;
+}
+
+/* Contact Page */
+.contact-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.contact-page h1 {
+ margin-bottom: 2rem;
+}
+
+.contact-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+ margin-top: 2rem;
+}
+
+.contact-info h2 {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.info-item {
+ margin-bottom: 2rem;
+}
+
+.info-item h3 {
+ font-size: 1.1rem;
+ margin-bottom: 0.75rem;
+ color: var(--primary);
+}
+
+.info-item p {
+ color: var(--gray);
+ line-height: 1.8;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.social-links a {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ background: var(--primary);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.3s;
+}
+
+.social-links a:hover {
+ background: var(--primary-dark);
+}
+
+.contact-form {
+ background: var(--light);
+ padding: 2rem;
+ border-radius: var(--border-radius);
+}
+
+.contact-form h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.success-message {
+ background: #d4edda;
+ color: #155724;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ text-align: center;
+ font-weight: 600;
+}
+
+/* Sales Page */
+.sales-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.sales-header {
+ background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
+ color: white;
+ padding: 3rem 2rem;
+ border-radius: var(--border-radius);
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.sales-header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.sales-header p {
+ font-size: 1.1rem;
+}
+
+/* Sale Banner */
+.sale-banner {
+ background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
+ color: white;
+ padding: 3rem 2rem;
+ text-align: center;
+ border-radius: var(--border-radius);
+}
+
+.sale-banner h2 {
+ color: white;
+}
+
+.sale-banner p {
+ font-size: 1.1rem;
+ margin-bottom: 1.5rem;
+}
+
+/* Promo Banner */
+.promo-banner {
+ background: linear-gradient(135deg, var(--secondary) 0%, #424242 100%);
+ color: white;
+ padding: 3rem 2rem;
+ text-align: center;
+ border-radius: var(--border-radius);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+.promo-banner h3 {
+ font-size: 1.5rem;
+}
+
+.promo-banner input {
+ max-width: 400px;
+ width: 100%;
+ padding: 0.75rem 1rem;
+ border: none;
+ border-radius: var(--border-radius);
+}
+
+.promo-banner .btn {
+ max-width: 400px;
+}
+
+/* Footer */
+.footer {
+ background: var(--secondary);
+ color: white;
+ margin-top: auto;
+ padding: 3rem 0 1rem;
+}
+
+.footer-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.footer-section h3,
+.footer-section h4 {
+ margin-bottom: 1rem;
+ font-size: 1rem;
+}
+
+.footer-section p {
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 0.9rem;
+ line-height: 1.8;
+}
+
+.footer-section a {
+ display: block;
+ color: rgba(255, 255, 255, 0.7);
+ margin-bottom: 0.5rem;
+ transition: color 0.3s;
+}
+
+.footer-section a:hover {
+ color: white;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.footer-bottom {
+ text-align: center;
+ padding-top: 2rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 0.9rem;
+}
+
+/* Loading & Empty States */
+.loading,
+.empty-state {
+ text-align: center;
+ padding: 3rem 1rem;
+ color: var(--gray);
+ font-size: 1.1rem;
+}
+
+.empty-state {
+ background: var(--light);
+ border-radius: var(--border-radius);
+ margin: 2rem auto;
+ max-width: 500px;
+}
+
+.empty-state .btn {
+ margin-top: 1.5rem;
+}
+
+.text-muted {
+ color: var(--gray);
+ font-size: 0.9rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .navbar-container {
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .navbar-center {
+ order: 3;
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+
+ .navbar-menu {
+ gap: 1rem;
+ font-size: 0.9rem;
+ }
+
+ .grid {
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 1rem;
+ }
+
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .detail-container {
+ grid-template-columns: 1fr;
+ }
+
+ .products-container {
+ grid-template-columns: 1fr;
+ }
+
+ .filters-sidebar {
+ display: none;
+ }
+
+ .cart-container,
+ .checkout-container,
+ .contact-container {
+ grid-template-columns: 1fr;
+ }
+
+ .cart-summary,
+ .checkout-summary {
+ position: static;
+ }
+
+ .cart-table {
+ font-size: 0.85rem;
+ }
+
+ .cart-table th,
+ .cart-table td {
+ padding: 0.5rem;
+ }
+
+ .sort-bar {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .footer-container {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 480px) {
+ .navbar-logo {
+ font-size: 1.2rem;
+ }
+
+ .navbar-icons {
+ gap: 0.5rem;
+ }
+
+ .btn {
+ padding: 0.6rem 1rem;
+ font-size: 0.9rem;
+ }
+
+ .grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 0.75rem;
+ }
+
+ .hero-content h1 {
+ font-size: 1.5rem;
+ }
+
+ .section {
+ padding: 0 1rem;
+ }
+
+ .auth-container {
+ padding: 1.5rem;
+ }
+
+ .contact-form,
+ .profile-container {
+ padding: 1rem;
+ }
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..1406734
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 5173,
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8000',
+ changeOrigin: true,
+ },
+ },
+ },
+})
My Wishlist
+ + {wishlistItems.length === 0 ? ( +
+
+ ) : (
+ Your wishlist is empty
+ + Browse Products + +
+
+ )}
+
+ {wishlistItems.map((product) => (
+
+
+
+ ))}
+