FrontendPrep
A frontend interview preparation platform designed and built from scratch.
FrontendPrep is a flagship self-built platform that evaluates practical coding challenges in a live, in-browser editor. Arvind designed the system from initial layout wireframes to frontend evaluation engines, user auth systems, and SEO/analytics strategy.
Next.js · React · TypeScript · Tailwind CSS · Supabase · MongoDB · Razorpay · Google Analytics
Traditional engineering interview platforms focus heavily on backend algorithms (LeetCode), leaving a gap in evaluating design systems, CSS layouts, and component states.
Candidates struggled with implementing high-fidelity interfaces under time pressure, and companies lacked tools to test clean React architecture, API integration, and web performance optimization.
I designed a comprehensive dual-experience platform: a high-fidelity coding workspace that evaluates live layouts in real-time, paired with editorial guides addressing standard frontend patterns.
Crafted a low-friction interface prioritizing readability, responsive layout adjustments, and screen split ergonomics.
- ·Designed a custom layout editor view in Figma, optimizing workspace split proportions.
- ·Established design system foundations including clean grid grids, typography hierarchies, and status pill structures.
- ·Validated responsive layouts to ensure developers could practice coding on various devices.
Built a robust Next.js application leveraging sandboxed code compiler mechanics.
- ·Implemented state-driven preview updates using React virtual DOM handlers.
- ·Structured a Supabase backend for user authentication, dashboard analytics, and course progress.
- ·Integrated Razorpay for seamless payment checkouts and verified Google Analytics triggers.
The platform launched successfully, proving the utility of specialized web engineering tools.
- ✓Created optimized, static index paths, scoring outstanding Lighthouse web performance ratings.
- ✓Implemented detailed Google Analytics conversion triggers to evaluate funnel optimizations.
- ✓Identified usability insights through behavior metrics, resulting in direct adjustments to the coding console.
“Building FrontendPrep demonstrated that the best frontend code arises when the engineer fully understands design system mechanics, and the best designs are created with browser capabilities in mind.”