Web3 EdTech Platform MVP — Frontend Development & API Co-Design
A first-release Web3 education platform MVP where I served as the sole frontend engineer, covering UI implementation, Web3 onboarding, API endpoint co-design, and Prisma schema adjustments. The wallet-to-certificate flow was implemented as one continuous journey, with clarity for non-technical users considered throughout.
Period: Apr 2023 – Apr 2024
Related Services:
Where this experience applies
Relevant to early-stage product engagements where requirements continue to evolve and frontend implementation needs to connect UX decisions with technical constraints.
- Clarify what should be included in an MVP
- Adjust requirements and API design alongside implementation
- Make complex flows easier for first-time users to follow
Overview
A 0-to-1 Web3 education platform where I led the entire frontend as the sole frontend engineer. The work extended from accessible UI implementation and Web3 onboarding into API endpoint co-design, Prisma schema adjustments, state management, and selected backend logic.
Context
The client was preparing the first public MVP release of a Web3 education platform that issued blockchain-based learning certificates. Despite being the initial release, the product included wallet integration and certificate issuance from the start, requiring onboarding that non-technical users could follow and recovery paths for failed or interrupted processes.
Challenge
The challenge was to implement understandable Web3 onboarding within a distributed team working with evolving specifications, while keeping wallet login and certificate issuance connected as one flow across failure states, network mismatches, and returning sessions.
- Make Web3-specific actions such as wallet connection and signing understandable to non-technical users
- Respond to changes in external tools and evolving product specifications
- Provide recovery paths for failed transactions and network mismatches
- Keep wallet login and certificate issuance connected as one user flow
- Maintain shared technical and product understanding across time zones
Approach & Contribution
Frontend & UI Implementation
- Led the frontend architecture and implementation using Next.js, TypeScript, and React
- Translated Figma designs into accessible and consistent React components
- Created reusable components and flexible data-fetching patterns to support future feature expansion
API, Data Flow & State Management
- Co-designed API endpoints and adjusted the Prisma schema around frontend UX and data flow requirements
- Chose between Context API, local state, localStorage, NextAuth sessions, and Prisma on GCP based on data sensitivity and persistence needs
- Implemented selected API logic in Node.js and refined response structures for frontend use
Web3 Onboarding & Recovery
- Integrated wallet connection, signing, and smart contract interactions using MetaMask, Wagmi, and Viem
- Connected wallet login and certificate issuance as one continuous user flow
- Handled failed transactions, network mismatches, retries, and re-entry
- Implemented automatic re-triggering of certificate issuance on revisit when appropriate
Testing & Basic SEO
- Wrote unit tests for key components using Jest and React Testing Library
- Focused testing on simple, isolated logic where external integrations made broader testing difficult
- Implemented meta tags, sitemap generation, and semantic HTML with Next.js
- Applied the heading structure defined by the CEO across pages
Async Collaboration & Decision Support
- Collaborated asynchronously with the CEO, CTO, who also served as the backend engineer, and designer using Slack, GitHub, Figma, and Notion
- Used flow diagrams and written records to keep evolving specifications and decisions visible across time zones
- Surfaced technical trade-offs early and proposed alternatives and fallback approaches with their advantages and disadvantages
Design & Implementation Highlights
Web3 Flow for Non-Technical Users
Wallet connection and certificate issuance were organized as one continuous experience, with each step designed to make the required action and current state understandable.
Coordinating UX and Data Structure
API responses, data storage, and persistence behavior were adjusted around the UI state transitions, connecting frontend UX requirements with an implementable data structure.
Recovery from Failures and Returning Sessions
The flow accounted for failed transactions, network mismatches, retries, and returning sessions, allowing users to resume the process after an interruption.
Decision-Making in a Distributed Team
Flow diagrams and async documentation kept specification changes and technical decisions traceable across time zones.
Outcome
- Implemented wallet connection and certificate issuance as one flow, including handling for failed transactions, network mismatches, and returning sessions
- Built a reusable and extensible frontend foundation around the product’s UX requirements and expected feature expansion
- Used Notion, Slack, and flow diagrams to maintain cross-functional alignment across time zones and evolving specifications
- Surfaced technical trade-offs and alternative approaches early, helping the team make prioritization decisions as requirements changed
Notes
- The frontend role extended beyond interface implementation into API design, data flow, recovery behavior, and decision support
- A substantial part of the work involved turning evolving requirements into flows that could be implemented across frontend and backend
- In a distributed early-stage team, written decisions and explicit trade-offs were as important to delivery as the implementation itself