An online grocery store with live payment updates
A grocery shop with a Next.js storefront and admin area and a NestJS API, using QR bank payments, live order and payment updates, and push notifications.
- Problem
- Customers pay by scanning a bank QR code, so the storefront has to learn when the payment arrives without the customer refreshing. Staff need to see new orders as they come in.
- Contribution
- Sole developer: storefront, admin area, API, database schema, payment and notification integrations, and the PM2 production setup.
- Approach
- A Next.js storefront and admin area built with Tailwind and Recharts. It talks to a NestJS API with modules for products, cart, orders, promotions, payments, notifications and site settings, using Prisma over PostgreSQL. Payments create VietQR/PayOS QR codes. When a payment is confirmed, a Socket.IO gateway pushes the status to that checkout session's room and alerts an admin feed room. Firebase Cloud Messaging sends push notifications. The API runs under PM2 in cluster mode.
- Outcome
- A working storefront and admin dashboard with QR checkout, live payment status, promotions and push notifications. The frontend is deployed on Vercel.