A Modern E-Commerce Solution for Local Groceries

The primary objective was to build a system that wasn't just another landing page, but a functional tool for business owners. The core challenges included:

• Content Management: Creating an intuitive way for non-developers to update products and categories.
• Performance: Ensuring high-resolution product imagery doesn't slow down the mobile experience.
• Scalability: Implementing a backend that can handle dynamic data relationships without the overhead of a traditional server.

I architected a modern web application leveraging the Vite + React ecosystem for the frontend and Supabase as the Backend-as-a-Service (BaaS).

Dynamic Data Flow with Supabase

Instead of hardcoding product data, I integrated Supabase PostgreSQL. This allows GoMart to serve real-time inventory updates.

• Database Schema: Relational design linking products to categories for efficient filtering.
• API Integration: Utilizing the Supabase JS client for seamless CRUD (Create, Read, Update, Delete) operations.

Custom-Built CMS Dashboard

I developed a dedicated administrative interface (/admin) that focuses on operational efficiency:

• Product Management: Toggle stock status, update pricing, and modify descriptions in real-time.
• Category Control: Dynamic URL slug generation and media management.

Intelligent Media Pipeline

To solve the performance bottleneck of large images, I implemented an automated Image Compression Utility:

• Tool: browser-image-compression.
• Logic: All product images are processed in the browser before being uploaded to Supabase Storage. They are downscaled (max 2400px) and quality-tuned (92% JPEG) to ensure high visual fidelity while reducing file size by up to 80%.

Key Features

• Dynamic Product Catalog: Searchable and filterable by category.
• Admin Authentication: Secure login gateway for store management.
• Automated SEO: Semantic HTML5 structure and dynamic meta tags.
• Real-time Notifications: Toast feedback for all user and admin actions.
• Optimized Assets: Lazy loading and client-side media processing.

Design & User Experience

The aesthetic of GoMart is built on a "Modern Freshness" philosophy:

• UI Framework: Custom Vanilla CSS for ultra-lightweight performance and pixel-perfect control.
• Animations: Subtle micro-interactions to guide the user journey.
• Responsiveness: A mobile-first approach ensuring the grocery shopping experience is fluid on any device.

"This project demonstrates the power of combining modern frontend frameworks with headless backend solutions to create products that are both developer-friendly and user-centric."