Pervaj Ahmed TuhinUpdated How We Built Al-Shifaa Remedies' New Site
The Al-Shifaa Remedies site is a React shop with card payments, a database of products and orders, and a dashboard the owner runs. This is how we built it, and why.
How is the shop put together?
The shop is a single-page React app built with Vite. React Router moves between the pages without a reload:
- The home page and the shop, with a filter for honey and oil.
- A page for each product, with its sizes.
- A wishlist, a cart and a checkout.
- The concierge page, with delivery, returns, usage and a contact form.
How do card payments work?
Payments run through Stripe. When a customer checks out, the browser asks a server function to create the payment. Stripe's own card form collects the card details, so they never touch the shop's code or database.
A second server function creates the order.
Where do products and orders live?
Products, sizes, orders, discount codes, customer profiles and shop settings live in Supabase. The database grew through nine migrations, each one a small change, such as adding sizes, discount codes or order management.
Access rules in the database control who can read and change each table.
What does the owner manage?
The admin dashboard has a section each for:
- Orders, with an export to a spreadsheet file.
- Products and stock.
- Discount codes.
- Sales figures.
- Shop settings, and an export of newsletter sign-ups.
What else did we build in?
- A note on every page that the products are not intended to diagnose, treat or prevent any disease.
- A contact form for the specialist, sent by email through EmailJS.
- A layout that works at phone width, from the shop to the checkout.
What is it built with?
- Vite, React 19, React Router and TypeScript.
- Stripe for payments.
- Supabase for the database, sign-in and file storage.
- EmailJS for the contact form.
- Hosted on Vercel, with server functions for payments and orders.
First published
Pervaj Ahmed Tuhin is the Co-Founder and Chief Technology Officer of Ravenence, leading how the sites are built and structured.
