Skip to content

Gozirimdev/chize

Repository files navigation

💎 CHIZE Perfumes

CHIZE Logo

A Next-Generation Luxury Perfume E-Commerce Experience with Stellar-based Rewards.

Next.js TypeScript Tailwind CSS Stellar


📖 Overview

CHIZE is a premium perfume e-commerce platform built for modern fragrance lovers. We believe that buying your favorite scents should be rewarding — not just occasionally, but regularly. That's why every purchase on CHIZE is designed to feel valuable. Customers buy luxury scents and earn Stellar-based crypto rewards with every successful order.

This project represents a production-ready application featuring a polished storefront, a daily-use perfume catalog, a seamless cart/checkout flow, and an innovative Web3 reward layer that turns everyday purchases into long-term value.

✨ Key Features

  • 🛍️ Curated Catalog: Browse a stunning perfume catalog with detailed product insights, pricing, and potential reward amounts.
  • 🛒 Persistent Cart: Seamless shopping experience with cart state managed via browser localStorage.
  • 💳 Flexible Checkout Options:
    • Paystack: Primary NGN payment rail for fast fiat transactions.
    • Crypto & International Gateways: Extensible architecture supporting international and crypto checkouts.
  • 🎁 Web3 Rewards: A gamified "reward reveal" page delivering Stellar-based assets upon payment success.
  • 📊 Admin Dashboard: A built-in single-owner dashboard to manage orders, track inventory, and configure reward distribution rules.

🛠️ Tech Stack

  • Framework: Next.js (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS + shadcn/ui
  • Payments: Paystack
  • Blockchain: Stellar Network (via @stellar/stellar-sdk)
  • Deployment: Vercel

🚀 Getting Started

Prerequisites

Make sure you have Node.js (v18+) and npm installed.

Local Development

  1. Clone the repository:

    git clone https://github.com/Gozirimdev/chize.git
    cd chize
  2. Install dependencies:

    npm install
  3. Configure Environment Variables: Copy the example environment file and fill in your credentials.

    cp .env.example .env.local
  4. Start the development server:

    npm run dev
  5. Open http://localhost:3000 in your browser to view the storefront.

🗺️ Project Structure & Important Routes

  • /Storefront: The main landing page and product catalog.
  • /checkoutCheckout: Cart summary, shipping details, and payment selection.
  • /reward/[orderId]Reward Reveal: Interactive page where users unlock their Stellar rewards.
  • /ownerAdmin Dashboard: Secure owner area for managing the platform.

🔗 Stellar Integration

The platform includes a robust Stellar reward flow that processes transactions securely:

  • Transaction Builder: src/lib/stellar.ts constructs Stellar payment transactions when the required environment variables are present.
  • Reward Endpoint: src/app/api/rewards/stellar/route.ts handles the delivery of the cryptographic award to the user's wallet.
  • Fallback Mode: If Stellar credentials are not configured, the application safely falls back to a mock mode, returning a preview payload without attempting live blockchain transactions.

Required Stellar Environment Variables

To enable live rewards, you must configure the following in your .env.local:

  • STELLAR_ASSET_CODE
  • STELLAR_ISSUER_PUBLIC_KEY
  • STELLAR_DISTRIBUTION_SECRET

Optional but recommended:

  • STELLAR_HORIZON_URL
  • STELLAR_NETWORK_PASSPHRASE

🌍 Deployment

The application is optimized for deployment on Vercel.

  1. Push your code to your GitHub repository.
  2. Import the project into Vercel.
  3. Ensure all environment variables (from your .env.local) are added to your Vercel project settings.
  4. Deploy!

Full Environment Variables List

Required for Live Mode:

  • NEXT_PUBLIC_APP_URL
  • NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY
  • PAYSTACK_SECRET_KEY
  • STELLAR_ASSET_CODE
  • STELLAR_ISSUER_PUBLIC_KEY
  • STELLAR_DISTRIBUTION_SECRET

Optional Integrations:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • COINBASE_COMMERCE_API_KEY
  • TRIPLE_A_API_KEY
  • FLUTTERWAVE_SECRET_KEY

🧪 Verification & Code Quality

Ensure your code meets the quality standards before pushing:

# Run ESLint to check for code issues
npm run lint

# Build the project locally to catch compilation errors
npm run build

🤝 Contributing

We welcome contributions! Please see our CONTRIBUTING.md for guidelines on how to get started, report bugs, or submit pull requests.


Built with ❤️ by Gozirimdev

About

Luxury perfume storefront MVP with Next.js, Paystack/crypto checkout, and Stellar reward flow.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors