Product engineer & creative developer

I turn computer gibberish into experiences that help teams scale the things that matter.

Pairing motion-led interfaces with resilient engineering so every launch feels like a flagship moment - fast, polished, and measurable.

Available for Q1 '25 collabs
Currently shipping2024

AI-accelerated product surfaces for teams that iterate weekly.

Motion-led dashboards, marketing sites, and live prototypes that plug into your stack instantly.

Next.jsGSAPFramer Motion

Metrics

+46%

Conversion lift

Focus

Design systems that feel alive.

👋 Pleased to meet ya, I'm a
software developer based in

I enjoy building everything
across the full stack, but what I'm most passionate about
is creating something
Cambridge, UK

Currently Shipping

What I've beenWorking On

A rotating mix of client work, product experiments, and tooling upgrades. Scroll through the rest of the page to see the latest shipped pieces and in-progress ideas.

Bingeable main
logo
Livora 360
A social media for film lovers and filmmakers.
App store
downloads
user sign-ups
avg rating/5
The Front End
All about the UI and client logic. Take a closer look at how I approached the front end with real production code snippets.
ReactExpoClerkTailwindDiamond
Custom Hook
Infinite UI
Comments
Context
Custom Hooks
In this snippet, I've created a custom hook that fetches a film/tv Review data. This encapsulates the fetch logic and all of its related code like refetch and fetchMore for cursor based fetching which separates concerns from the rest of the parent component.
Infinite Scrolling
Here's a simple use of a FlatList UI which supports infinite scrolling, when a user reaches the bottom if there is more data, it'll fetch more and append it to the FlatList.
Comment Interactions & Optimistic UI Updates
Working on this was a bit of a headache with lots of states to keep track of, whether upvoting or replying to a comment. I'm also optimistically updating the UI so it provides a better UX, so once a user interacts (ex. upvotes a comment), the thumbsUp icon will be highlighted immediately, while updating this in my DB after. On a refresh, this data will be synced up.
Global State Management with useContext
I usually try to keep things as minimal as possible, and only reaching for tools or methods when I need to. In this example I needed to keep the state of the number of unread notifications so when a user reads it then goes back to the homepage, the UI updates correctly. However, when keeping track of the state inside the notification page and the user router.backs(), this data gets lost. This is a perfect scenario to use useContext to manage global state which can be accesse from any component. I'll look into Zustand or Redux for more complicated needs in the future.
The Back End
A robust backend is needed to support the front end. Here are snippets from my production server code.
Bingeable mainBingeable mainBingeable mainBingeable main
Bingeable main
Bingeable main
Bingeable main
Bingeable main
Cursor Based Pagination for Infinite Scrolling
Using Prisma ORM with PostgreSQL, I'm using cursor based pagination so I dont fetch repeated data for the infinite scrolling feature in the front end. This is accomplished by using the id of the final item fetched and using that as a cursor with skipping the first element to avoid repeats.
In Memory Store Caching with Redis
In this example, I'm using Redis to store in-memory some YouTube data. This data doesn't change too frequently so I store this with a TTL of 6 hours. Since the Redis is running on a separate EC2 instance, this will work fine with auto scaling my main server.
AWS S3 to Store User Uploaded Media with a CDN
When a user uploads any media (ex. a profile picture), this gets stored in a S3 bucket while using Cloudfront CDN to quickly deliver the asset when being used.
Parsing Text to Extract a URL Preview Thumbnail
Using Regex patterns, I've parsed the html of a URL to first try and get a Open Graph protocol if it exists, and if not I grab the first <img> tag and it's src URL
Challenges
Here were some of my biggest challenges and takeaways from building this app.
Challenge #1: Building a full production app with a framework and tools I've never used before.
Approach: Watch videos, read documentation and adapt as I go. Mistakes were made along the way but that's the best way to learn. I spent a good amount of time researching which options to choose when it came to the framework and tools.

For example, since I wanted to eventually distribute to both iOS and Android, I chose to go with React Native rather than writing native code for different platforms. I was confident with this decision since React Native has become well supported through the years and thought it was a safe choice.
Challenges
Here were some of my biggest challenges and takeaways from building this app.
Challenge #2: Building the algorithm for user's feeds.
Approach: I didn't want to overcomplicate this early in the app. So for now, the feed is more chronological based, pulling data from different models such as a user's friend's activities, data from interacted movies/shows, etc.

I then sort by the date created. In certain scenarios like for 'Trending Posts', I give a weight or a score for a post based on it's interactions like how many likes, comments, reposts, then sort based on its score.

In the future as the app gains more data, I plan on improving the algorithm to suggest relevant content by utilizing more complex data structures like graphs.
logo
Livora 360
Let's take it back.
Timeline
Some
kind
words
“

I've been seeing his work for years, and he has always been thoughtful, consistent, and driven.

His passion for improvement is evident and admirable.

Brandon Perez avatar
Brandon Perez
Senior Software Developer
“

He challenges assumptions and communicates clearly, even under pressure.

You can rely on him to ship quality work on time.

Aisha Khan avatar
Aisha Khan
Product Manager
“

Collaborating with him raises the bar for the whole team.

He cares about details, users, and maintainability in equal measure.

Marco Ruiz avatar
Marco Ruiz
Engineering Lead

Tech Stack

A kinetic wall of tools I reach for when building, engineered to bounce but never collide.

HTML
CSS
SCSS
JavaScript
TypeScript
React
Next.js
Nuxt.js
Node.js
Express.js
JWT
TailwindCSS
Framer motion
GSAP
PostgreSQL
Redis
AWS
Supabase
Kafka
Azure
Docker
CI/CD