TopMart is an e-commerce platform built around a public storefront and a separate management application. The storefront is built with Next.js and TypeScript using the App Router, while the admin application manages the catalogue and exposes the API consumed by the storefront.
The project focused on building a practical commerce experience while keeping the frontend fast, search-engine friendly, and independent from the system managing the underlying catalogue.
The storefront covers the core shopping experience: customers can browse products, filter by category, size, and colour, view product details, manage a persistent cart, and pay through Paystack. There is no customer authentication on the storefront. A visitor can move from browsing to checkout without creating an account, keeping the purchase flow straightforward for a store that does not require customer accounts.
Product and billboard pages are rendered on the server, with static generation used where content can be resolved ahead of time and dynamic rendering used where request-time data is required. This allows product pages to arrive with their content already rendered rather than depending on client-side fetching before they become useful.
Search and discoverability
SEO was considered as part of the application architecture rather than added after the storefront was built.
Product and billboard routes generate their own metadata, while the sitemap is generated from the catalogue exposed by the API. As products are added or updated, their corresponding URLs can therefore be included without maintaining a separate static sitemap.
The rendering strategy also means crawlers can access complete product pages and their metadata directly, while users get meaningful content on the initial response.
The management layer
The admin application provides the tools for managing the catalogue and acts as the source of data for the storefront.
Keeping this separate from the customer-facing application makes the catalogue independent of its presentation. The storefront can be changed or replaced without rebuilding the underlying management system, and the API can support other clients as the platform grows.
The approach is similar to using a headless CMS, except the management application is purpose-built around the requirements of the commerce platform.
Engineering
The storefront uses Next.js, TypeScript, React Server Components, and Tailwind CSS. Product data that affects the initial page is resolved on the server, while client-side state is reserved for interactions that need it, particularly the cart and filtering experience.
The application is backed by a separate API and catalogue database, with Prisma used for data access and Postgres providing the persistence layer. This structure keeps responsibilities relatively clear across the system while allowing each part to evolve independently.
Open source
TopMart is open source and intended to be deployable and adaptable rather than tied to a proprietary ecosystem.
A team can use the existing storefront, customise it, or build a different client against the API. The same approach also makes it possible to develop capabilities for store owners without coupling those changes directly to the customer-facing application.
The longer-term goal is to make the platform useful beyond a single-store implementation. Analytics and deeper storefront customisation are planned so that store owners can manage more of their business without modifying the underlying code.
Multivendor commerce is the larger milestone on the roadmap, while keeping single-store deployments as a first-class use case.