NexaCart – Marketplace Storefront
A complete Philippine marketplace storefront and commerce administration dashboard — covering product discovery, cart and checkout flows, mock payment processing, and a full admin control panel.
All app data runs locally in mock mode and is saved in browser localStorage. No real payment or personal data is transmitted. Prices are displayed in Philippine pesos.
Problem Statement
Helping Filipino shoppers find trusted products in one clear storefront
Online shoppers in the Philippines often deal with fragmented marketplaces — inconsistent product information, unclear pricing, and no unified place to browse categories, compare items, and complete a purchase with confidence.
NexaCart brings those experiences into one responsive storefront. Shoppers can browse by category, search globally, filter and sort the catalog, view product galleries and variants, manage a wishlist, and complete a validated three-step checkout with Philippine-peso pricing. Administrators can manage the full product catalog, control inventory and promotions, update order statuses, and review sales performance through a dedicated dashboard.
Shopping workflow
Product discovery, cart management, and checkout connect the shopper experience to the admin control panel.
- DiscoverBrowse categories, search, and filter the catalog
- SelectView product details, variants, and reviews
- CheckoutValidate cart, apply promotions, and process mock payment
- ManageTrack orders and administer the catalog and inventory
Frontend Screenshots
Features
- Marketplace home with hero banners, category shortcuts, featured deals, and recently viewed items
- Responsive global and catalog search with URL-aware navigation and keyword highlighting
- Catalog filtering, sorting, and pagination across tech, home, travel, and wellness categories
- Product galleries with variant selection, reviews, and stock-aware add-to-cart controls
- Persistent wishlist and shopping cart with quantity controls and stock protection
- Validated three-step checkout with promotion codes, mock card processing, and order confirmation
- Customer registration, sign-in, profile management, and order history
- Admin overview dashboard with sales charts, low-stock alerts, and order status updates
- Product archive and restore, category and brand management, and inventory stock controls
- Promotion and discount code management with customer and admin controls
- Sales reports, service revenue breakdowns, and CSV export
- Responsive layouts with loading, empty, success, error, out-of-stock, and confirmation states
Tech Stack
The application is built with React 19 and TypeScript, using strongly typed commerce models and reusable UI components from shadcn/ui. Vite and Vinext handle the development and Cloudflare Worker-compatible production build. Tailwind CSS 4 drives the responsive design system, and Recharts powers the admin sales charts. A typed service layer in localStorage separates the UI from persistence, with automatic migration from previous data versions. Core commerce workflows are covered by Vitest.
My Role
Application Developer — Solo Build
I designed and developed NexaCart as a solo project, covering storefront architecture, interface design, typed commerce models, admin tooling, automated testing, and deployment preparation.
On the storefront, I built a responsive marketplace interface with a hero home page, category navigation, global search, catalog filtering and sorting, product galleries with variant selection, a persistent wishlist, and a cart drawer. I used shadcn/ui components and Tailwind CSS 4 to maintain a consistent design system across all pages.
For the checkout and commerce logic, I implemented a validated three-step checkout flow with promotion code support, stock protection, mock card processing, and order confirmation. A typed service layer in localStorage handles all catalog, cart, wishlist, order, and customer data, with automatic migration from previous storage versions.
I built the admin dashboard with sales charts powered by Recharts, low-stock alerts, product archive and restore, category and brand management, inventory controls, order status updates, customer management, and promotion configuration. All prices are displayed in Philippine pesos using a shared formatter.
I also covered quality assurance and deployment, writing Vitest tests for catalog browsing, search, cart and wishlist persistence, checkout validation, mock authentication, order management, and inventory rules. I verified the Cloudflare Worker-compatible Vite production build and prepared the project for OpenAI Sites deployment.