This repository contains the frontend for "Mr. Brushee", a small e-commerce storefront built with Next.js and React. The site implements a simple product checkout flow using Stripe Checkout, collects basic customer and shipping information, and includes server routes for creating checkout sessions and handling payment success redirects.
The design was implemented from a Figma reference and the project contains responsive layouts and assets for desktop, tablet, and mobile breakpoints.
- A marketing + storefront site for the "Mr. Brushee" portable shoe cleaner.
- Product page(s) with a Stripe Checkout flow (hosted Stripe Checkout session).
- Basic pages for success and cancel flows after payment.
- Static and media assets under
public/used for hero, product, and marketing content.
- Next.js (App Router) — server and client components
- React 19
- TypeScript
- Tailwind CSS for styling
- Stripe (official Node library) for payments
- SendGrid / Nodemailer (present as dependencies / commented utilities) for transactional email (optional)
- Google APIs / Google Sheets (commented utility for optional spreadsheet logging)
Key dependencies visible in package.json:
next15.x,react19stripe(server-side Stripe SDK)@sendgrid/mail,nodemailer(email utilities are present but commented)googleapis(commented - optional Google Sheets integration)
This project uses Stripe Checkout. The server route at src/app/api/checkout/route.ts creates a Checkout Session with the following highlights:
- Card payments via Stripe Checkout
- Billing address and phone collection enabled
- Shipping address collection limited to US, CA, IN, GB
- A single hard-coded product (Mr. Brushee) with adjustable quantity and a unit amount of $20.00 (2000 cents)
- Redirects back to
SuccessandCancelpages usingNEXT_PUBLIC_BASE_URL
Environment variables required for payments and other integrations are documented in the next section.
The UI and layouts were built to match a Figma design provided by the client (Figma file not included in this repo). Use the public/ images (Hero, Product, Features) as assets mapped from the Figma screens. When adding screenshots to this README, use the filenames suggested below and keep them in a screenshots/ folder at the project root.
A responsive marketing + storefront site for the "Mr. Brushee" portable shoe cleaner — built with Next.js and Stripe Checkout.
Add screenshots into
./screenshots/and they'll render in the gallery below.
Desktop / Tablet / Mobile screenshots can be added individually. I removed the table layout to avoid rendering issues — use simple image embeds instead.
Home (recommended)
Please add images for these important flows. Suggested filenames are shown in parentheses.
- Product card (desktop + mobile):
-
Payment / Checkout:
-
Payment Cancel / Cancelled page:
- 🛍️ Marketing + storefront for a single product (Mr. Brushee)
- 💳 Stripe Checkout for secure payments
- 📦 Shipping & billing collection supported during checkout
- 🎨 Built from a Figma design reference with responsive layouts
- ✅ Responsive layout (desktop / tablet / mobile)
- ✅ Hosted Stripe Checkout sessions (server-side)
- ✅ Billing, phone & shipping address collection
- ✅ Adjustable product quantity in checkout
- ⚙️ Email & Google Sheets integration hooks (commented helpers included)
| Category | Libraries |
|---|---|
| Framework | Next.js (App Router) + React 19 |
| Styling | Tailwind CSS |
| Payments | stripe (Stripe Checkout) |
| @sendgrid/mail, nodemailer (present but optional) | |
| googleapis (optional Google Sheets helper) |
Key entries are visible in package.json.
Stripe Checkout session is created at src/app/api/checkout/route.ts.
- Payment method: card
- Mode: payment
- Billing address collection: required
- Phone number collection: enabled
- Shipping countries: US, CA, IN, GB
- Product: "Mr. Brushee" ($20.00 hard-coded)
- Redirects:
SUCCESSandCANCELroutes useNEXT_PUBLIC_BASE_URL
Create a .env.local at the project root and set:
| Variable | Purpose | Required |
|---|---|---|
STRIPE_SECRET_KEY |
Stripe secret key (server-side) | ✅ |
NEXT_PUBLIC_BASE_URL |
Base URL for success/cancel redirects | ✅ |
EMAIL_USER, EMAIL_PASS |
SMTP credentials for nodemailer (optional) | ⚪ |
SENDGRID_API_KEY |
SendGrid API key (optional) | ⚪ |
GOOGLE_SPREADSHEET_ID |
Google Sheets ID for logging (optional) | ⚪ |
Notes:
- Never expose
STRIPE_SECRET_KEYin client-side code. - For local testing use Stripe test keys and the test card
4242 4242 4242 4242.
| Command | What it does |
|---|---|
npm run dev |
Start local dev server (Next.js TurboPack) |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
- Install dependencies
npm install-
Add
.env.localwith the required variables. -
Start development server
npm run dev- Open
http://localhost:3000.
-
Place screenshots in
./screenshots/with the suggested filenames:desktop-home.png(1440×900)tablet-home.png(1024×768)mobile-home.png(375×812)desktop-product.png(1440×900)mobile-checkout.png(375×812)
-
Example markdown to add a screenshot elsewhere:
Recommended: Vercel — Connect the repo, add environment variables and deploy. Vercel auto-detects Next.js.
Manual build & run:
npm run build
npm startsrc/utils/sendEmail.tsandsrc/utils/googleSheets.tscontain commented helper code for transactional emails and sheet logging. They need API keys and a service account JSON (for Google Sheets).- Consider moving product metadata (price, images) out of the checkout route into a shared config or CMS for easier updates.
PRs welcome. Ideas:
- Add tests for API routes
- Extract product config into a JSON or CMS
- Implement a webhook to verify Stripe payments and trigger emails/logging
If you want, I can:
- Add the
screenshots/folder and generate simple placeholder images. - Wire SendGrid email flow or Google Sheets logging (requires API keys and service account file).