Buy Now

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

Supported by

eb-logo-gradient-black-textCreated with Sketch.

© 2022 Mike Cavaliere. All rights reserved