Frontend & Product Engineer
Selected projects in product development, design systems, AI applications, and creative web work.
- Frontend: React, Next.js, TypeScript, Tailwind
- AI: OpenAI Realtime, Voxtral, LLM output checks, evaluation
- Systems: Storybook, Orval, TanStack React Query, Zustand
- Delivery: GitHub Actions, Playwright E2E, AWS, PHP
- Creative: Framer Motion, Three.js / React Three Fiber
AI patient simulation for psychotherapy training.
RawTherapy lets therapists practise difficult conversations with simulated patients, by text or live voice, in English, German, and Spanish. Each patient has a life story, beliefs, and a way of talking, and reacts to how the therapist approaches them. I designed and built the product, including patient behaviour, the conversation interface, and reply checks.
- Demo
- On request
- My role
- Product design and full-stack development, including the React interface, simulation engine, real-time voice, AI quality checks, and evaluation workflow
- Stack
- React, TypeScript, Fastify, PostgreSQL with pgvector, Redis, OpenAI Realtime API, Voxtral, Playwright
The challenge
- Patients should react to the conversation, not follow a fixed script
- AI replies must stay in character and fit each patient’s history
- Live voice should feel natural, with little delay and reliable transcription
- If the connection drops, the conversation must stay intact, with no duplicate entries
- Feedback should point to specific moments in the session
My approach
- Defined each patient’s beliefs, personal rules, and defence mechanisms. Their responses depend on how the therapist approaches them. They may open up, withdraw, or want to end the session.
- 10 ready-made patients, plus an editor and an AI generator to create your own.
- Used earlier moments in the conversation to inform each patient’s replies.
- The therapist reflects on the session before seeing the report, so their own view isn’t shaped by the feedback. Specialists chose this order.
- Scored five counselling skills with rules instead of AI, so results stay predictable, stable, and easy to explain. The rules look at transcript features such as open questions, reflections, and advice-giving. The session goal sets the focus for practice.
- Every finding in the report cites the exact moment in the transcript, with strengths, areas to improve, and what to practise next.
Staff scheduling and workforce management.
Ordio helps businesses schedule staff and manage daily work. I worked on the scheduling and workforce screens, turning complex business rules into forms and views together with the PHP backend team. I also set up how changes are tested and released, with GitHub Actions, Playwright, and AWS Amplify.
- Live
- ordio.com
- My role
- Scheduling and workforce interfaces, automated testing, and release workflows
- Stack
- Next.js, React, TypeScript, GitHub Actions, Playwright, Docker, AWS Amplify
The challenge
- Make complex schedules and staff data easy to read
- Turn business rules into clear forms and interactions
- Let the team test changes in a real environment before release
- Keep feature testing, staging, and production releases working side by side
My contribution
- Built parts of the interfaces people use to plan staff and shifts, as part of the frontend team
- Worked with the PHP backend team to turn business rules into forms and views
- Set up AWS Amplify preview builds and Playwright tests for every pull request, so product management and customer success could test each feature on its own before release
- Built Docker workflows for staging and production, connected to the shared release pipeline
Redesigning REMONDIS NEOS for city-cleaning staff.
NEOS replaced DATAFLEET, the older software REMONDIS used for city-cleaning operations. It worked, but the interface was too small, and key functions were hard to find or hidden. I redesigned it from concept to code: I ran user tests with city-cleaning staff, shaped a clear user journey in Figma, and built it in React. Staff now need fewer clicks for their daily tasks, and their feedback confirmed it.
- My role
- Concept, UX/UI design, and frontend development
- Process
- User tests with city-cleaning staff, concept and design in Figma, built in React
- Stack
- Figma, Next.js, React, Storybook, Tailwind CSS, TanStack React Query
The challenge
- The previous DATAFLEET software needed to be modernised
- Staff needed a clear path through their daily tasks
- Every change had to work for the people using the tool every day
My approach
- User tests with about a dozen city-cleaning staff
- A user journey from the map to captured data to editing, designed in Figma
- Built with React, on a shared component library I created and documented in Storybook
- The component library was built with WCAG requirements in mind
An image-led campaign website for Leica Q.
I helped build the Leica Q campaign site for Virtue Worldwide, using image order, responsive layouts, and subtle motion to put the photography at the centre.
- Type
- Visual campaign / branded experience
- My role
- Frontend development, responsive layouts, and image presentation
My contribution
- Built layouts that give the photography room to stand out
- Adapted spacing and image placement for different screen sizes
- Used motion to support the content without distracting from it
An interactive journey along the Balkan refugee route.
For the VICE newsroom, I designed and built an interactive story that follows the Balkan route from Lesbos to Berlin. Readers move across a map of Europe, open city pages with articles, photos, and 3D terrain, and see the harsh conditions people face on their way, from winter cold in the mountains to summer heat. The site is in English and German.
- Type
- Editorial project for the VICE newsroom
- My role
- Design and frontend development
- Stack
- Next.js, React, TypeScript, Tailwind CSS, next-intl, Framer Motion, React Three Fiber
The challenge
- Turn a long, hard story into steps readers can follow
- Show numbers on people who lost their lives or went missing clearly and with care
- Give each place on the route its own sense of place
- Work in both English and German
What I built
- An interactive map of Europe with five main cities and extra stops that open short facts with sources
- A chart by cause of people who lost their lives or went missing, based on IOM Missing Migrants Project data
- City pages with an article, photos, a key number, and a 3D terrain map of the region
- A sources page listing UNHCR, IOM, Eurostat, and the Border Violence Monitoring Network
A portfolio for photography, design, and interactive experiments.
I designed and built my personal website to bring together photography, design, and interactive experiments.
- Projects
- Costa Nostra, Valencia Street, Orgullo, LIM, and other editorial and experimental photo series
- My role
- Design and frontend development
- Stack
- Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Three.js, React Three Fiber, Vercel
What I built
- Different navigation styles for different parts of the site
- Project galleries with layouts tailored to the images
- Animated transitions and interactive 3D elements
- Responsive pages for photography and editorial work
My approach
- Let each project’s images set the layout
- Used motion and interactive elements to support the editorial content
How I work.
Find the real problem first
I start with the people using the product and what slows them down, then decide what to build.
Own it from idea to release
I take features from concept and design through code, testing, and deployment.
Automate the boring parts
I set up tests, preview builds, and release pipelines so changes ship with fewer manual steps.
Use AI, then check its output
I connect AI models to real products and add checks that catch replies that go off track.