Index

As this ebook edition doesn't have fixed pagination, the page numbers below are hyperlinked for reference only, based on the printed edition of this book.

Symbols

404 page

building 77, 78

A

action 175

any type 21

API client

configuring 107, 108

installing 107, 108

API endpoints

request handlers, configuring for 94

API, consuming in application 117

dashboard job 119

dashboard jobs 119

job, creating 120, 122

public job page 118, 119

public organization 117, 118

API layer, jobs feature 112

defining 112

create job 114-116

get job details 113, 114

get jobs 112, 113

API layer, organizations feature 116

details, obtaining 116, 117

API requests

validating, with Zod 198

application

building 9

data model, overview 11

planning, requirements 9

technical decisions, exploring 12-14

technical improvements 191

application, planning

functional requirements 10

non-functional requirements 10

application, technical improvements

API responses, validating with Zod 198

caching 191-193

code scaffolding 196

form inputs, validating with Zod 196, 198

Next.js 13 198

query key factories, using 194, 196

React Query hydration, for SSR 193, 194

server-side rendering 191-193

array types 22

authentication 13

authentication features, building

authenticated user, obtaining 132

logging in 128-130

logging out 130-132

authentication system

features, building 128

implementing 127

overview 127, 128

resources, protecting from unauthenticated user 133-135

B

Button component

implementing 38-40

stories, creating for 49-51

C

Chakra UI 13, 35

setup 35-37

client-side rendering 56, 57

code scaffolding 196

components

building 37, 38

Button 38, 40

documenting 48

InputField 40, 41, 42

issues 45

Link 42-44

preview, on landing page 44, 45

Component Story Format (CSF) 49

requisites 49

Continuous integration/continuous deployment (CI/CD) 173, 174

create job page 76

building 76, 77

cross-site scripting (XSS) attacks 6

Cypress 14

D

dashboard job details page 73

building 73-75

dashboard jobs page 71

building 71-73

data model

configuring 91-94

overview 11

deploy job

creating 181-184

E

Emotion 6

end-to-end testing 163

dashboard flow 163-167

public flow 167-170

end-to-end tests 14

ESLint 9, 25

configuration 25

event 175

F

form inputs

validating, with Zod 196, 198

functional requirements 10

organization admin dashboard 10

publicly facing part 10

G

generics 24, 25

GitHub Actions 174

action 175

environment variables, providing to 180

events 175

jobs 175

runner 175

workflows 174

GraphQL API 199, 200

H

Husky 27

I

Incremental Static Regeneration 191

InputField

implementing 40-42

integration testing 148

dashboard job page 151, 152

dashboard jobs page 149, 150

job creation page 152, 154

login page 161, 162

performing 148, 149

public job page 158-161

public organization page 155-157

integration tests 14

intersection types 23

J

JavaScript 19

Jest 14

job 175

Jotai 6

L

layout component

example 59

ways, for adding to pages 60-62

Link component

implementing 42-44

linting 25

lint-staged 27

M

micro frontend architecture 200

benefits 201

drawbacks 201

tools 201

mocking

benefits 83

uses 83

Mock Service Worker (MSW) 83, 84

configuring, in browser and server 84

configuring, for server 85

Configuration overview 84

first handler, writing 88-90

running, in application 86-88

model-view-presenter (MVP) 83

monorepo

features 200

MSW configuration, browser version 84

initialization 85

worker, configuring 85

MVP stage, jobs feature improvements

job applications, adding 189, 190

jobs feature improvements 187, 188

jobs information, adding with markdown editor 189

jobs information, updating with WYSIWYG editor 189

jobs, adding in draft state 188

jobs, deleting 188

jobs, updating 188

lists of data, filtering 191

lists of data, paginating 191

organization improvements 189

user registration, adding 191

N

Next.js 17

application structure 18, 19

benefits 17

rendering strategies 56

routing 55

SEO 58

Next.js 13 198

non-functional requirements 10

notification

implementing 135

integrating 141, 142, 144

store, creating 136-138

UI, creating 138-140

using 141-143

O

object-relational mapper (ORM) 91

object shape type 22

P

pages 55

404 page 77, 78

building 62

create job page 76, 77

dashboard job details page 73-75

dashboard jobs page 71-73

public job details page 67-70

public organization details page 62-66

pipeline, for deploying

configuring, to Vercel 179

pipeline configuration, for testing 176

code checks job 176, 177

end-to-end testing job 177, 178

pre-committing checks 26, 27

Prettier 9, 26

configuration 26

primitive types 21

project structure 12

feature folders 30-32

overview 28-30

proofs of concept (POCs) 83

public job details page 67

building 67-69

public organization details page 62

building 62-66

Q

query key factories

using 194-196

R

React application

architectural challenges, exploring 3

architecture, benefits 2, 3

bad architectural decisions 7, 8

building, challenges 3, 5-7

good architectural decisions 8, 9

React Context API 6

React Query

configuring 110, 111

need for 108-110

React Query hydration

for SSR 193, 194

React Testing Library 14

Recoil 6

Redux with Redux Toolkit 6

rendering strategies, Next.js

client-side rendering 56, 57

incremental static regeneration 12, 56

server-side rendering 12, 56-58

static site generation 12, 56

request handlers configuration, for API endpoints

API utils 95

Auth handlers 96, 97

Jobs handlers 98-101

Organizations handlers 101-103

routing, Next.js 55

runner 175

S

server-side rendering (SSR) 56-58

drawbacks 70

React Query hydration 193, 194

soft delete 189

state management, types

form state 13

global state 13

local state 13

server state 13

URL state 13

static site generation 56

stories

creating, for Button component 49-51

Storybook 46

benefits 46

configuration 46-48

scripts 48

Styled Components 6

styling 13

T

Tailwind 6

technical decisions

authentication 13

exploring 12, 14

project structure 12

rendering strategy 12

state management 13

styling 13

testing 14

testing 14

end-to-end testing 163

integration testing 148

unit testing 147, 148

TypeScript 9, 19

any type 21

array types 22

configuration 20

generics 24

intersection types 23

object shape type 22

primitive types 21

React components 25

unions 23

unknown type 22

usage 21

TypeScript handbook

reference link 25

U

union type 23

unit testing 147

use case 147, 148

unit tests 14

unknown type 22

V

Vercel

account 179

GitHub integration, disabling for 179

pipeline, deploying to 179

project, linking to 180

W

workflow 174

Z

Zod

used, for validating API requests 198

used, for validating form inputs 196, 198

Zustand 6, 13