IndieHacking a Jamstack SaaS App

Slide 1

Slide 1 text

Zero to App IndieHacking a Jamstack SaaS Application by Mike Cavaliere

Slide 2

Slide 2 text

Motivation The app I'm building The stack Building the app: lessons 1. 2. 3. 4. Contents

Slide 3

Slide 3 text

Senior Engineering Strategist Full-stack polyglot (Rails, PHP, JS) ❤ JavaScript ❤ React ❤ Next.js About me

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

The App (JamShots) Upload photos, collaborate on galleries, share them privately. Create gallery Upload photos Share Bask in the glory

Slide 7

Slide 7 text

The Stack Framework Database

Slide 8

Slide 8 text

The Stack Authentication Design / UI

Slide 9

Slide 9 text

The Stack

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Photo galleries could be better Many React photo gallery plugins exist; many are out of date Currently trying out a CSS Grid approach

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Image upload architecture (Status: it's complicated)

Slide 17

Slide 17 text

Hosting Vercel: easy setup Railway: easy setup, seamless Vercel integration Free plans: perfect for bootstrapped project Note: Railway is currently us-west region only

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

next/image FTW Lazy loads automatically; helpful on galleries Needs per-image loading animation https://github.com/vercel/next.js/issues/18858

Slide 20

Slide 20 text

Next & Prisma make it super easy Database CRUD

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Challenge: Large, repetitive API code

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

The Book https://www.cutintothejamstack.com/ Walks through building the JamShots app, step-by-step Early release available now

Slide 27

Slide 27 text

Thanks for listening! @mcavaliere (we're hiring!) https://echobind.workable.com [email protected] https://www.cutintothejamstack.com/ https://echobind.com