E-Learning Platform
Interactive e-learning modules with real-time collaboration, built for TAK EduTech.
- Role
- Hybrid front-end developer, TAK EduTech
- Period
- Apr 2025 — present
- Stack
- Next.js, React, TypeScript, Tailwind CSS, WebSocket, Zod, GraphQL, REST
High-fidelity Figma designs shipped as typed, responsive modules with WebSocket collaboration.
Brief
TAK EduTech needed interactive e-learning modules where learners can work together in real time, built from detailed Figma designs and integrated with the existing backend.
Real-time collaboration
Collaboration features run over WebSocket, so activity from other participants appears in the module as it happens rather than on refresh.
Type safety at the edges
Every payload crossing the network boundary is validated with Zod, and the UI is typed end to end, which keeps design fidelity and data integrity in the same review.
- 01Figma framesHigh-fidelity designs for each lesson type.
- 02Typed componentsTailwind components with strict TypeScript props.
- 03Zod boundaryREST and GraphQL payloads validated on arrival.
- 04WebSocket collaborationParticipants see each other’s activity as it happens.
Interface
Figma frames translated into responsive, accessible Tailwind components that hold up across lesson types.
State
Module progress and collaboration presence kept in sync between participants without blocking the reading flow.
Data
WebSocket events for real-time collaboration, REST and GraphQL endpoints for content, every payload validated with Zod.