A modern, full-stack e-commerce application built with React, TypeScript, and Firebase. This application features a complete shopping experience including product browsing, cart management, stripe payments, and automated email notifications.
- Storefront: Responsive product listing and detail pages.
- Cart System: Real-time cart management using Zustand.
- Checkout: Secure payment processing with Stripe Elements.
- Backend:
- Firebase Firestore: Database for products, orders, and users.
- Cloud Functions: Serverless backend for payment intents, webhooks, and email triggers.
- Notifications: Automated emails via Resend (Welcome, Confirmation, Shipping, Low Stock).
- Inventory: Automatic stock tracking and low-stock alerts.
- Frontend: React, TypeScript, Tailwind CSS, Vite.
- Backend: Firebase (Functions, Firestore, Hosting).
- Payments: Stripe API.
- Emails: Resend API.
- Node.js (v18 or v22)
- Firebase CLI (
npm install -g firebase-tools)
git clone <your-repo-url>
cd MiswakApp
npm install
cd functions && npm installFrontend (.env):
VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...Backend (functions/.env):
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
RESEND_API_KEY=re_...
ADMIN_EMAIL=admin@example.com# Frontend
npm run dev
# Backend (Emulators)
firebase emulators:startThis project is configured for Firebase Hosting and Cloud Functions.
# Login to Firebase
npx -p firebase-tools firebase login
# Deploy all services
npx -p firebase-tools firebase deployNote: Ensure your Firebase project is on the Blaze (Pay-as-you-go) plan for Cloud Functions.
- Firestore Rules: Secured to allow public product reading but restricted writing. Admin access is restricted to configured email domains.
- Stripe Webhook: Verifies signatures to prevent spoofing.
src/: Frontend React application.functions/: Backend Cloud Functions.firestore.rules: Security policies.docs/: Project roadmap and documentation.
Built by Antigravity & User.