> For the complete documentation index, see [llms.txt](https://jordachlab.gitbook.io/onyxstore/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jordachlab.gitbook.io/onyxstore/readme.md). # OnyxStore 🛒 **A professional, dark‑themed e‑commerce storefront built with Nuxt 3 & Tailwind CSS.** *** ## 🐋 SonarCloud Code Analysis | **Code & Duplication** | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) | | **Quality & Security** | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) | | **Issues & Maintainability** | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=bugs)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=HardMachinesCorporation_OnyxStore\&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=HardMachinesCorporation_OnyxStore) | *** ## 🌐 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** ```bash git clone https://github.com/YourUsername/your-ecommerce-app.git cd your-ecommerce-app ``` 2. **Install dependencies** ```bash 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** ```bash pnpm dev ``` 5. **Build & Preview** ```bash 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](https://nuxt.com) * **Styling**: [Tailwind CSS](https://tailwindcss.com) + Headless UI * **Payment**: [Stripe PaymentElement](https://stripe.com/docs/payments/payment-element) * **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: ```bash 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](https://github.com/HardMachinesCorporation/OnyxStore/blob/main/LICENSE/README.md). *** ## 📚 Codes documentation [![Documented on GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook\&logo=gitbook\&logoColor=ffffff\&label=\&labelColor=5c5c5c\&color=3F89A1)](https://jordachlab.gitbook.io/onyxstore/) ## 📧 Contact Built with 💜 by Jordach MAKAYA. For questions or feedback, reach out at . --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://jordachlab.gitbook.io/onyxstore/readme.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.