The design is strong but implementation drifts
Translate layouts, tokens, states, and responsive behavior accurately instead of approximating the desktop mockup.
Frontend development
React and Next.js interfaces built to feel precise on every screen
I turn product requirements and design systems into responsive, accessible interfaces that hold up beyond the first demo. The work covers component architecture, application states, API integration, performance, and the final details that make a product feel coherent in production.
Problems I solve
Where I can make the biggest difference
The frontend is difficult to extend
Replace duplicated UI and tangled state with clear component boundaries, reusable patterns, and predictable data flow.
Performance and accessibility arrive too late
Build loading strategy, keyboard behavior, semantics, image handling, and Core Web Vitals into implementation decisions.
Deliverables
What you can bring me in to deliver
- Responsive React and Next.js interfaces
- Design-to-code implementation from Figma or an existing design system
- Reusable components, tokens, states, and page templates
- Server Components, client interactions, forms, and API integration
- Accessibility and keyboard-navigation review
- Core Web Vitals, bundle, image, and rendering optimisation
Development process
Clear decisions, reviewable progress, fewer surprises
- 01
Audit the experience
Review flows, screens, content hierarchy, responsive intent, states, and technical constraints before splitting components.
- 02
Define the UI system
Establish tokens, primitives, component boundaries, data contracts, and representative responsive patterns.
- 03
Build complete flows
Implement real states and interactions across viewport sizes instead of producing disconnected static screens.
- 04
Polish and verify
Test accessibility, browsers, devices, loading behavior, visual consistency, and production performance before handover.
Relevant work
Production work behind the service
Client Build
Lumination — AI Consulting & Product Studio
A custom WordPress theme built for Lumination, an AI consulting and product studio. Designed to communicate authority at a glance — sharp typography, client logo wall, and a layout built to convert high-stakes consulting leads.
View case study →
Client Build
NoteGPT — AI Note Taker for Lectures & Meetings
Custom WordPress theme for NoteGPT, an AI-powered note-taking app trusted by students at MIT, UCLA, and Purdue. The site covers the full product story — transcription, summaries, flashcards, and multi-format support across audio, video, and PDF.
View case study →
Client Build
ecomm.design — eCommerce Website Design Gallery
ecomm.design curates 4,000+ online store designs filterable by platform, category, and tech stack — a go-to resource for designers and founders building their next store.
View case study →Client perspective
“Farhan helped us turn our designs into a practical, user-friendly product. His full-stack experience was clear in the quality of the frontend, backend, and overall system structure, exactly what a brand-first studio like ours needs from a development partner.”
Mohsin Sheikh
Founder & CCO · Creative Emm
FAQ
Questions about frontend development
Can you work directly from Figma designs?
Yes. I translate design files into responsive components while resolving missing states, content behavior, accessibility details, and implementation constraints with the team.
Do you work on existing React or Next.js applications?
Yes. I can add product flows, rebuild weak areas, improve component structure, integrate APIs, or address performance and accessibility issues incrementally.
How do you handle responsive behavior?
Responsive decisions are made per component and workflow, not by shrinking the desktop page. I verify hierarchy, interaction, content density, and touch behavior across representative viewport sizes.
Start a conversation
Have a project that needs this expertise?
Send the scope, current state, timeline, and constraints. I usually reply within 1–2 business days.