A full-featured streetwear e-commerce experience built as a portfolio project.
🇺🇸 English | 🇧🇷 Português
- Live demo: victorhasse.github.io/vhx-store
- Backend repository: github.com/victorhasse/vhx-api
VHX Store is the frontend of a complete e-commerce ecosystem for streetwear clothing and accessories. It connects to a dedicated REST API and covers the shopping journey from product discovery and regionalized prices to Stripe checkout, order tracking, wishlist, coupons, and cashback.
The project combines software development with a custom visual identity, responsive interfaces, and practical concerns found in real online stores.
The application is a portfolio demonstration. Stripe and shipping integrations use test or sandbox environments. USD values are estimates; payments are processed in BRL.
- Product catalog with category filters and real-time search
- Product details with color, image, size, and stock variants
- Shopping cart with quantity management and stock validation
- Wishlist synchronized with the authenticated account
- Related-product recommendations
- Responsive skeleton loading and interface feedback
- Address validation and shipping quotes through Melhor Envio
- Coupon validation and discount calculation
- Stripe Elements checkout in sandbox mode
- Secure order total calculated by the backend
- Order confirmation and customer order history
- Status tracking from payment confirmation to delivery
- Carrier, tracking code, tracking link, and shipping timestamps
- VHX Cash cashback balance and transaction history
- Portuguese and English interfaces with browser-language detection
- Brazil and United States regional preferences
- BRL prices and estimated USD conversion
- Regionalized clothing sizes, measurements, and dates
- Registration and login with JWT authentication
- User profile and persisted account session
- Protected customer and administrator routes
- Product, variant, color, and image management
- Coupon creation and management
- Administrative order management and shipment updates
| Technology | Purpose |
|---|---|
| React 19 | Component-based user interface |
| Vite 8 | Development server and production build |
| React Router 7 | Client-side routing and protected pages |
| Tailwind CSS 4 | Utility-first styling |
| Context API | Authentication, cart, wishlist, region, and currency state |
| Axios | REST API communication |
| i18next | Portuguese and English localization |
| Stripe.js | Secure payment form and PaymentIntent confirmation |
| Vitest | Unit and context tests |
- The customer selects a product variant and adds it to the cart.
- The app validates the address and requests available shipping services.
- An optional coupon is validated by the API.
- The backend revalidates products, prices, variants, and stock.
- Stripe processes the test payment in BRL.
- The order is confirmed and becomes available in the order history.
- The administrator can add tracking details and update fulfillment status.
- After delivery, eligible VHX Cash is released to the customer.
- Node.js 22 or later
- npm
- The VHX API running locally
- Stripe test publishable key
git clone https://github.com/victorhasse/vhx-store.git
cd vhx-store
npm install
cp .env.example .env
npm run devThe development server is normally available at http://localhost:5173/vhx-store/.
VITE_API_URL=http://localhost:3333/api
VITE_STRIPE_PUBLIC_KEY=pk_test_your_key_hereNever commit real API keys or secrets.
| Command | Description |
|---|---|
npm run dev |
Starts the Vite development server |
npm run build |
Creates the production build |
npm run preview |
Previews the production build locally |
npm run lint |
Runs ESLint |
npm test |
Runs the Vitest suite once |
npm run test:watch |
Runs tests in watch mode |
npm run deploy |
Builds and publishes dist to GitHub Pages |
src/
├── assets/ # Logo and visual assets
├── components/
│ ├── layout/ # Navbar and Footer
│ ├── products/ # Reusable product components
│ ├── profile/ # Profile and cashback sections
│ └── ui/ # Shared interface components
├── context/ # Auth, cart, wishlist, region, and currency state
├── hooks/ # Reusable UI hooks
├── i18n/ # Configuration and PT/EN translations
├── pages/
│ ├── admin/ # Products, coupons, options, and orders
│ └── ... # Storefront, checkout, account, and orders
├── services/ # API and external-service clients
└── utils/ # Product-variant utilities
Use Stripe's standard test card in the sandbox checkout:
Card number: 4242 4242 4242 4242
Expiry: any future date
CVC: any three digits
Do not use real card information.
| Homepage | Products page |
|---|---|
 |
 |
| Cart | Payment summary |
 |
 |
| Checkout | Order confirmation |
 |
 |
The frontend is hosted on GitHub Pages. The production bundle is generated by Vite and published from the dist directory.
Developed by Victor Hasse as a portfolio project.
This project is licensed under the MIT License.