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
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.
6. The App (JamShots) Upload photos, collaborate on galleries,
share them privately.
Create gallery Upload photos Share Bask in the glory
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.
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
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
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