No title

byRecipe Rendezvous •
0

 

/* DigiMint - Single-file React app (App.jsx) README / Setup 1. Create a new Vite React project: npm create vite@latest digimint -- --template react cd digimint 2. Install dependencies (Tailwind CSS): npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 3. Configure Tailwind (tailwind.config.cjs): module.exports = { content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {} }, plugins: [], } 4. Add Tailwind imports to src/index.css: @tailwind base; @tailwind components; @tailwind utilities; 5. Replace src/App.jsx with this file. Import index.css in src/main.jsx import './index.css' 6. Run dev server: npm run dev Notes: - This is a frontend-only demo that simulates selling digital products. - For real payments integrate Stripe/PayPal server-side. - File delivery is simulated: protected delivery should be handled server-side with expiring links. Components included (in one file for convenience): - Header, Hero, Features - ProductList, ProductCard, ProductModal - Cart (localStorage-backed) - AdminUpload (simulate adding new digital products) - Checkout (simulated) Name: DigiMint */ import React, { useEffect, useState } from 'react' // Utility: Local storage helper const useLocalStorage = (key, initial) => { const [state, setState] = useState(() => { try { const raw = localStorage.getItem(key) return raw ? JSON.parse(raw) : initial } catch (e) { return initial } }) useEffect(() => { localStorage.setItem(key, JSON.stringify(state)) }, [key, state]) return [state, setState] } // Sample seed products const SAMPLE_PRODUCTS = [ { id: 'p1', title: 'Minimalist Social Media Templates - Figma', price: 12.0, description: 'A pack of 20 clean social media templates for Figma/Sketch. Ready for brands.', tags: ['templates', 'figma', 'social'], cover: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&q=80', fileName: 'social-templates.zip', fileUrl: '#', }, { id: 'p2', title: 'E-book: 30 Days to Better Productivity', price: 7.99, description: 'A short actionable e-book full of exercises & trackers you can use immediately.', tags: ['ebook', 'productivity'], cover: 'https://images.unsplash.com/photo-1483058712412-4245e9b90334?w=1200&q=80', fileName: 'productivity-ebook.pdf', fileUrl: '#', }, { id: 'p3', title: 'Set of 50 High-Res Textures', price: 9.5, description: 'PNG textures for backgrounds and overlays. 2048x2048 high-res files.', tags: ['textures', 'graphics'], cover: 'https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80', fileName: 'textures-50.zip', fileUrl: '#', }, ] // ----- Header ----- function Header({ cart, onOpenCart }) { return (
) } // ----- Hero ----- function Hero() { return (

DigiMint — sell digital products with confidence

Beautiful product pages, simple checkout, and a delightful buyer experience. Perfect for e-books, templates, music, fonts and more.

No coding required. Payments are simulated in this demo.
DigiMint preview
) } // ----- Features ----- function Features() { return (

Why creators choose DigiMint

Beautiful product pages

Clean, minimal product listings that highlight your work.

Instant delivery

Automated downloads after purchase (demo). Real setups use secure links.

Easy admin

Upload new products, set prices, and manage listings from the dashboard.

) } // ----- Product Card ----- function ProductCard({ p, onOpen }) { return (
{p.title}

{p.title}

{p.description}
${p.price.toFixed(2)}
) } // ----- Product Modal ----- function ProductModal({ product, onClose, onAddToCart }) { if (!product) return null return (

{product.title}

{product.description}

${product.price.toFixed(2)}
Tags: {product.tags.join(', ')}
) } // ----- Cart & Checkout ----- function CartDrawer({ isOpen, onClose, cartItems, onRemove, onCheckout }) { const subtotal = cartItems.reduce((s, it) => s + it.price * it.qty, 0) if (!isOpen) return null return (

Cart

{cartItems.length === 0 &&
Your cart is empty.
} {cartItems.map((it) => (
{it.title}
Qty: {it.qty}
${(it.price * it.qty).toFixed(2)}
))}
Subtotal
${subtotal.toFixed(2)}
) } // ----- Admin Upload ----- function AdminUpload({ onAddProduct }) { const [title, setTitle] = useState('') const [price, setPrice] = useState('9.99') const [desc, setDesc] = useState('') const [tags, setTags] = useState('') const [cover, setCover] = useState('') const submit = (e) => { e.preventDefault() const newProduct = { id: 'p' + Date.now(), title: title || 'Untitled Product', price: parseFloat(price || 0), description: desc, tags: tags.split(',').map((s) => s.trim()).filter(Boolean), cover: cover || 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80', fileName: title ? title.toLowerCase().replace(/\s+/g, '-') + '.zip' : 'file.zip', fileUrl: '#', } onAddProduct(newProduct) setTitle('') setPrice('9.99') setDesc('') setTags('') setCover('') } return (

Admin — Upload product

setTitle(e.target.value)} placeholder="Product title" className="border rounded px-3 py-2" /> setPrice(e.target.value)} placeholder="Price" className="border rounded px-3 py-2" /> setCover(e.target.value)} placeholder="Cover image URL" className="border rounded px-3 py-2" />