UMKMVerse

Indonesia has over 64 million MSMEs contributing 61% to GDP, yet they struggle with limited capital access, trust issues, and fragmented stakeholder connections. During a visit to a local coffee shop, the owner shared: "I have great products but banks reject my loans due to 'improper' financial records, while managing 5 WhatsApp groups for suppliers!" This sparked our idea to create an all-in-one platform connecting UMKMs, investors, suppliers, and distributors.

What We Learned

Technical Skills:

React.js advanced patterns (custom hooks, context API)
Role-based routing with protected routes
Data visualization with Recharts
Mobile-first responsive design with Tailwind CSS

Business Knowledge:

Financial metrics (ROI, profit margins, CAGR)
Alternative credit scoring for MSMEs without traditional credit history:

Soft Skills:

User empathy through 15+ interviews
API contract-first development
Agile methodology with sprint planning

How We Built It

Phase 1 - Research (Week 1-2):

Conducted user interviews with UMKM owners, investors, suppliers
Created system architecture and API contracts
Designed PostgreSQL database schema

Phase 2 - Design System (Week 3-4):

Built reusable component library using Atomic Design
Chose Tailwind CSS for utility-first styling
Established color palette (Blue for trust, Green for growth)

Phase 3 - Development (Week 5-10):

Implemented multi-step registration flow for 5 roles
Created role-based dashboards with lazy loading
Built interactive charts for financial analytics
Prepared WebSocket integration for real-time features

Phase 4 - Optimization (Week 11-12):

Reduced bundle size by 60% through code splitting
Improved accessibility (ARIA labels, keyboard navigation)
Optimized chart rendering with memoization

Challenges We Faced

Challenge 1 - State Management: Prop drilling became messy. Solution: Implemented React Context API for clean global state management.

Challenge 2 - Chart Performance: Recharts lagged with 1000+ data points. Solution: Applied data sampling, virtualization, and memoization - improved Time to Interactive from 5.8s to 2.3s (60% faster).

Challenge 3 - Backend Integration: Frontend finished before backend APIs. Solution: Defined clear API contracts upfront and used mock data for parallel development.

Challenge 4 - Responsive Design: Sidebar overlapped on mobile. Solution: Built separate mobile menu with conditional rendering using useMediaQuery hook.

Challenge 5 - File Upload UX: Users confused about requirements. Solution: Added progressive validation, real-time preview, and clear error messages.

Key Achievements