FULL-STACK / SELECTED WORK BY OSAYEED ZABER
TajWater
Water delivery for ten Metro Vancouver zones: one-time and subscription orders, delivery tracking, and a role-gated admin panel.
THE PROJECT / NOTES & DETAILS
TajWater is a full-stack e-commerce platform for a water delivery company operating across 10 Metro Vancouver zones. Customers browse products, place one-time or recurring subscription orders and track deliveries from the storefront. A role-gated admin panel handles everything from order fulfilment to customer support.
TajWater
Premium water delivery platform for Metro Vancouver
Overview
TajWater is a full-stack e-commerce platform built for a water delivery company operating across 10 Metro Vancouver zones. Customers can browse products, place one-time or recurring subscription orders, and track deliveries — all from a polished storefront. A role-gated admin panel handles everything from order fulfillment to customer support.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, TypeScript) |
| Styling | Tailwind CSS v4, shadcn/ui, Framer Motion |
| State | Zustand (cart — localStorage persist) |
| Database | Supabase (PostgreSQL + RLS) |
| Auth | Supabase Auth (email/password + Google OAuth) |
| Payments | Stripe (PaymentIntents + Webhooks) |
| Resend (transactional HTML emails) | |
| Deployment | Vercel |
Features
Storefront
- Product catalog with category filtering and real-time stock display
- Delivery zone checker — confirms coverage before checkout
- Cart with persistent state across sessions
- Checkout with Stripe card payments and order confirmation email
Customer Dashboard
- Order history with status tracking
- Subscription management (pause, resume, cancel)
- Support ticket system with admin replies
- Profile management
Admin Panel (role-gated)
| Role | Access |
|---|---|
| Super Admin | Full access — settings, access management, all data |
| Manager | Orders, customers, products, content, tickets, analytics |
| Delivery | Dashboard and delivery schedule only |
- Orders management with status updates and driver assignment
- Customer CRM with order history
- Product inventory management
- Delivery schedule and zone management
- Payments dashboard with Stripe integration
- Support ticket queue with reply system
- Analytics overview (revenue, orders, customers)
- Content editor for services and about page
- Email logs and notification preferences
Project Structure
app/
(public)/ Home, Services, Areas, About, Contact, Shop, Checkout
auth/ Login, Register, Forgot, Reset, OAuth Callback
dashboard/ Customer portal (orders, subscription, profile, support)
admin/ Admin portal (10 sub-pages, role-gated)
api/ create-payment-intent, stripe/webhook, invoice/[orderId]
components/
layout/ Navbar, Footer
shared/ WaterBackground, FloatingOrderButton
home/ Hero, HowItWorks, ProductShowcase, DeliveryChecker, etc.
ui/ shadcn primitives
lib/ supabase.ts, stripe.ts, email.ts
store/ cartStore.ts (Zustand)
types/ index.ts (all shared interfaces)
supabase/ migrations/
Getting Started
Prerequisites
Installation
git clone https://github.com/Osayeedjaber/tajwater.git
cd tajwater
npm install
Environment Variables
Copy .env.example to .env.local and fill in your values:
cp .env.example .env.local
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
RESEND_API_KEY=
RESEND_FROM_EMAIL=TajWater <orders@yourdomain.com>
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_COMPANY_PHONE=
NEXT_PUBLIC_COMPANY_EMAIL=
Database
Run the schema in your Supabase SQL Editor:
# Open supabase_schema.sql and run it in Supabase Dashboard → SQL Editor
Run
npm run dev # Development server
npm run build # Production build
npm run start # Serve production build
npm run lint # ESLint
Delivery Zones
North Vancouver · West Vancouver · Vancouver · Richmond · Burnaby · Coquitlam · Port Moody · Surrey · Delta · Langley
License
Private — all rights reserved.
HAVE SOMETHING IN MIND?