← All work
FULL-STACKLive2024
julefu-bnb
Full-stack BnB booking site with the works — auth, card payments, real-time calendar, Cloudinary gallery, full SEO. Live and operating.
- Role
- Lead + full-stack
- Duration
- 2024
- Reading
- 2 min read
Stack
Next.js 15TypeScript 5Prisma 6PostgreSQLNextAuth.jsStripeCloudinaryFramer Motion
Product Shots
SCREENSHOTS · COMING SOON
Screenshots coming soon. Drop captures into public/works/<slug>/ and add a screenshots array to the mdx frontmatter.
public/works/julefu-bnb/01.pngThe owner had run a BnB for years on phone calls and Google Forms. Every peak season meant overbookings and missed messages. julefu-bnb digitized the entire flow: search, view, pick dates, pay by card, get a confirmation email, manage from a single admin — done.
Problem
- Phone + Google Forms led to constant overbooking and missed messages
- Owner had no time to babysit inquiries — needed self-serve checkout
- Existing booking platforms take 15-20% — owner wanted to keep 100%
Solution
Next.js full-stack + Stripe + Prisma end-to-end:
- Real-time calendar lock: FullCalendar UI; PG transactions guarantee no race-condition double-booking.
- Stripe Checkout: Cards + Apple Pay; funds go directly to owner's Stripe — zero platform fee.
- Cloudinary gallery: Owner self-uploads room photos; CDN + responsive sizing free.
- NextAuth multi-auth: Google / Email magic link, with admin/visitor permission tiers.
- Full SEO: sitemap, JSON-LD (LodgingBusiness schema), dynamic OG image.
Stack
- Frontend: Next.js 15 App Router + TypeScript 5 + Tailwind CSS + Framer Motion
- Backend: Next.js Server Actions + Prisma 6.3 + PostgreSQL
- Auth: NextAuth.js (Google + Email magic link)
- Payment: Stripe Checkout + webhook
- Media: Cloudinary (auto CDN + responsive image)
- Calendar: FullCalendar 6
- Deploy: Vercel
Outcomes
- Live and operating
- Owner escaped platform fees — roughly 20% revenue uplift
- Admin simplified to "one person can run it" — no extra staff
- Lighthouse Mobile 95+, SEO 100
Lessons
- Server Action transaction boundaries: Booking + Stripe charge aren't in the same DB transaction — designed idempotent webhook compensation.
- Cloudinary beats DIY: Two weeks of sharp + S3 work, or 30 minutes with Cloudinary plus a free CDN. Easy call.
- Clients don't care about tech, they care about workflows: Every demo, the client asked "how do I update prices?" — so we built a spreadsheet-style admin instead of a fancy dashboard. Better received.