Careeroza
Real World Example
From ShopEase to Real Products
The ShopEase architecture is close to how real Indian commerce front-ends are built with Next.js: a cached catalogue (products, categories, offers) served from a CDN, dynamic islands for the cart, delivery ETA and recommendations, Server Actions or a backend API (for example the NestJS ShopEase API from the NestJS material) for mutations, and webhooks from payment gateways like Razorpay.
| ShopEase piece | Real-world counterpart |
|---|---|
| ISR product pages + tags | Catalogue pages refreshed when sellers edit listings |
| PPR delivery estimate | "Delivery by Tomorrow" based on your pincode |
| Server Actions for cart | Add-to-cart without a page reload |
| Razorpay webhook route | Order confirmation after UPI/card payment |
| Admin with parallel routes | Seller dashboards with independent widgets |
Next Steps
Exercise: Extend ShopEase with a wishlist: a heart button on product cards (optimistic), a /account/wishlist page, and a Server Action that toggles an item. Which files would you add?
Show answer
app/(shop)/account/wishlist/page.tsx // Server Component: list from lib/dal/wishlist.ts
app/(shop)/account/wishlist/actions.ts // 'use server': toggleWishlist(productId) -> auth check, DB, revalidatePath
lib/dal/wishlist.ts // 'server-only': getMyWishlist(), toggle(); returns DTOs
components/WishlistButton.tsx // 'use client': useOptimistic + startTransition(toggleWishlist)
prisma/schema.prisma // model WishlistItem { userId, productId, createdAt, @@id([userId, productId]) }
e2e/wishlist.spec.ts // Playwright: login, toggle, see it on /account/wishlist