Trippie

⚠️ Cold start warning: The backend Node server runs on Render’s free plan, so if it’s been inactive, it may take a short time to spin up before the preview responds.

When I set out to build Trippie, my goal was to create a responsive, interactive way for users to plan trips day by day, moving activities around with ease. On the surface, it might seem simple, drag and drop a few cards, but making it feel smooth, intuitive, and reliable was a surprisingly complex challenge.When I set out to build Trippie, my goal was to create a responsive, interactive way for users to plan trips day by day, moving activities around with ease. On the surface, it might seem simple, drag and drop a few cards, but making it feel smooth, intuitive, and reliable was a surprisingly complex challenge.When I set out to build Trippie, my goal was to create a responsive, interactive way for users to plan trips day by day, moving activities around with ease. On the surface, it might seem simple, drag and drop a few cards, but making it feel smooth, intuitive, and reliable was a surprisingly complex challenge.

Drag-and-Drop

One of the biggest hurdles was implementing drag-and-drop with proper ordering. I wanted users to be able to move activities between days and reorder them within a day, all while maintaining a consistent position for each activity. I settled on fractional indexing, which lets us insert activities between others without having to reindex the entire list. This meant a user could drag an activity anywhere, and it would just work, whether dropped at the start, end, or somewhere in the middle.

Smooth animations

I opted to go with Framer Motion for this project (now motion.dev), for the nice animations. This can be seen all over the app, from dragging and dropping, to opening modals, to error messages.

Challenges & learnings

Building Trippie taught me that features that look simple on the surface often hide tricky engineering problems. Getting drag-and-drop right meant not only handling UI state, but also making sure the database could cope with reordering without grinding to a halt. That’s how I landed on fractional indexing, which turned out to be a neat solution to a problem I’d never had to solve before.