// 🚀 FULL ECOMMERCE STARTER (React + Simple Backend Logic)
// This is a simplified but REAL structure you can expand into production
// ================= FRONTEND (React) =================
import React, { useState, useEffect } from 'react';
export default function App() {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState([]);
// Fetch products (mock API for now)
useEffect(() => {
fetch('/api/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
const addToCart = (product) => {
setCart(prev => [...prev, product]);
};
return (
);
}
// ================= BACKEND (Node.js Express) =================
// Create file: server.js
const express = require('express');
const app = express();
const PORT = 5000;
app.use(express.json());
// Mock database
const products = [
{
id: 1,
name: 'Luxury Watch',
price: 12000,
image: 'https://via.placeholder.com/200'
},
{
id: 2,
name: 'Gold Edition Watch',
price: 15000,
image: 'https://via.placeholder.com/200'
}
];
// Routes
app.get('/api/products', (req, res) => {
res.json(products);
});
// Checkout endpoint (basic)
app.post('/api/checkout', (req, res) => {
const { cart } = req.body;
console.log('Order received:', cart);
res.json({ success: true, message: 'Order placed!' });
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
// ================= NEXT STEPS =================
// 1. Connect to real database (MongoDB)
// 2. Add Stripe payments
// 3. Add authentication (login/register)
// 4. Deploy frontend (Vercel) & backend (Render)
// 5. Add admin dashboard to manage products
Luxury Store
{/* Product Grid */}
{products.map(product => (
))}
{/* Cart */}
{product.name}
${product.price}
Cart ({cart.length})
{cart.map((item, index) => ({item.name} - ${item.price}
))}
Comments