Context
What We Built
- User-created listings with structured property details and media uploads.
- Stripe-based checkout flow for secure online payments.
- CMS-backed content model using PayloadCMS for flexible listing management.
- Responsive UI designed from Figma components and translated to reusable frontend blocks.
- Cloud media storage and deployment setup for stable asset delivery.
Architecture and Stack
- Frontend: Next.js + React for the listing flow, browsing pages, and checkout UI.
- Content model: PayloadCMS to keep listing structure and content updates manageable.
- Payments: Stripe for payment sessions and transaction safety.
- Design workflow: Figma to define the UX before implementation.
- Infrastructure: Coolify deployment and Cloudflare R2 media storage.
Build Process
- Domain modeling first - I defined listing and media structures early to avoid expensive schema rewrites later.
- Design-to-code pipeline - I converted Figma sections into reusable frontend components instead of one-off page markup.
- Payments integration - I added Stripe after the listing flow was stable, so payment edge cases were isolated and easier to test.
- Deployment hardening - I moved media to object storage and validated the app in production-like hosting.
Challenges and Learnings
- Ensuring payment reliability required careful handling of session state and failure paths.
- Large listing media needed storage separation to keep app responses fast.
- Keeping UX simple while supporting both owners and renters pushed us toward clearer component boundaries.