PomenGo

• 

  PomenGO

Inspiration

Problem statement: Lack of transparency in auto repair industry in Malaysia Market opportunity: RM 15B+ Malaysian automotive aftermarket Pain points: Hidden fees, no proof of work, difficulty finding trusted mechanics Solution vision: "Grab for Mechanics" - transparent, trusted, technology-driven platform

What it does

Core platform features: Customer booking system with AI-powered price estimates Real-time mechanic tracking with animated map visualization Video proof system (before, during, after repair) Transparent pricing with no hidden fees Multi-role platform (Customer, Mechanic, Workshop, Admin) PWA support for mobile app-like experience Multi-language support (English, Malay, Hindi, Chinese) User journeys for each role Key differentiators: Video proof, AI diagnosis, real-time tracking

How we built it

Tech stack details: Frontend: Next.js 15 (App Router), TypeScript, React 18 UI Framework: shadcn/ui components with Tailwind CSS Styling: Custom color scheme (#180092 primary), full dark mode support Maps: Leaflet for service area visualization Animations: Framer Motion for smooth UI animations PWA: next-pwa for installable app experience Icons: Flaticon icon set Forms: React Hook Form with Zod validation Architecture: Modular monorepo structure Development approach: Mockup-first with simulated API delays Key components and their purposes

Challenges we ran into

Leaflet map initialization issues (map container already initialized error) SSR compatibility with Leaflet maps (required dynamic imports) PWA icon generation and configuration Internationalization implementation across all components Dark mode theme integration with custom color scheme Responsive design for multiple screen sizes Managing state across multiple user roles

Accomplishments that we're proud of

Complete multi-role platform with 4 distinct user interfaces Professional, investor-ready landing page Smooth animated map integration for service areas Comprehensive internationalization (4 languages) PWA implementation for mobile app experience Modern, accessible UI with shadcn/ui components Full dark mode support Responsive design across all pages Mock data system for realistic UX demonstration

What we learned

Next.js 15 App Router best practices Leaflet map integration with React PWA development and configuration Internationalization strategies for multi-language apps Component composition with shadcn/ui TypeScript type safety in complex applications Animation techniques with Framer Motion SSR considerations for third-party libraries

What's next for PomenGo

Backend integration: Supabase for database, auth, and storage Real API connections: Replace mock data with actual endpoints Payment integration: RYT Bank or other Malaysian payment gateways AI integration: Claude API for symptom diagnosis, Apify for price scraping Video validation: Byteover integration for video authenticity Real-time features: WebSocket for live tracking and chat Mobile apps: Native iOS and Android apps Expansion: Scale to more cities in Malaysia Partnerships: Integrate with workshops and auto parts suppliers Advanced features: Fleet management, subscription plans, loyalty programs

Built With

• claudeapi
• flaticon
• framermotion
• leaflet.js
• next.js
• node.js
• pwa
• react18
• shadcnui
• supabase
• tailwindcss
• typescript