DropShop
A Next.js storefront with Safepay hosted checkout, variant-level inventory, and AI-assisted product listings.
A web app designed and built by Hassan Ur Rahman.
Overview
DropShop is a full-stack eCommerce app built with Next.js and MongoDB. Shoppers browse and filter a catalogue, pick product variants and sub-variants (for example colour, then size), check out as a guest or signed-in user, and pay through Safepay's hosted checkout. Signed-in customers can follow each order's status from their account.
It is built for a small store owner who wants to run their own catalogue and orders without a hosted platform. A role-protected admin area covers products, categories, and orders, product media is stored on Amazon S3, and an AI assistant powered by Claude drafts product listings from an image or a short description.
Key features
Storefront with variants
Search, sort, and filters, image and video galleries, and two levels of variants, each with its own price add-on, stock, and media.
Safepay hosted checkout
The server creates a Safepay payment session and redirects to Safepay's hosted page. Payment is confirmed both on return and through a signed webhook.
Server-side order validation
When an order is placed, stock is re-checked and every price is recomputed from the database, then stock is reduced at the variant level.
Order status tracking
Orders move from pending to delivered with a separate payment status. Customers see status on their orders page, and admins filter and update orders.
Admin console
Role-gated admin pages for creating and editing products with rich-text descriptions, managing categories, and handling orders.
AI product assistant
Admins upload a product image or type a description and Claude drafts the listing. A URL-analysis option scrapes a product page as a starting point.
Large media uploads
Images and videos upload straight from the browser to S3 using presigned multipart URLs, with progress tracking and resumable sessions.
How it's built
- Next.js 15 App Router with React 19 and TypeScript. Typed client-server calls use tRPC v11 with React Query and Zod.
- MongoDB through Mongoose, with nested variant and sub-variant schemas, auto-generated order numbers, and indexes for customer, status, and payment lookups.
- NextAuth credentials sign-in with bcrypt-hashed passwords and role-carrying JWT sessions. Middleware keeps non-admins out of the admin area.
- Safepay Node SDK with a sandbox/production switch. The webhook verifies an HMAC-SHA512 signature and checks amount, currency, and payment state before marking an order paid.
- AWS SDK v3 for S3 presigned and multipart uploads, with optional Transfer Acceleration. Images are served as WebP/AVIF through Next.js image optimization.
- Anthropic Claude API for product listing drafts, with Cheerio for scraping reference product pages. Styled with Tailwind CSS v4 and deployed on Vercel.
Challenges & solutions
- Stopping price tampering at checkout
- The order endpoint ignores client-sent prices: it recomputes every line from the database, including variant add-ons, rejects any mismatch, and checks that the total equals subtotal plus shipping and tax.
- Trusting the payment result
- The Safepay session is stored on the order before redirecting, and the order is looked up by that session rather than by URL parameters. It is only marked paid when the payment has completed and the amount and currency match. The signed webhook makes the flow safe to run twice.
- Uploads larger than serverless limits
- Large product videos skip the server entirely. The browser uploads parts directly to S3 with presigned multipart URLs, and interrupted uploads can be resumed.
Tech stack
- Next.js
- tRPC
- MongoDB
- AWS S3
- Safepay
- Vercel