Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IndieHacking a Jamstack SaaS App

IndieHacking a Jamstack SaaS App

A talk I originally gave at Prisma Day (https://www.prisma.io/day).

"Mike has been building a collaborative photo gallery app with Next.js, Prisma, Cloudinary, Chakra-UI, NextAuth.js and other tools. In this talk you'll learn about parts of this great stack that made development a breeze, and the parts that took a bit of grit."

Mike Cavaliere

July 01, 2021
Tweet

More Decks by Mike Cavaliere

Other Decks in Programming

Transcript

  1. Motivation Ship a product; teach how to make libs work

    together; Wanted to teach people to build a SaaS Scratching my own itch with tools I like Needed a better way to collab on kid photos w/wife Satisfy selfish need to teach Wanted to write a tech book *Not another TODO list app* Something less generic
  2. The App (JamShots) Upload photos, collaborate on galleries, share them

    privately. Create gallery Upload photos Share Bask in the glory
  3. Authentication One-click signup in minutes Easy to setup, paste some

    JS & API keys Tons of providers Customizable == https://bit.ly/next-auth-intro NextAuth Intro Articles (3-part series)
  4. User Interface Chakra & Chakra-Templates FTW Easy layout Copy and

    paste templates, adjust No designer required! Doesn't need to be perfect for first release / MVP
  5. Photo galleries could be better Many React photo gallery plugins

    exist; many are out of date Currently trying out a CSS Grid approach
  6. Async multiple file upload Had to custom build solution Frontend

    and backend pieces Fun AF to build, but non-trivial effort Had to use combination of Cloudinary APIs to get best performance: Node API + REST API
  7. Hosting Vercel: easy setup Railway: easy setup, seamless Vercel integration

    Free plans: perfect for bootstrapped project Note: Railway is currently us-west region only
  8. Image API Synchronizing image in DB with image in Cloudinary

    Mash-up and filter data in the Next.js API route May need to save some Cloudinary info offline (image width / height) to reduce API requests
  9. next/image FTW Lazy loads automatically; helpful on galleries Needs per-image

    loading animation https://github.com/vercel/next.js/issues/18858
  10. Next.js serverless functions designed to be simple; no built-in API

    architecture REST-ish worked well for this (simple) data model 3 core DB entities not tons of functionality wasn't central to what I wanted to teach in book NestJS, Apollo Server would work well for bigger projects Next.js API Architecture
  11. Summary Next.js / Prisma + other libs === awesome stack

    DX / App perf Some missing OSS libs would help Next.js multi-file upload / recent photo gallery Think about your API's needs Look for code reuse patterns Custom middleware functions