Table of Contents
About this Beta
The What and Why
What you’ll learn in this book
Who this book is for
What you should know before reading this book
Tools and libraries we chose and why
Conventions used in this book
The app we’ll be building
Laying Our Foundation
System Prerequisites
Setting up our environment
Folder Structure
Setting up Chakra-UI
Configuring Prisma
Building a Full-Stack Screen
How we’ll build our first screen: steps
Creating our first database table
Seeding the database
Creating our dashboard API endpoint
Starting our dashboard page
Adding some visual elements with Chakra-UI
Shipping to Production
Ship, Ship, Ship - Going to Production
Our hosting providers
How deployment will work
Configuring our setup for deployment
Push the red button: let’s deploy! 🚀
Git branch strategy
Full-Stack Gallery CRUD
Gallery CRUD
Planning Gallery API endpoints
Structure of Our CRUD Endpoints
Gallery Creation API Endpoint
Gallery Retrieval API Endpoint
Gallery Update API Endpoint
Gallery Deletion API Endpoint
Planning Gallery CRUD UI
The GalleryListItem Component
The GalleryCreateModal Component
The GalleryEditModal Component
The GalleryDeleteDialog Component
Creating an API Layer
Creating a Reusable Error Component
The Connected Dashboard
Connecting the GalleryCreateModal and ErrorAlert
Connecting the GalleryEditModal
Enabling Gallery Deletion
Photo Gallery and Image Uploads
Image Architecture Planning
Configuring Cloudinary
Important Cloudinary Links
Configuring Cloudinary
Adding Image Support to Our Database
Building the Photo Gallery Page
DRYing up API Routes With Custom Middleware
Building Photo API Endpoints
Adding the Front-End API Layer
Transforming iOS-Specific File Formats
Adding Single-File Image Uploads to the Gallery Editor
Adding Photo Deletion to the Gallery Editor
Photo Gallery Sharing
Adding Public Gallery Routes
Planning for UI Reuse
Separating Gallery Editor and Public Gallery
Adding Gallery Sharing
Authentication and Access Control
Overview: Authentication and Access Control
Configuring our hosting providers for authentication
How authentication will work
How access control will work
About next-auth
Creating & Configuring OAuth Provider Accounts
Installing and Configuring next-auth
Requiring authentication with our screens
Requiring authentication in our API endpoints
Restricting users to resources they control
Changing navbar state based on whether user is logged in
$$$: Payment Processing w/Stripe
Loading Stripe Dependencies
Paid / Unpaid User Access
How Checkout Flow Will Work
Creating & Configuring a Stripe Account For Subscriptions
Configuring Stripe Locally & on Vercel
Adding a Stripe API Endpoint
Connecting the UI to Stripe Checkout
Saving Stripe Info to Associate With Users
Restricting Access For Unpaid Users in the API
© 2022 Mike Cavaliere. All rights reserved