Self‑Checkout Mini‑Store

Inspiration Freelancers, tutors, and small consultants struggle to sell services online. Existing platforms like Shopify are too complex and expensive, while PayPal invoices lack a shopping cart or automated invoicing. I wanted a one‑page, conversation‑built store where a service provider can list three offerings, accept Stripe payments, and email professional invoices – without writing a single line of code. MeDo’s ability to integrate Stripe and Resend plugins via natural language made this possible.

What it does The Self‑Checkout Mini‑Store enables:

Service listing – three preloaded services (e.g., Consultation, Project Setup, Retainer) with quantity selectors.

Real‑time cart – slides in from the right, updates subtotal, supports remove/quantity changes.

Stripe checkout – collects customer name, email, and processes payment via Stripe plugin.

Automatic invoice – after successful payment, generates a PDF invoice and emails it to the customer using Resend API.

Merchant dashboard – view all orders, resend invoices, track total revenue.

How we built it One master prompt in MeDo describing the full stack (React + Tailwind + Supabase + Stripe plugin + Resend plugin).

Iterated 3 times in chat to add:

Loading spinner for payment processing and PDF generation.

Collapsible mobile menu (hamburger → bottom drawer).

4‑step onboarding tour for the merchant when no orders exist.

Integrated Stripe plugin (test mode) and Resend API plugin via MeDo’s marketplace.

Used Supabase for orders, order_items, services, and settings tables with RLS.

Deployed with one click to a public URL.

Challenges we ran into Stripe webhook simulation – needed to manually confirm payment flow within MeDo’s environment; solved by using Stripe’s client‑side PaymentIntent confirmation.

PDF generation – MeDo’s Resend plugin doesn’t natively attach PDFs; we generated an HTML invoice and used a third‑party PDF converter service (or sent HTML fallback).

Email delivery delays – Resend required domain verification; for hackathon, we used a verified sandbox domain.

Cart persistence – refreshing the page lost cart items; fixed by storing cart in localStorage.

Accomplishments that we're proud of A fully functional e‑commerce store built entirely through natural language prompts – no manual coding.

Real‑time cart, Stripe integration, and automated invoicing work end‑to‑end.

Merchant dashboard shows live revenue and order history.

The entire build took under 5 hours from first prompt to deployed URL.

What we learned MeDo’s plugin system (Stripe, Resend) is incredibly powerful – just name the plugin in your prompt and it works.

Iterative prompting is key: start with core features, then add polish (spinners, mobile menu, tours).

Supabase RLS policies need explicit instructions in the prompt to ensure merchants can only see their own orders.

What's next for Self‑Checkout Mini‑Store Add multiple merchant accounts (team support) with role‑based access.

Enable editable services – merchant can add/remove/edit services from the dashboard.

Integrate discount codes and tax calculation.

Add refund workflow (Stripe refund + void invoice).

Connect WhatsApp/SMS order notifications as an alternative to email.

Built With

• ai
• medo