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."

B311713ff6de02a7b88c2e9f63d2ea45?s=128

Mike Cavaliere

July 01, 2021
Tweet

Transcript

  1. Zero to App IndieHacking a Jamstack SaaS Application by Mike

    Cavaliere
  2. Motivation The app I'm building The stack Building the app:

    lessons 1. 2. 3. 4. Contents
  3. Senior Engineering Strategist Full-stack polyglot (Rails, PHP, JS) ❤ JavaScript

    ❤ React ❤ Next.js About me
  4. 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
  5. None
  6. The App (JamShots) Upload photos, collaborate on galleries, share them

    privately. Create gallery Upload photos Share Bask in the glory
  7. The Stack Framework Database

  8. The Stack Authentication Design / UI

  9. The Stack

  10. Building the App: Takeaways, Fun Parts, Hard More Fun Parts

  11. 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)
  12. 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
  13. None
  14. Photo galleries could be better Many React photo gallery plugins

    exist; many are out of date Currently trying out a CSS Grid approach
  15. 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
  16. Image upload architecture (Status: it's complicated)

  17. Hosting Vercel: easy setup Railway: easy setup, seamless Vercel integration

    Free plans: perfect for bootstrapped project Note: Railway is currently us-west region only
  18. 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
  19. next/image FTW Lazy loads automatically; helpful on galleries Needs per-image

    loading animation https://github.com/vercel/next.js/issues/18858
  20. Next & Prisma make it super easy Database CRUD

  21. 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
  22. Challenge: Large, repetitive API code

  23. Solution: Middleware Functions Article: https://hoangvvo.com/blog/nextjs-middleware

  24. Solution: Middleware Functions Article: https://hoangvvo.com/blog/nextjs-middleware

  25. 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
  26. The Book https://www.cutintothejamstack.com/ Walks through building the JamShots app, step-by-step

    Early release available now
  27. Thanks for listening! @mcavaliere (we're hiring!) https://echobind.workable.com cutintothejamstack@echobind.com https://www.cutintothejamstack.com/ https://echobind.com