eShop Nepal | Jiban Budhathoki

🛍️ The Challenge

Building an e-commerce site is less about displaying products and more about managing state and reducing friction. Users need to filter thousands of items, add them to a persistence cart, and move through checkout without hesitation.

eShop Nepal addresses local market needs with a lightweight interface designed for varying network conditions common in the region.

🔥 Core Implementation

1. Data-Driven Product Grid

The product listing page is dynamic and robust:

Client-Side Filtering: Custom algorithms to filter by category, price range, and rating without page reloads.
Lazy Loading: Images load only when near the viewport to save data.
Responsive Grid System: Uses grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) to perfectly adapt to any device width.

2. Cart Logic & Persistence

Implementing a robust cart system in Vanilla JS required strict state management:

LocalStorage Sync: Cart contents survive page reloads and browser restarts.
Business Logic: handles stock limits, distinct variants (size/color), and total calculation in real-time.
UI Feedback: Toast notifications and badge updates immediately upon user interaction ("Add to Cart").

3. Conversion-Focused UX

Sticky Actions: The "Buy Now" button remains accessible on mobile screens.
Simplified Forms: Checkout forms use floating labels and inline validation to prevent abandonment.
Skeleton Screens: Loading states are managed with skeleton UI variants to reduce perceived waiting time.

🧩 Code Highlight

The filtering engine was a key piece of engineering. Instead of multiple loops, I implemented a single-pass filter chain:

const filterProducts = (products, criteria) => {
  return products.filter(product => {
    const activeCategory = !criteria.category || product.category === criteria.category;
    const priceInRange = product.price >= criteria.minPrice && product.price <= criteria.maxPrice;
    const matchesSearch = product.name.toLowerCase().includes(criteria.search.toLowerCase());
    
    return activeCategory && priceInRange && matchesSearch;
  });
};

🚀 Future Scalability

To take this from prototype to production platform, the roadmap includes:

Backend Integration: Connecting to a headless CMS (Strapi) or Shopify API.
Auth Flow: Implementing JWT-based customer authentication.
Payment Gateway: Integration with local wallets like eSewa and Khalti.

🛍️ The Challenge

eShop Nepal addresses local market needs with a lightweight interface designed for varying network conditions common in the region.

🔥 Core Implementation

The product listing page is dynamic and robust:

Client-Side Filtering: Custom algorithms to filter by category, price range, and rating without page reloads.

Lazy Loading: Images load only when near the viewport to save data.

Responsive Grid System: Uses grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) to perfectly adapt to any device width.

Implementing a robust cart system in Vanilla JS required strict state management:

LocalStorage Sync: Cart contents survive page reloads and browser restarts.

Business Logic: handles stock limits, distinct variants (size/color), and total calculation in real-time.

UI Feedback: Toast notifications and badge updates immediately upon user interaction ("Add to Cart").

Sticky Actions: The "Buy Now" button remains accessible on mobile screens.

Simplified Forms: Checkout forms use floating labels and inline validation to prevent abandonment.

Skeleton Screens: Loading states are managed with skeleton UI variants to reduce perceived waiting time.

🧩 Code Highlight

The filtering engine was a key piece of engineering. Instead of multiple loops, I implemented a single-pass filter chain:

const filterProducts = (products, criteria) => { return products.filter(product => { const activeCategory = !criteria.category || product.category === criteria.category; const priceInRange = product.price >= criteria.minPrice && product.price <= criteria.maxPrice; const matchesSearch = product.name.toLowerCase().includes(criteria.search.toLowerCase()); return activeCategory && priceInRange && matchesSearch; }); };