Client: [Auto Parts Business Name or “Confidential”]
Project: E-commerce Web Shop for Auto Parts
Tech Stack: Frappe (Backend), React (Frontend via Frappe React SDK), Stripe (Payments)

Project Overview

The goal of this project was to develop a custom e-commerce platform for an auto parts business. The client needed a system to manage a large inventory of parts, handle orders, and accept online payments — all within a clean, fast, and modern web interface.

We chose Frappe for its strong ERP-style backend, React with the Frappe React SDK for a smooth SPA frontend, and Stripe for reliable and secure payment processing.

 

Challenges & How We Solved Them

1. Complex Product Catalog Structure

• Challenge: Auto parts have variations (by model, engine type, year, etc.), which can be hard to structure.

• Solution:

  • Customized Frappe Item DocType to support attributes like car model compatibility, OEM references, categories, and tags.

  • Used child tables and filters to manage product variants.

  • Created an advanced faceted search and filter system on the frontend using React.

2. Modern Frontend with Frappe Backend

• Challenge: Integrating React smoothly with Frappe’s backend without losing performance or data syncing.

• Solution:

  • Used the Frappe React SDK for seamless API handling, session management, and CRUD operations.

  • Implemented custom hooks for cart management, wishlist, product details, and checkout processes.

  • Ensured login sessions and token handling synced between React and Frappe correctly.

3. Secure Online Payments with Stripe

• Challenge: Integrating a secure and scalable payment system with order sync in Frappe.

• Solution:

  • Used Stripe Checkout with React and handled payment verification via Frappe server-side webhook.

  • On successful payment, created Sales Order, Payment Entry, and Delivery Note automatically in Frappe.

  • Ensured all transactions were logged and customer order status was updated in real-time.

4. Cart & Order Management

• Challenge: Frappe’s eCommerce system is limited for custom flows like “Save for Later”, guest checkout, etc.

• Solution:

  • Built a full cart system in React with local storage fallback.

  • Developed custom Frappe endpoints (@frappe.whitelist) for order creation, updates, and guest user handling.

5. Scalability & Performance

• Challenge: Auto parts catalog can grow large, leading to performance drops.

• Solution:

  • Implemented pagination, lazy loading, and search indexing using Elastic-like filtering.

  • Used caching for frequent API calls and category data.

  • Optimized backend queries with Frappe’s ORM and direct SQL when needed.

 

 

Results

• Fast, responsive React-powered storefront with real-time cart and product updates.

• Secure checkout experience using Stripe with automated order processing in Frappe.

• Scalable system that supports thousands of products and customer accounts.

• Full integration between frontend and backend, reducing manual work and improving order fulfillment.

 

 

Tech Stack Summary

 

 

Lessons Learned

• The Frappe React SDK is powerful but requires a well-structured API design on the backend.

• Stripe’s developer-friendly APIs make payment integration easy, but syncing them properly with Frappe’s document system took thoughtful mapping.

• React helped us build a smooth user experience, but maintaining consistency with Frappe’s backend rules required tight coordination.