All Projects
PROJECT
Lead Frontend Developer

Coffee Tea

A virtual interview preparation platform built with Next.js and TypeScript, combining real-time video sessions, mentor matching, payments, and progress tracking into a modern coaching and mock interview experience.

View LiveAll Projects

Tech Stack

Next.jsTypeScriptTailwind CSSFramer MotionFirebaseCloud FunctionsFirestoreWebRTCStripeReact
Coffee Tea 1
Coffee Tea 2

Status

Production Ready

Type

Enterprise platform

Architected and led development of a Next.js platform with TypeScript, achieving 1.8s average page load times and 99.9% uptime.

Engineered real-time mock interview experiences using WebRTC, supporting large-scale video-based preparation sessions.

Implemented Stripe-powered booking and payment flows for session scheduling and monetization.

Designed responsive UI experiences with Tailwind CSS and Framer Motion to improve engagement across devices.

Built mentor matching and supporting workflow logic on top of Firebase services.

Optimized video and application performance to reduce call drops and improve session reliability.

Coffee Tea

Overview

Coffee Tea is a virtual interview preparation platform that connects candidates with realistic mock interview experiences, mentor guidance, and structured progress tracking. The product focused on making interview prep more interactive, confidence-building, and measurable than traditional static study tools.

Business Context

Most interview preparation tools provide generic content but fail to reproduce the pressure, pacing, and feedback quality of real interviews. Coffee Tea aimed to solve that gap by combining live sessions, matching logic, and a polished product experience into one platform.

Key product needs included:

  • ›low-latency real-time interview sessions
  • ›mentor matching and scheduling workflows
  • ›secure payment and booking experiences
  • ›progress visibility and actionable feedback loops
  • ›responsive UI for users practicing across multiple device types

What I Built

  • ›Led frontend architecture and delivery using Next.js and TypeScript.
  • ›Built the real-time interview experience on top of WebRTC, supporting interactive mock interview sessions.
  • ›Implemented Stripe-based booking and payment flows for paid mentoring and scheduled sessions.
  • ›Designed an engaging product UI with Tailwind CSS and Framer Motion for a polished, modern experience.
  • ›Used Firebase, Cloud Functions, and Firestore to support matching, session coordination, and real-time platform data.
  • ›Improved performance and stability across session-heavy workflows to reduce drops and keep the experience responsive.

Architecture Highlights

Real-Time Interview Experience

The platform centered on live, low-latency interactions that felt close to actual interview environments. That meant prioritizing video reliability, intuitive controls, and smooth state transitions before, during, and after sessions.

Matching and Scheduling

Mentor and candidate coordination required flexible scheduling and matching workflows. The system supported pairing logic, booking flows, and structured follow-up experiences after sessions.

UX and Engagement

Because interview prep is emotionally demanding, the interface emphasized clarity, encouragement, and momentum. Responsive layouts and polished motion helped make repeated practice feel approachable.

Outcomes

  • ›supported large-scale mock interview activity with real-time session experiences
  • ›improved product engagement with a polished and responsive frontend system
  • ›enabled monetized booking workflows through integrated payment experiences
  • ›created a strong foundation for structured preparation and mentor-led coaching

Engineering Takeaways

Coffee Tea demonstrated that real-time products succeed when technical reliability and emotional UX both receive equal attention. For practice-driven tools, trust comes from smooth sessions, clear flows, and feedback that feels immediate and actionable.