The Challenge
Building a complex shopping cart system that persists state across reloads without hydration errors, while ensuring secure user authentication and inventory synchronization with a PostgreSQL database.
Tech Stack
The Solution
Implemented Zustand for robust client-side state management, ensuring a snappy user experience. Used Better-Auth for a modern, secure, and type-safe authentication flow. The backend leverages Next.js 16 App Router with Prisma ORM to handle complex relational data and ACID-compliant transactions for orders. Payments are processed securely via Stripe.
1// Global Cart State with Zustand & Persistence
2import { create } from 'zustand';
3import { persist } from 'zustand/middleware';
4
5interface CartStore {
6 items: CartItem[];
7 addItem: (product: Product) => void;
8 removeItem: (id: string) => void;
9 total: () => number;
10}
11
12export const useCart = create<CartStore>()(
13 persist(
14 (set, get) => ({
15 items: [],
16 addItem: (product) => {
17 const currentItems = get().items;
18 const existingItem = currentItems.find((item) => item.id === product.id);
19
20 if (existingItem) {
21 // Logic to update quantity
22 } else {
23 set({ items: [...currentItems, { ...product, quantity: 1 }] });
24 }
25 },
26 // ... other actions
27 }),
28 { name: 'cart-storage' } // Persist to localStorage
29 )
30);Type Safety
State Updates
Performance Score
Key Highlights
Instant Cart
Zero-latency shopping cart managed by Zustand.
Secure Checkout
Integrated Stripe Payment Gateway with webhooks.
Modern Auth
Credential & Social login powered by Better-Auth.
Admin Dashboard
Inventory management with Cloudinary image upload.
Next Project