Gran Blue Project - Marine Species Database & Community Platform Gran Blue Project provides detailed species information, educational quizzes, partner organization networks, and contributor profiles, aimed at marine conservation education and awareness. Role: Frontend Developer Frontend: - Nuxt 4.0 (Vue 3) with TypeScript and Composition API - TailwindCSS 4.x with DaisyUI for modern, responsive UI - Pinia for centralized state management - Vite for optimized build performance Data Visualization: - Leaflet for interactive location maps - Three.js for 3D species relationship visualizations - D3.js for data-driven graphics Additional Libraries: - Joi for validation - Day.js for date handling - Lucide Icons for UI iconography --- What I Built Complex State Management Architecture - Designed and implemented centralized Pinia stores managing auth, species data, partners, and subscription flows - Built custom API client (app/utils/api.ts) with automatic token injection, maintenance mode detection, and intelligent error handling - Implemented trial credit system with real-time tracking and cookie-based persistence Interactive 3D Visualizations - Created immersive 3D species relationship tree using Three.js with custom node/edge components - Integrated Leaflet maps for species location tracking and partner organization visualization - Developed custom D3.js data visualizations for species taxonomy Quiz System with Leaderboard - Built complete quiz flow: start/resume/retry logic with state persistence - Real-time leaderboard with score calculation and ranking system - Designed responsive UI handling complex quiz states and user interactions Payment Integration - Integrated Xendit payment gateway for subscription management - Created multi-tier subscription plans with dynamic pricing UI - Handled payment callbacks and subscription status tracking Custom Component Library - Built reusable core components (inputs, buttons, modals, tooltips) with TypeScript prop validation - Designed responsive layouts using Tailwind utility classes - Implemented custom Perfect Scrollbar integration for enhanced UX --- Technical Challenges Solved Challenge: Complex API Error Handling - Problem: Backend returns various error formats (strings, objects, arrays) across different status codes - Solution: Built unified error handler (api.ts:260) that normalizes errors and displays contextual toast notifications, while gracefully handling auth failures and maintenance mode Challenge: Trial Credit System - Problem: Need to track free user interactions without backend calls on every click - Solution: Implemented cookie-based credit tracking synced with Pinia store, with automatic deduction API calls only when necessary Challenge: 3D Tree Performance - Problem: Rendering large taxonomic trees with Three.js caused performance issues - Solution: Implemented lazy loading for tree nodes, optimized render cycles, and created custom tooltip system to minimize re-renders Challenge: State Persistence Across Sessions - Problem: Quiz progress and auth state lost on refresh - Solution: Architected cookie-based state hydration system (auth-store.ts:174) that restores state 500ms after mount, ensuring smooth UX without flashing --- Highlights - Type Safety: Full TypeScript implementation with 30+ custom interfaces - File-Based Routing: Leveraged Nuxt's routing for 25+ pages with protected routes - Responsive Design: Mobile-first approach with custom breakpoints - Performance: Lazy loading, code splitting, and optimized asset delivery - Clean Architecture: Feature-based component organization with clear separation of concerns