Successfully reported this slideshow.
Your SlideShare is downloading. ×

IndieHacking a Jamstack SaaS App.pdf

IndieHacking a Jamstack SaaS App.pdf

Download to read offline

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.

The talk was streamed on #PrismaDay | June 30th, 2021

Video:
https://meetupfeed.io/talk/zero-to-app-indie-hacking-a-jamstack-saa-s-mike-cavaliere-prisma-day-2021

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.

The talk was streamed on #PrismaDay | June 30th, 2021

Video:
https://meetupfeed.io/talk/zero-to-app-indie-hacking-a-jamstack-saa-s-mike-cavaliere-prisma-day-2021

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

IndieHacking a Jamstack SaaS App.pdf

  1. 1. Zero to App IndieHacking a Jamstack SaaS Application by Mike Cavaliere
  2. 2. Motivation The app I'm building The stack Building the app: lessons 1. 2. 3. 4. Contents
  3. 3. Senior Engineering Strategist Full-stack polyglot (Rails, PHP, JS) ❤️JavaScript ❤️React ❤️Next.js About me
  4. 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. 5. The App (JamShots) Upload photos, collaborate on galleries, share them privately. Create gallery Upload photos Share Bask in the glory
  6. 6. The Stack Framework Database
  7. 7. The Stack Authentication Design / UI
  8. 8. The Stack
  9. 9. Building the App: Takeaways, Fun Parts, Hard More Fun Parts
  10. 10. 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)
  11. 11. 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
  12. 12. Photo galleries could be better Many React photo gallery plugins exist; many are out of date Currently trying out a CSS Grid approach
  13. 13. 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
  14. 14. Image upload architecture (Status: it's complicated)
  15. 15. Hosting Vercel: easy setup Railway: easy setup, seamless Vercel integration Free plans: perfect for bootstrapped project Note: Railway is currently us-west region only
  16. 16. 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
  17. 17. next/image FTW Lazy loads automatically; helpful on galleries Needs per-image loading animation https://github.com/vercel/next.js/issues/18858 🎉 🎉
  18. 18. Next & Prisma make it super easy Database CRUD
  19. 19. 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
  20. 20. Challenge: Large, repetitive API code
  21. 21. Solution: Middleware Functions Article: https://hoangvvo.com/blog/nextjs-middleware
  22. 22. Solution: Middleware Functions Article: https://hoangvvo.com/blog/nextjs-middleware
  23. 23. 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
  24. 24. The Book https://www.cutintothejamstack.com/ Walks through building the JamShots app, step-by-step Early release available now
  25. 25. Thanks for listening! @mcavaliere (we're hiring!) https://echobind.workable.com cutintothejamstack@echobind.com https://www.cutintothejamstack.com/ https://echobind.com

×