Senior Product Designer and Front End Engineer
I design it.
Then I build
it for real.
I'm Raj. I do both halves of this job. I draw the user journey, design the system, then write the React that ships it. Below are six small products. Each one runs in your browser right now. None are mockups. Each one proves a part of what this role needs.
A portfolio that actually runs.
Six working demos. Open any one.
- Next.js
- React
- TypeScript
- CSS / SCSS
- WCAG 2.2 AA
- Headless CMS
- Contentful
- REST / GraphQL
- Analytics
- Node.js
The work
Six demos. Six skills.
Each one works in the browser right now. None are mockups. Open any of them.
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
Proof
And these actually shipped.
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)
The fit
Why I fit this role.
What this kind of role needs, and what I already build.
- Design systems
You want a reusable component library. I build token driven systems that stay consistent and theme in one step.
- Accessibility
Every demo here clears WCAG 2.2 AA. Keyboard, focus, contrast, and reduced motion are built in from the start.
- Headless CMS
I work in headless content. Contentful drops in behind one adapter, with no page changes.
- Membership and CRM
Public media runs on members. I build join flows that convert and hand off clean to Salesforce or HubSpot.
- Privacy first analytics
I ship first party, cookieless tracking. It even catches the AI answer engines most tools miss.
- Design and code, one hire
I draw the journey, then write the React that ships it. You hire one person, not two.
Get in touch
Let's build
your next chapter.
One person who can design the experience and ship the front end. That is the whole pitch. Take a look, then let's talk.
More work at codingraj.withmagic.ai