ABKHD Store is a high-performance, modern ecommerce platform built with Astro 5 and Appwrite. It focuses on delivering a premium shopping experience for tech enthusiasts, with support for high-quality video previews, seamless card payments, and a powerful administrative dashboard.
Development Team - Lycan-Xx Says hi.. 👋🏽 (: 👾
Production: https://abkhdstores.com.ng
- Framework: Astro 5 (Static Site Generation with Server-Side Rendering)
- Backend-as-a-Service: Appwrite (Database, Storage, Authentication)
- Styling: Tailwind CSS
- Interactions: Vanilla JS + React Components
- Payments: Squad (Nigerian Payment Gateway)
- Deployment: Cloudflare Pages
- 🎥 Video Support: Products support high-quality video uploads with automatic thumbnail generation.
- 💾 Upload Caching: Automatic caching of uploaded media files to prevent data loss on network failures or page refreshes.
- 📤 Sequential Uploads: Media files upload sequentially with individual progress feedback, allowing retry of failed uploads.
- 🗑️ Bulk Operations: Multi-product selection for bulk delete and export to CSV.
- 🔐 Admin Panel: Secure administrative area for managing products and orders.
- 🛒 Dynamic Cart: Persistent shopping cart with real-time updates.
- 💳 Secure Checkout: Integrated with Squad for safe and easy transactions (Card, Bank Transfer, USSD).
- 🌓 Dark Mode: Premium dark mode support with system preference detection.
- 📱 Mobile Share: Mobile-first share button with desktop clipboard fallback.
- 🔍 SEO Ready: Open Graph meta tags for social media sharing.
- 🛍️ Checkout Flow: Multi-step checkout (Details → Payment → Confirmation) with order summary.
- 📍 Delivery Areas: Support for Yola and Jimeta with delivery fees.
- 💬 WhatsApp Order: Alternative ordering via WhatsApp for customers who prefer manual orders.
ABKHD-online-store/
├── src/
│ ├── pages/
│ │ ├── index.astro # Homepage
│ │ ├── shop.astro # Product listing
│ │ ├── checkout.astro # Multi-step checkout
│ │ ├── about.astro # About page
│ │ ├── contact.astro # Contact page
│ │ ├── login.astro # Customer login
│ │ ├── products/
│ │ │ └── [id].astro # Product detail
│ │ ├── admin/
│ │ │ ├── index.astro # Dashboard
│ │ │ ├── products.astro # Product management
│ │ │ ├── orders.astro # Order management
│ │ │ └── login.astro # Admin login
│ │ └── api/
│ │ ├── squad-initiate.ts # Payment initiation
│ │ └── squad-webhook.ts # Payment callback
│ ├── lib/
│ │ ├── appwrite.ts # Appwrite client
│ │ ├── squad.ts # Squad payment API
│ │ ├── cart.ts # Cart utilities
│ │ ├── upload-cache.ts # Upload caching
│ │ ├── stock-manager.ts # Stock management
│ │ └── utils.ts # Utility functions
│ ├── components/
│ │ ├── layout/ # Header, Footer
│ │ ├── ui/ # Reusable components
│ │ └── cart/ # Cart components
│ └── layouts/
│ ├── Layout.astro # Main layout
│ └── AdminLayout.astro # Admin layout
├── public/
│ └── assets/logo/ # Brand logos
├── scripts/
│ ├── setup-appwrite.ts # Appwrite setup
│ ├── create-admin.ts # Admin creation
│ └── verify-setup.ts # Setup verification
└── package.json
- Node.js v20+
- Yarn 4 (Berry)
- Appwrite Cloud account
- Cloudflare account
- Clone the repository:
git clone https://github.com/Lycan-Xx/ABKHD-online-store.git cd ABKHD-online-store - Install dependencies:
yarn install
-
Create a
.envfile in the root directory:PUBLIC_APPWRITE_ENDPOINT=https://fra.cloud.appwrite.io/v1 PUBLIC_APPWRITE_PROJECT_ID=your_project_id PUBLIC_APPWRITE_DATABASE_ID=abkhd_db PUBLIC_APPWRITE_COLLECTION_PRODUCTS=products PUBLIC_APPWRITE_COLLECTION_ORDERS=orders PUBLIC_APPWRITE_BUCKET_IMAGES=product-images PUBLIC_SQUAD_PUBLIC_KEY=your_squad_public_key PUBLIC_SQUAD_SECRET_KEY=your_squad_secret_key # For Cloudflare Pages # Optional for local development: # SQUAD_SECRET_KEY=your_squad_secret_key
-
Run the automated Appwrite setup script:
npx tsx scripts/setup-appwrite.ts
-
Create your admin account:
npx tsx scripts/create-admin.ts admin@yourdomain.com yourpassword "Your Name"
yarn devThis project is optimized for Cloudflare Pages.
- Connect your repository to Cloudflare Pages.
- Set the build command:
yarn build - Set the output directory:
dist - Add your environment variables in the Cloudflare Dashboard under Settings > Environment Variables:
PUBLIC_APPWRITE_ENDPOINTPUBLIC_APPWRITE_PROJECT_IDPUBLIC_APPWRITE_DATABASE_IDPUBLIC_APPWRITE_COLLECTION_PRODUCTSPUBLIC_APPWRITE_COLLECTION_ORDERSPUBLIC_APPWRITE_BUCKET_IMAGESPUBLIC_SQUAD_PUBLIC_KEYPUBLIC_SQUAD_SECRET_KEY(for Cloudflare Pages deployment)
Important: Do NOT include a wrangler.toml file in your repository. Including it will lock the Dashboard's Environment Variables section and prevent you from adding plain text variables. If you need Wrangler functionality, add secrets via the CLI instead.
This project uses Squad as the payment gateway for Nigerian customers. Squad supports:
- Card payments (Visa, Mastercard, Verve)
- Bank transfers
- USSD payments
- Direct bank account debits
- Get your API keys from Squad Dashboard
- For Cloudflare Pages deployment, add
PUBLIC_SQUAD_SECRET_KEYas a plain text environment variable in Cloudflare Dashboard - The public key (
PUBLIC_SQUAD_PUBLIC_KEY) is used client-side for the checkout UI - For local development, you can also set
SQUAD_SECRET_KEYin your.envfile
- Admin Path:
/admin - Login: Use the credentials created via the
create-adminscript. - Features:
- Create/Edit products with support for multiple images and videos.
- Upload caching prevents data loss on network failures.
- Sequential uploads with individual progress feedback.
- Bulk delete and export products to CSV.
- View and manage customer orders.
- Toggle product visibility and featured status.
- 🚀 New Checkout Flow: Complete redesign with multi-step checkout (Details → Payment → Confirmation)
- 📍 Delivery Areas: Added support for Yola (₦1,000) and Jimeta (₦2,000) delivery
- 💬 WhatsApp Orders: Added alternative ordering via WhatsApp for customers
- 🛡️ Dashboard Variables Fix: Removed wrangler.toml to enable plain text environment variables in Cloudflare
- 🔧 Payment Fix: Resolved Squad payment initialization issues by using import.meta.env for environment variables
- Stock management system to prevent overselling
- Improved order processing with webhook support
- Enhanced mobile responsiveness
- Better error handling and logging
If you encounter any issues or have questions, feel free to reach out to the development team.
This project is licensed under the MIT License - see the LICENSE file for details.