Dynamic Product Catalog
Display products from PostgreSQL with pricing, descriptions, inventory availability, categories, featured status, and product images stored through Supabase Storage.
Featured Case Study
E-Commerce / Retail Technology
Completed
Nivaroa
A full-stack e-commerce platform combining a customer storefront with a role-protected administration system for products, categories, inventory, customers, orders, and live sales analytics.
nivaroa.vercel.app
SSL
Project Information & Key Details
- Role
- Full-Stack Software Engineer
- Client Type
- Personal Project
- Industry
- E-Commerce / Retail Technology
- Duration
- 2 weeks
- Team Size
- 1 Developer
Case Study Overview
Building more than a basic online store
Many e-commerce portfolio projects stop at product listings and a shopping interface. Nivaroa was designed as a complete commerce system with both customer-facing and administrative workflows.
The project needed to handle authentication, role-based access, relational product data, inventory, customer accounts, order activity, product media, and business analytics while keeping the storefront and administration concerns clearly separated.
The goal was to build the project using patterns that reflect real production applications rather than relying on static data or a frontend-only implementation.
Case Study Overview
One commerce platform for customers and administrators
Nivaroa combines a responsive customer storefront with a dedicated admin portal backed by Supabase and PostgreSQL.
Customers can browse products, explore collections, search and filter the catalog, authenticate, and interact with store content.
Administrators have a separate interface for managing products, categories, inventory, customers, orders, fulfillment states, and sales information.
Live database records feed the administration dashboard so metrics such as revenue, order volume, inventory, customer activity, and sales trends are calculated from actual application data rather than hardcoded values.
Platform Features
Category Management
Organize the catalog using relational categories with unique slugs and support for parent-child category relationships.
Admin Product Management
Add, edit, delete, publish, feature, categorize, and manage inventory for products through a dedicated administration interface.
Authentication & Role Management
Authenticate users with Supabase Auth and separate application roles through a profiles model so customers and administrators can have different permissions.
Customer Management
View registered accounts, distinguish administrators from customers, inspect order activity, total spending, joined dates, and recent order information.
Order & Fulfillment Management
Track store orders through operational states including pending review, processing, shipped, and delivered.
Sales Analytics
Calculate revenue, monthly and yearly sales, order totals, average order value, inventory data, and sales trends from live Supabase records.
Supabase Storage
Store product media separately from relational product records and generate product image URLs for use throughout the storefront and admin portal.
Responsive Storefront
Provide a modern storefront with featured products, hero promotions, catalog search, filtering, sorting, collection browsing, and stock availability.
Visual Showcase
Interface & Product Walkthrough
Detailed views of production user journeys, UI components, and system architecture.
Nivaroa storefront showing featured electronics with product search, stock filtering, and sorting controls.#01
Nivaroa product management dashboard showing products, categories, prices, inventory, and edit actions.#02
Nivaroa admin dashboard showing revenue, orders, inventory, customers, fulfillment, and sales trends.#03
Nivaroa admin customer management showing users, roles, orders, spending, and account statistics.#04
Technical Architecture
A relational commerce architecture built around Supabase
Nivaroa uses Next.js 16 and TypeScript for the application layer, with Supabase providing authentication, PostgreSQL, and object storage.
Authentication data is managed by Supabase Auth while application-specific information such as names and roles is stored separately in the public profiles table.
Products reference categories through PostgreSQL foreign keys, while customers, orders, and order items form the transactional side of the application.
Server-side Supabase clients and authorization checks are used for protected administrative workflows, while Row Level Security provides database-level access control.
Case Study Overview
Building the platform from the data model outward
Development started with the application data model rather than the storefront UI alone.
Supabase migrations were used to create and evolve PostgreSQL tables, relationships, foreign keys, and constraints. Categories were created before products so product records could safely reference category IDs.
Authentication was then separated from authorization by allowing Supabase Auth to identify users while the profiles table stores application roles.
Once the data layer and authentication flow were stable, the admin interface was built around real CRUD operations and live metrics. The customer storefront was then connected to the same product and category data so both sides of the application share a single source of truth.
Performance & Impact
Measurable Engineering Outcomes
- 2
- Primary application experiences: customer storefront and admin portal
- 3
- Core Supabase services used: Auth, PostgreSQL, and Storage
- 4+
- Core commerce domains: products, categories, customers, and orders
- 4
- Live admin metrics including revenue, orders, inventory, customers, and sales trends
Case Study Overview
Technical Highlights
The project combines modern Next.js application architecture with relational PostgreSQL design and Supabase infrastructure.
Key engineering decisions included separating authentication from authorization, using foreign-key relationships instead of duplicating data, managing schema changes through migrations, storing product media outside the database, and deriving administration metrics from live records.
Forms use React Hook Form and Zod for typed validation, while the dashboard uses shadcn/ui and Recharts for data visualization.
FAQ
Project questions
Building an e-commerce platform or internal business system?
I build full-stack applications with secure authentication, relational databases, admin dashboards, payment-ready workflows, and scalable backend architecture.
Portfolio Showcase
Explore More Case Studies
completed
Artificial Intelligence
accessify-video
An AI-assisted video accessibility and remediation platform that transforms source video into transcripts, captions, audio descriptions, synthesized voice tracks, and remediated video through an automated processing workflow.
Live
Edtech
eQuraneKareem
A comprehensive online Quran education platform designed to connect students worldwide with Quran, Arabic, and Islamic courses through structured course discovery, tutor information, educational resources, and online enrollment.
Live
Edtech
CanadianGrad Academy
A full-stack online education platform for CanadianGrad Academy, combining course discovery, enrollment journeys, educational content, academic planning tools, and a custom administration system.