<JRJDev>
🚀
velora-fashion
BuildingPaidE-commerce
A modern, responsive e-commerce clothing platform built with pure HTML5, CSS3, and vanilla JavaScript — featuring authe…
README
👗 Velora Fashion
Soft Elegance. Everyday Confidence.
A modern, responsive e-commerce clothing platform built with pure HTML5, CSS3, and vanilla JavaScript — featuring authentication, shopping cart, wishlist, Facebook Live Selling integration, GCash/Bank QR payments, order tracking, and more.
✨ Features
🛍️ Shopping Experience
- Product catalog with categories (Dresses, Tops, Pants, Accessories)
- Advanced filters — category, price range, sizes
- Sorting — featured, price low-to-high, price high-to-low
- Product details page with size & color selection
- Quick view on hover
- Stock indicator and rating display
🔐 Authentication
- Sign up / Sign in with email & password
- Google Sign In (demo mode — real OAuth upgradeable)
- Protected actions — Add to Cart, Wishlist, and Checkout require login
- Session persistence via localStorage
- User dropdown menu with account access
🛒 Cart & Wishlist
- Add / remove / update quantity in cart
- Wishlist toggle on every product
- Real-time badge counters on navbar
- Persistent storage — survives browser refresh
- Free shipping logic (orders over ₱1,500)
💳 Checkout & Payment
- Two delivery methods:
- 🚚 Deliver to address (with shipping fee)
- 🏬 Pickup at shop (free)
- Dynamic payment methods based on delivery:
- Deliver: GCash, Bank Transfer, Cash on Delivery
- Pickup: GCash, Bank Transfer, Pay at Shop
- QR code generation for GCash & Bank transfers
- Payment proof upload — customer uploads receipt screenshot
- Reference number input for tracking
- Auto-calculated fees (COD fee ₱50, free shipping over ₱1,500)
📦 Order Tracking
- Visual tracking widget with progress bar
- 6-step delivery flow: Order Placed → Confirmed → Preparing → Shipped → Out for Delivery → Delivered
- 5-step pickup flow: Order Placed → Confirmed → Preparing → Ready for Pickup → Picked Up
- Timeline with timestamps for every status change
- Demo auto-advance for testing
📺 Live Selling
- Facebook Page Plugin integration
- Auto-detect live status based on schedule
- Countdown timer to next live session
- Offline fallback UI
- Weekly schedule (Every Friday 8PM)
📄 Additional Pages
- About — brand story, values, team, stats
- Contact — form, FAQ, social links, store hours
- Collections — curated product groups
🎨 Design & UX
- Premium design language — Rose Beige, Soft Black, Champagne Gold
- Typography: Playfair Display (headings) + Poppins (body)
- Fully responsive — mobile, tablet, desktop
- Smooth animations — AOS scroll effects, hover states, transitions
- Toast notifications for user feedback
- Accessibility — ARIA labels, keyboard navigation, semantic HTML
🛠️ Tech Stack
| Layer | Technology |
|---|---|
| Structure | HTML5 |
| Styling | CSS3 (with CSS Variables, Grid, Flexbox) |
| Behavior | Vanilla JavaScript (ES6+) |
| Animations | AOS (Animate On Scroll) |
| QR Codes | qrcodejs |
| Live Embed | Facebook Page Plugin |
| Storage | Browser localStorage |
| Fonts | Google Fonts (Playfair Display, Poppins) |
| Images | Unsplash (demo), replaceable |
📁 Project Structure
Journey
No updates yet.
