Design thinking,
shipped front-end.
I'm Raj. I design and build front-end. These are small demos that actually work, built on Next.js, React, and TypeScript. They show both halves of the job: the design thinking, and the code that ships.
- Next.js
- React
- TypeScript
- CSS / SCSS
- WCAG 2.2 AA
- Headless CMS
- REST / GraphQL
- Analytics
Six demos, six skills
Each one works. None are mockups. Each proves a different part of the role.
Design System & Component Library
Design tokens for color, type, and spacing. They feed a real component library: buttons, cards, badges, nav, and an audio player. This is the thing the job asks for twice.
Design systemsReusable componentsTokensDocumentationAccessible Audio Player
A real playlist player. Full keyboard control, screen reader support, clear focus, and AA contrast. Built for radio, podcasts, and DJ sessions.
WCAG / a11yAudio UXFront-end depthKeyboard supportHeadless CMS Content Site
Article list and detail pages built from a headless CMS at build time, with SEO tags. The data source is swappable. It runs on an open-source Git CMS now, and moves to Contentful by changing one file.
Headless CMSContentful adapterSEOAPI integrationMembership & Donation Funnel
A multi-step join flow with clear inline validation and a real submission. It also shows how I would push each member to a CRM like Salesforce or HubSpot.
Conversion UXAccessible formsCRM integrationRetentionPersonalized Dashboard & Analytics
A listener dashboard driven by sample data. Plus a first-party analytics engine I shipped on a real product, ported to TypeScript. It sorts traffic into AI, search, social, and email. No cookies, no Google.
PersonalizationAnalyticsData-driven UXPrivacy-firstAccessibility Redesign Case Study
The design thinking half. Persona, scenario, journey map, information architecture, wireframes, and before and after accessibility scores. Every artifact is built as code. No Figma needed.
UX researchJourney mappingIAWCAG audit
The demos show the stack. These products show I ship.
Live products I designed and built end to end. Front end, back end, billing, and analytics. The demos prove the stack. These prove the track record.
- Movies, Take It SlowA weekly one-on-one about a single film. Full product, live.(opens in a new tab)
- AI Pickleball Swing CheckRecord a swing, get back the one fix. Video and ML pipeline.(opens in a new tab)
- RingPilotAn AI phone number that answers your calls. SaaS with billing.(opens in a new tab)
- LawMarketing.aiYouTube Shorts and AI-search visibility for small law firms.(opens in a new tab)
More case studies at codingraj.withmagic.ai