Hey devs!
After 5 intense days of pushing code, battling bugs, and refusing to let my back pain or caffeine withdrawal win 😤—I’m super excited to finally share my latest project:
🧠 What is ShopVerse?
ShopVerse is a responsive front-end e-commerce site that mimics real-world online shopping platforms. It’s designed to not just display products but to offer a complete and dynamic user experience — from browsing to checkout, all on the front end.
🔍 Features Overview
🛒 Core Shopping Experience
- Product listing with images, prices, and star ratings
- Interactive cart system with quantity selection (1–3)
- Checkout page with live delivery price and summary calculations
- Dynamic order tracking page showing animated shipment status
✨ UI & UX Enhancements
- 3D particle background using Three.js
- Smooth scroll/hover animations for product cards
- LocalStorage support for cart/order persistence across sessions
- Friendly UI prompts (Empty cart states, order confirmations)
🧱 Tech Stack
- HTML5 + CSS3
- JavaScript (ES6 Modules)
- Three.js – 3D particle background
- Day.js – Delivery date calculations
- LocalStorage API – Cart/order persistence
Project structure includes modular scripts like:
-
products.js,cart.js,deliveryOptions.js - Separate JS files for each page:
checkout.js,tracking.js, etc. - Organized styling across global & page-specific folders
📸 Preview
🛠 What I Learned
- Modularizing JavaScript logic for better readability & reusability
- Handling client-side state (cart/orders) using LocalStorage effectively
- Integrating visual libraries (Three.js) in vanilla JS projects
- UI/UX fine-tuning: user flows, edge case handling, mobile-first design
😅 The Grind Behind It
Let’s be honest: it looks like a basic store on the surface, right?
But trust me, it was so much more than a clone —
I rebuilt components, animated states, and gave it a soul of its own.
💤 4 sleepless nights
💢 5 days of coding + back pain
💧 Only water (no caffeine!)
🎧 Podcasts + pure grit
Shoutout to SuperSimpleDev for a clear foundational path and the motivation to keep going!
📈 What’s Next?
✅ Add user authentication
✅ Wishlist & product filtering
✅ Add backend or integrate Firebase
✅ Real payment gateway integration
✅ Move to full-stack with Node.js or Django
📬 Check it Out!
Would love your feedback!
Let me know what you think, how I can improve, or what you’d add to make it even better!
🧠 Let’s connect and build together. Drop your thoughts, and show me your e-commerce builds too!
Top comments (4)
нормально молодец
Thank you
Bro, this is not just an e-commerce site, this is basically Amazon’s little cousin who went to the gym, got aesthetics, and learned Three.js for style points. The animated shipment tracking alone deserves a standing ovation. Can’t believe you pulled this off in 5 days with water-only mode. Respect!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.