Hiazee: AI-Powered Plant Marketplace
Bridging the gap between nature and technology with intelligent plant identification and a seamless e-commerce experience.
Discover, identify, and shop for your favorite plants using advanced image recognition.
Hiazee is a specialized e-commerce platform designed to help plant enthusiasts identify unknown species and purchase them directly. Developed as a capstone project for the Bangkit Academy program, it combines machine learning with a modern retail experience.
Core Value
The application solves the common problem of discovering a beautiful plant but not knowing its name or where to buy it. By integrating AI-driven scanning, users can instantly get detailed information and local recommendations.
What Makes It Stand Out
What makes this project stand out is its modular architecture and the seamless integration of complex state management (Recoil) with server-side data fetching (React Query) to provide a smooth, app-like performance.
AI Plant Identification
Intelligent image recognition that identifies plant species from user uploads to provide instant botanical insights.
Location-Based Recommendations
Smart product suggestions tailored to the user's region, specifically optimized for the Indonesian climate and market.
Modular E-commerce Core
A robust shopping system featuring product exploration, detailed specifications, and a secure checkout flow.
Responsive Multi-Surface UI
A meticulously crafted interface that adapts dynamically to all device sizes using custom breakpoint logic.
Landing Page
Polished hero section featuring interactive swiper modules and the core AI-scanning proposition.
Product Discovery
Dynamic product grid with skeleton loading and localized recommendation engine.
Plant Identification
Seamless upload interface designed for instant AI feedback and botanical data retrieval.
Feature-Sliced Modular Architecture
Organized the codebase into self-contained modules, significantly improving maintainability and scalability.
Advanced State Orchestration
Successfully synchronized local UI state via Recoil with remote server state via React Query for a zero-latency feel.
Optimized Image Delivery
Implemented Next.js Image optimization and skeleton loaders to maintain high performance during data-heavy product loads.
Type-Safe API Integration
Enforced strict TypeScript interfaces across the entire data layer using Zod and custom Axios interceptors.
Responsive Layout Synchronization
Managing complex grid layouts that required manual breakpoint detection for optimal column distribution across varied screen sizes.
State Persistence & Security
Integrating NextAuth with a custom backend while ensuring persistent sessions and secure API requests through Bearer token injection.
Frontend Architecture
Learned how to structure large-scale Next.js applications using a modular approach to prevent technical debt.
AI UX Patterns
Gained experience in designing user flows that involve asynchronous AI processing without sacrificing user engagement.
Performance Optimization
Mastered the use of server-side data fetching strategies to reduce initial bundle size and improve Core Web Vitals.
Project Info
Highlights
- AI-Integrated Shopping Flow
- Modern Modular UI Architecture
- Premium Responsive Design System
- Optimized Server State Management
