A modern, responsive single-product e-commerce website for YooVee® Premium Fingerless Gloves, featuring a Node.js backend for Stripe payment processing.
Live Site: https://yoovee.com.au
This project is a sophisticated, modern e-commerce website for YooVee® fingerless gloves that combines elegant aesthetics with robust functionality. The single-product store focuses on showcasing premium fingerless gloves while guiding visitors through a seamless shopping experience, including secure online payments via Stripe.
- Complete Visual Overhaul: Clean, elegant aesthetic inspired by Scandinavian design principles
- Neutral Color Palette: Soft whites, warm grays, and subtle accent colors
- Typography Refresh: Modern, refined typography for improved readability
- Streamlined Layout: Focused product presentation with generous whitespace
- Premium Feel: Design language that reflects the quality of the product
- App-Like Taskbar: Bottom navigation with glass morphism effect
- Smart Scroll Interactions: Scroll-based active states and progress indicator
- Sticky Add-to-Cart: Mobile-optimized floating add-to-cart bar
- Responsive Design: Seamless experience across all devices
- Customer Reviews: Authentic testimonials from verified Australian customers
- Trust Badges: Free Shipping, 30-Day Returns, Secure Checkout, Australian Owned
- Sales Counter: Dynamic social proof indicators
- Mobile-Optimized: Reduced motion for better performance on smaller devices
- Efficient Animations: Hardware-accelerated transforms for smooth 60fps interactions
- Smart Loading: Optimized resource delivery for faster page load times
- Responsive Design: Mobile-first layout optimized for all devices
- Scandinavian UI: Minimalist aesthetic with neutral tones and generous whitespace
- Product Gallery: Interactive gallery with thumbnails, navigation arrows, and zoom modal
- Shopping Cart: Persistent cart using localStorage
- Accessibility: Full ARIA support, keyboard navigation, semantic HTML
- Secure Checkout: Stripe Payment Element integration
- Trust Signals: Trust badges, payment icons, social proof
- Newsletter Signup: Email capture with discount incentive
- Multi-currency: Configured for AUD
- Structured Data: JSON-LD schemas (Product, Organization, FAQPage, WebSite)
- SEO Optimized: robots.txt, sitemap.xml, meta tags, Open Graph
- Performance: Resource preloading, lazy loading, preconnect hints
- Analytics Ready: Google Analytics 4 placeholder included
yoovee-store/
├── index.html # Main landing/product page
├── cart.html # Shopping cart with Stripe checkout
├── payment-success.html # Post-payment confirmation
├── server.js # Express backend for Stripe
├── robots.txt # Search engine directives
├── sitemap.xml # XML sitemap with images
├── package.json # Node.js dependencies
│
├── css/
│ ├── style.css # Main stylesheet (2000+ lines)
│ └── cart.css # Cart-specific styles
│
├── js/
│ ├── main.js # Navigation, accordions, modals
│ ├── product.js # Gallery, color/size selection
│ ├── cart.js # Cart management, localStorage
│ ├── checkout.js # Stripe checkout flow
│ ├── carousel.js # Image carousel
│ └── image-modal.js # Product image zoom
│
├── images/
│ ├── Product/ # Product photos (jpg, webp)
│ ├── svg/ # Patterns and logos
│ ├── favicon.png
│ └── logo-header-transparent.svg
│
└── docs/
└── AI-IMAGE-GENERATION-GUIDE.md # Guide for AI product photography
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure with ARIA |
| CSS3 | Flexbox, Grid, CSS Variables |
| JavaScript ES6+ | Modular, no framework dependencies |
| Font Awesome 6 | Icons |
| Google Fonts | Montserrat typography |
| Technology | Purpose |
|---|---|
| Node.js | Runtime |
| Express.js | HTTP server |
| Stripe API | Payment processing |
| dotenv | Environment variables |
| cors | Cross-origin requests |
| Feature | Implementation |
|---|---|
| Structured Data | JSON-LD (Product, FAQ, Organization) |
| Meta Tags | Open Graph, Twitter Cards |
| Sitemap | XML with image extensions |
| Analytics | Google Analytics 4 ready |
- Node.js 16+ and npm
- Stripe account with API keys
- (Optional) Google Analytics 4 Measurement ID
-
Clone the repository:
git clone https://github.com/m4cd4r4/yoovee-store.git cd yoovee-store -
Install dependencies:
npm install
-
Configure environment: Create
.envin root:STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key PORT=4242
-
Configure Google Analytics (optional): In
index.html, replaceG-XXXXXXXXXXwith your GA4 Measurement ID. -
Start the server:
npm start
Server runs at http://localhost:4242
-
Open the site: Open
index.htmlin your browser, or serve with a local server.
- Get your API keys from Stripe Dashboard
- Add Secret Key to
.env - The Publishable Key is already in
cart.html(test mode)
Replace the placeholder in index.html:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>Update product info in:
index.html(display content)- JSON-LD schema in
<head>(structured data) sitemap.xml(image URLs)
- Hero Social Proof: Star rating and customer count
- Trust Badges: Free Shipping, 30-Day Returns, Secure Checkout, Australian Owned
- Payment Icons: Visa, Mastercard, Amex, PayPal, Stripe
- Newsletter: 10% discount incentive with email capture
- Product Schema: Price, availability, ratings, shipping, returns
- FAQ Schema: Enables rich snippets in search results
- Organization Schema: Brand information
- Open Graph: Optimized social sharing
- Full keyboard navigation
- ARIA labels and roles
- Focus states on all interactive elements
- Screen reader friendly
Additional documentation available in /docs:
- AI Image Generation Guide - Comprehensive guide for creating product lifestyle images using AI tools (FLUX, Stable Diffusion, ComfyUI)
| Browser | Support |
|---|---|
| Chrome | Full |
| Firefox | Full |
| Safari | Full |
| Edge | Full |
| Mobile browsers | Full |
This project is deployed on Vercel with automatic deployments from the main branch.
- Hosting: Vercel (free tier)
- Domain: yoovee.com.au (registered at CrazyDomains)
- Branch:
main(production) - Auto-deploy: Every push to
maintriggers automatic deployment
- Fork this repository
- Import to Vercel: vercel.com/import
- Configure environment variables for Stripe
- Add your custom domain
The frontend can be deployed to any static host (Netlify, GitHub Pages, etc.). The Stripe backend requires a Node.js server or serverless functions.
- Never commit
.envfile - Use Stripe test keys for development
- The Publishable Key in
cart.htmlis safe to expose (it's meant to be public) - Always use HTTPS in production
All rights reserved. YooVee® is a registered trademark.
Australian Owned & Operated