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

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