Work
This is a showcase of some projects I've worked on. See something that you like? Feel free to get in touch.
Deca
Deca is a digital art platform, to discover and collect beautiful digital objects. It's a go-to link for artists and collectors to showcase their work and interact with the community.
I joined them as a Frontend Engineer, working on the user-facing product. Tasks include implementing new full-stack features, prototyping and improving UX by conducting user-research interviews, migrating legacy code and building a custom internal UI library.
Stack
Full TypeScript codebase, with Next.js, tRPC, Prisma and TailwindCSS.
User Interface
Most base UI elements are based on Radix headless primitives for accessibility and DX.
Soon to be visually tested in a custom integrated Storybook.
Production site
Liveroom
Liveroom is an idea that emerged during a 3-day hackhaton, hosted by the product agency Mozza in sunny Lisbon ☀️. The goal was to build a product with a team composed of Micka (Product Design) and Basile (Full-stack Engineer).
Why Liveroom?
Product demos are boring, Liveroom lets you instantly join your customer in your product with live cursors, video calls and interactions. Think Figma's powerful real-time collaboration, but for any product. Follow along!
Stack
Elixir's LiveView and TailwindCSS.
Production site
Mansa
Mansa is a French lending company for small-to-medium businesses (SMEs) and independent workers.
I joined them as the first Frontend employee, implementing from scratch the Frontend architecture, a shared custom Design-System, internal & user-facing products, hired and onboarded a team of 6 full-time Frontend Engineers.
Stack
Full TypeScript codebase, the Frontend stack evolved around React and Next.js, in a Domain Driven Design (DDD) architecture across the stack.
User Interface
The Design System shared component library followed the Atomic Design methodology with visual testing and playground in Storybook.
Most documentation regarding the Design System was held in Figma, more specifically regarding UI components and design tokens.
Most UI elements were based on Radix headless primitives for accessibility and DX.
Data flow
TanStack Query (previously
named React-Query) was used for fetching API data and synchronizing it, handling
cache invalidation/revalidation and mutations. Synchronous local state being
mainly handled by React's useState() and useContext().
Form and payload validation was done with Zod, to guarantee type-safety and runtime validation (TypeScript's static type-checking not being enough to guarantee data sanity and prevent bugs).
Testing
Working in Financial products requires confidence and a good amount of testing. Unit Tests were done using Jest and Testing Library.
Integration and end-to-end tests were made using Cypress, which was a very convenient tool to mock backend APIs and focus on the Frontend flow, without having to spin the whole stack and containers.