Hello developers! 👋
I'm excited to share my Amazon Clone project – a lightweight, responsive e-commerce interface I built using HTML, Tailwind CSS, and Vanilla JavaScript as part of my ongoing learning journey. 💻
🔍 What is this project?
This Amazon Clone mimics the essential features of a real shopping platform. It is part of my Learning Curve Repository, where I’m building hands-on mini-projects to master the MERN stack and core web development concepts.
🌐 Live Demo
📦 Key Features
- ✅ Add to Cart Functionality
- 🔢 Quantity Updater
- 💸 Real-time Bill Calculation
- 🧭 Category-wise Product Rendering
- 🛒 Cart Count Display in Navbar
- 📅 Dynamic Order Date
- 💾 localStorage Integration (Cart persists after refresh)
- 📱 Fully Responsive with Tailwind CSS
You can explore all these features directly in the live demo. The UI adapts seamlessly from mobile to desktop devices.
🛠 Technologies Used
- HTML
- Tailwind CSS
- JavaScript
- LocalStorage API
📁 Source Code
You’ll find this project under the /mini-projects/02_amazon_clone directory in my public repo.
🧗 What's Next?
This clone was a significant step in understanding dynamic DOM rendering, event handling, and state persistence using browser APIs.
I’m actively building projects in my Learning Curve Series here:
🌱 Learning Curve Repository
🌐 Learning Curve Website
Feel free to explore, fork, and give feedback!
💬 Final Thoughts
Building clones of real-world apps is one of the best ways to sharpen your frontend skills. This project helped me solidify concepts like:
- Component-based thinking (even without React)
- Responsive layouts with Tailwind
- Working with structured product data
- Handling browser input on both desktop and mobile
If you’re on a learning journey like mine, I’d love to connect. Drop your thoughts in the comments or reach out via GitHub!
Thanks for reading! Happy Coding! 👨💻💙
Top comments (0)