OnyxStore 🛒

A professional, dark‑themed e‑commerce storefront built with Nuxt 3 & Tailwind CSS.

🐋 SonarCloud Code Analysis

Code & Duplication

Quality & Security

Issues & Maintainability

🌐 Overview

This project is a modular, responsive, and accessible e‑commerce application featuring:

  • Authentication: login, registration & logout flows

  • Product catalog: listing and individual product pages

  • Stripe checkout: integrated PaymentElement for secure one‑time purchases

  • Dark theme: elegant palette inspired by modern UI trends

  • User feedback: smooth loading states, error/success messages, and micro‑interactions

Designed to showcase serious craftsmanship and a high‑quality user experience.

✨ Key Features

  • Authentication Pages: /login, /register, /logout

  • Product Browsing: /products, /products/[id]

  • Checkout Flow: /checkout (payment form), /payment-success, /error

  • Payment Integration: Stripe PaymentElement, secure clientSecret fetch

  • Responsive Design: mobile‑first, fluid grid layouts

  • Component Library: reusable UI components with clear API

  • Dark Mode: consistent dark palette with accent colors

🚀 Getting Started

  1. Clone the repository

    git clone https://github.com/YourUsername/your-ecommerce-app.git
cd your-ecommerce-app

  2. Install dependencies

    pnpm install

  3. Configure environment

    • Copy .env.example to .env

    • Set NUXT_PUBLIC_STRIPE_PK, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, etc.

  4. Run the development server

    pnpm dev

  5. Build & Preview

    pnpm build
pnpm run preview

🗂️ Folder Structure

├── assets/
│   └── css/main.css             # Global styles (Tailwind base)
├── components/                  # Reusable Vue components
│   ├── AppHeader.vue
│   ├── AppFooter.vue
│   ├── ProductCard.vue
│   └── LoadingSpinner.vue
├── layouts/
│   └── default.vue              # Main layout with Header/Footer
├── pages/
│   ├── index.vue                # Home / product listing
│   ├── login.vue
│   ├── register.vue
│   ├── logout.vue
│   ├── products/                # Product pages
│   │   ├── index.vue
│   │   └── [id].vue
│   ├── checkout.vue
│   ├── payment-success.vue
│   └── error.vue
├── server/api/                   # Nitro server routes
│   ├── stripe/                  # Stripe integration endpoints
│   │   ├── paymentintent.post.ts
│   │   └── webhook.post.ts
│   └── auth/                    # Authentication API (to be implemented)
├── utils/                       # Shared utilities (e.g. Zod schemas)
├── tailwind.config.js
├── nuxt.config.ts
└── README.md                    # This file

📄 Pages & Responsibilities

Page
Responsibility

/login

Display login form and handle authentication submission

/register

Display registration form and handle new user signup

/logout

Execute logout logic and redirect to home

/products

List all products with pagination/filtering UI

/products/[id]

Show detailed product information and “Add to Cart” button

/checkout

Render Stripe PaymentElement and initiate payment flow

/payment-success

Display confirmation and order summary after successful payment

/error

Show error message and recovery actions if payment fails or is canceled

📦 Tech Stack

  • Framework: Nuxt 3

  • Styling: Tailwind CSS + Headless UI

  • Payment: Stripe PaymentElement

  • API: Nuxt Nitro server routes, Zod for validation

  • State Management: Nuxt composables (e.g. useCart)

  • Icons: Heroicons, Lucide

⚙️ Usage

This project provides only the UI. You should implement the following backend logic yourself:

  • Authentication (login/register/logout)

  • Product Fetching and Cart Management

  • Server‑side API for Stripe (PaymentIntent, Webhooks)

Once these are in place, the UI will seamlessly integrate with your business logic.

🛠️ Commit Guidelines

This project comes pre-configured with the following tools to enforce commit conventions and code quality:

  • husky

  • commitizen (^4.3.1)

  • cz-git (^1.12.0)

  • eslint-plugin-useFormat (^1.0.1)

  • eslint-plugin-perfectionist (see package.json for exact version)

To create a properly formatted commit (with Husky running your lint/useFormat hooks and Commitizen guiding your message), simply run:

pnpm commit

🛡️ ESLint Configuration

This project uses a flat ESLint config powered by Antfu’s preset (@antfu/eslint-config). All rules are declared in your eslint.config.js (flat-config) useFormat, combined with Nuxt via the withNuxt() helper.

🤝 Contributing

  1. Fork the repository

  2. Create a feature branch (git checkout -b feature/YourFeature)

  3. Commit your changes (git commit -m "feat: Add ...")

  4. Push to the branch (git push origin feature/YourFeature)

  5. Open a Pull Request

Please follow the existing code style and write descriptive commit messages.

📝 License

This project is licensed under the MIT License.

📚 Codes documentation

📧 Contact

Built with 💜 by Jordach MAKAYA. For questions or feedback, reach out at thejordach@gmail.com.

Nextdocs

Last updated