Loading repository data…
rishi-jat / repository
🚀 Advanced E-Commerce Platform | Fully Responsive & API-Powered 🛒 A feature-rich e-commerce website with modern UI, dynamic product listings, secure payments, and seamless user experience. Built using Java (Spring Boot), HTML, CSS, and JavaScript, with API integration for real-world shopping functionality.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
This is a full-featured E-Commerce website built using HTML, CSS, JavaScript for the frontend, with backend capabilities using Node.js/Express and Spring Boot integration. The project demonstrates a complete online shopping platform with product browsing, cart management, user authentication, and order processing.
┌─────────────────────────────────────────────────┐
│ PRESENTATION LAYER (Frontend) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Header │ │ Slider │ │ Footer │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ Product Display (content.js) │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
↕
┌─────────────────────────────────────────────────┐
│ BUSINESS LOGIC LAYER │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Cart Logic │ │ Auth Logic │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
↕
┌─────────────────────────────────────────────────┐
│ DATA LAYER │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ localStorage │ │ Cookies │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
↕
┌─────────────────────────────────────────────────┐
│ EXTERNAL SERVICES LAYER │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ MockAPI │ │ Amazon API │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
User visits website
↓
index.html loads
↓
JavaScript executes load() functions
↓
Header, Slider, Content, Footer components are fetched and injected
↓
Slick Carousel initializes
↓
Product data is fetched from API
↓
Products are dynamically rendered on page
function load(id, url) {
let req = new XMLHttpRequest();
req.open("GET", url, false); // Synchronous request
req.send(null);
document.getElementById(id).innerHTML = req.responseText;
}
Explanation:
Process:
XMLHttpRequest → MockAPI → JSON Response → Parse Data → Loop through products → Create DOM elements → Append to container
Code breakdown:
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status == 200) {
contentTitle = JSON.parse(this.responseText);
for (let i = 0; i < contentTitle.length; i++) {
if (contentTitle[i].isAccessory) {
containerAccessories.appendChild(
dynamicClothingSection(contentTitle[i])
);
} else {
containerClothing.appendChild(
dynamicClothingSection(contentTitle[i])
);
}
}
}
};
What happens:
dynamicClothingSection()Data Structure (localStorage):
cart = [
{ id: 1, quantity: 2 },
{ id: 5, quantity: 1 },
{ id: 8, quantity: 3 }
]
Add to Cart Flow:
User clicks "Add to Cart"
↓
Retrieve cart from localStorage
↓
Check if product already exists in cart
↓
If exists → Increment quantity
If not → Add new item with quantity 1
↓
Save updated cart to localStorage
↓
Update cart badge counter
↓
Visual feedback to user
Implementation:
buttonTag.onclick = function() {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
let existing = cart.find(item => item.id == ob.id);
if (existing) {
existing.quantity += 1;
} else {
cart.push({ id: ob.id, quantity: 1 });
}
localStorage.setItem('cart', JSON.stringify(cart));
let counter = cart.reduce((sum, item) => sum + item.quantity, 0);
document.getElementById('badge').innerHTML = counter;
}
User clicks Checkout button
↓
Clear cart from localStorage
↓
Reset badge counter to 0
↓
Redirect to orderPlaced.html
↓
Show order confirmation
Instead of static HTML, I used JavaScript to create elements programmatically:
function dynamicClothingSection(ob) {
let boxDiv = document.createElement("div");
boxDiv.id = "box";
let boxLink = document.createElement("a");
boxLink.href = "/contentDetails.html?" + ob.id;
let imgTag = document.createElement("img");
imgTag.src = ob.preview;
let h3 = document.createElement("h3");
let h3Text = document.createTextNode(ob.name);
h3.appendChild(h3Text);
boxDiv.appendChild(boxLink);
boxLink.appendChild(imgTag);
// ... more elements
return boxDiv;
}
Why this approach?
Why localStorage?
Selected from shared topics, language and repository description—not editorial ratings.
Jungbdrkatuwal /
A fully functional Advanced ecommerce website built with: Backend: Python & Django , Frontend: HTML, CSS, Bootstrap & JavaScript Database: SQLite3 Features: ✅ User authentication (login/register) ✅ Product catalog & search ✅ Shopping cart & checkout ✅ Order history & tracking ✅ Responsive design Simple, clean, and easy to customize! 🚀
42/100 healthvicky004488 /
Learn to build a Flipkart-like e-commerce app using HTML, CSS, and advanced JavaScript. This guide covers everything from sleek UI design 🎨 to interactive features 🔧, perfect for enhancing your web development skills 🚀
40/100 healthrohanbhowm25308 /
🚀 A premium e-commerce inspired Product Catalog showcasing advanced front-end development with HTML, CSS, and JavaScript. Includes wishlist, cart management, dark mode, product comparison, pagination, analytics dashboard, quick view modal, and responsive UI design.
55/100 health