Back
Year
2025
Tech & Technique
Next.js, MSW, Typescript, Tailwindcss, HeadlessUI, Framer, Zustand, MSW, Storybook
Description
FAN FAN is a football fantasy game where players assemble virtual teams and compete based on real-world player statistics.
Key Features:
Key Features:
- 🕹️ Developed 5 core game screens: Lobby, Gacha, Shop, Inventory, and Mission using ReactJS, Next.js, TypeScript, Tailwind CSS, and HeadlessUI
- 🎲 Built immersive gacha pack-opening experience with tunnel transitions, flip animations, and shining reveal effects using Framer Motion
- 🏠 Created dynamic lobby UI with intelligent button states responding to complex game conditions
- 🎯 Designed a vibrant, simple mission system with engaging animations
- 🔗 Integrated backend APIs for game data and user management
- 🗂️ Implemented global state management with Zustand
- 🧪 Established testing with MSW and documented UI components using Storybook
My Role
Frontend Developer
Led the development of all core game screens and frontend features:
Led the development of all core game screens and frontend features:
- 🕹️ Built Lobby, Gacha, Shop, Inventory, and Mission screens with ReactJS, Next.js, TypeScript, Tailwind CSS, and HeadlessUI
- 🎲 Engineered immersive gacha pack-opening with tunnel transitions, flip animations, and reveal effects using Framer Motion
- 🏠 Developed dynamic lobby UI with intelligent button states for complex game logic
- 🎯 Designed and animated mission system for engaging user experience
- 🔗 Integrated backend APIs for real-time game data and user management
- 🗂️ Managed global state with Zustand
- 🧪 Established frontend testing with MSW and documented components in Storybook