Quick Summary
Amr Samir, Full Stack Developer & Technical Architect, built this project using Next.js, React, Tailwind CSS, Redux Toolkit, Node.js. It demonstrates professional-grade implementation of modern web solutions with a focus on performance and scalability.
What this project demonstrates
Technical Specifications
- Project Type: Web Application
- Primary Stack: Next.js, React, Tailwind CSS
- Deployment: Secure VPS / Cloud Infrastructure
- Architecture: Modern Decoupled Architecture
Core Value Delivery
Delivering scalable, high-performance solutions with a focus on user experience and business growth.
Quick project inquiry
Send a simple inquiry directly from the project page without leaving for the hire page.
Project Overview
Shoprimo: Full-Stack E-Commerce Platform
Problem & System Goals
Online retail applications must balance fast, client-side product catalog interactions with strict financial accuracy. In shopping cart systems, race conditions between frontend cart modifications and server-side payment authorizations frequently cause inventory drift, duplicate order creation, and unverified charges.
Shoprimo was engineered as a full-stack e-commerce application combining a Next.js App Router storefront with a Node.js/Express REST backend, Prisma ORM over MongoDB, and a Stripe payment pipeline.
Architectural & Technical Implementation
1. Data Modeling & Prisma ORM Schema
The database architecture uses Prisma ORM to map relational models over MongoDB:
Product: Stores SKUs, category references, pricing, stock count, and image URLs.Order&OrderItem: Maintains customer references, shipping details, line item pricing snapshots at purchase time, and payment status (PENDING,PAID,FAILED,REFUNDED).StripeEvent: Dedicated collection with unique event ID indexing (@@unique([eventId])) to enforce webhook idempotency.
2. Client-Side Cart Engine via Redux Toolkit
- State Store Structure: Manages an array of
CartItemobjects containing product IDs, quantities, unit prices, and variant options. - Optimistic Updates: Badge counters and subtotals recalculate locally to eliminate UI lag during item additions and removals.
- LocalStorage Sync: Cart state synchronizes to browser storage so user sessions persist across page refreshes.
3. Stripe Checkout & Payment Intent Lifecycle
- The client requests a Stripe Payment Intent from the backend, passing the verified server-calculated cart subtotal.
- The browser mounts the Stripe Payment Element to securely collect card details without sensitive payment data touching the backend server.
4. Webhook Idempotency & Order Fulfillment
Source: api/webhooks/stripe
- Cryptographic Signature Verification: Incoming Stripe webhook events are validated using the webhook signing secret (
stripe.webhooks.constructEvent). - Duplicate Protection: When
payment_intent.succeededis received, the handler attempts to insert the event ID into MongoDB. If a duplicate event delivery arrives, the unique constraint catches it and returns200 OKwithout recreating orders. - Atomic Stock Deduction: Order creation and stock decrement logic execute to ensure purchases do not exceed available quantities.
Technical Challenges & Trade-offs
- Price Integrity: To prevent client-side cart tampering, prices are never trusted from the frontend payload. The backend recalculates order totals directly from database product records before initializing Stripe Payment Intents.
- Webhook Network Retries: Stripe operates on an at-least-once webhook delivery model. Implementing the idempotency event table was essential to prevent duplicate order notifications and multiple inventory deductions.
Related Resources
- Technologies: NENext.js, STStripe, RERedux Toolkit, PRPrisma ORM, MOMongoDB
- Direct Contact: Contact Me