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

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