├── exercises
├── 99.upgrade-v7
│ ├── FINISHED.mdx
│ ├── README.mdx
│ ├── 01.problem.v7
│ │ ├── README.mdx
│ │ ├── src
│ │ │ ├── vite-env.d.ts
│ │ │ ├── main.tsx
│ │ │ ├── styles
│ │ │ │ ├── fonts.css
│ │ │ │ └── index.css
│ │ │ ├── routes
│ │ │ │ ├── 404.tsx
│ │ │ │ └── app
│ │ │ │ │ ├── recipients
│ │ │ │ │ ├── new.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── $id.edit.tsx
│ │ │ │ │ ├── layout.tsx
│ │ │ │ │ └── marketing
│ │ │ │ │ ├── homepage.tsx
│ │ │ │ │ ├── layout.tsx
│ │ │ │ │ └── about.tsx
│ │ │ └── error-boundary.tsx
│ │ ├── public
│ │ │ ├── favicon.ico
│ │ │ ├── fonts
│ │ │ │ ├── Poppins
│ │ │ │ │ ├── Poppins-Bold.ttf
│ │ │ │ │ ├── Poppins-Thin.ttf
│ │ │ │ │ ├── Poppins-Black.ttf
│ │ │ │ │ ├── Poppins-Italic.ttf
│ │ │ │ │ ├── Poppins-Light.ttf
│ │ │ │ │ ├── Poppins-Medium.ttf
│ │ │ │ │ ├── Poppins-ExtraBold.ttf
│ │ │ │ │ ├── Poppins-Regular.ttf
│ │ │ │ │ ├── Poppins-SemiBold.ttf
│ │ │ │ │ ├── Poppins-BlackItalic.ttf
│ │ │ │ │ ├── Poppins-BoldItalic.ttf
│ │ │ │ │ ├── Poppins-ExtraLight.ttf
│ │ │ │ │ ├── Poppins-LightItalic.ttf
│ │ │ │ │ ├── Poppins-ThinItalic.ttf
│ │ │ │ │ ├── Poppins-MediumItalic.ttf
│ │ │ │ │ ├── Poppins-SemiBoldItalic.ttf
│ │ │ │ │ ├── Poppins-ExtraBoldItalic.ttf
│ │ │ │ │ └── Poppins-ExtraLightItalic.ttf
│ │ │ │ └── Source_Serif_4
│ │ │ │ │ ├── static
│ │ │ │ │ ├── SourceSerif4-Black.ttf
│ │ │ │ │ ├── SourceSerif4-Bold.ttf
│ │ │ │ │ ├── SourceSerif4-Light.ttf
│ │ │ │ │ ├── SourceSerif4-Italic.ttf
│ │ │ │ │ ├── SourceSerif4-Medium.ttf
│ │ │ │ │ ├── SourceSerif4-Regular.ttf
│ │ │ │ │ ├── SourceSerif4-BoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4-ExtraBold.ttf
│ │ │ │ │ ├── SourceSerif4-ExtraLight.ttf
│ │ │ │ │ ├── SourceSerif4-SemiBold.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Black.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Bold.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Light.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Black.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Bold.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Light.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Black.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Bold.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Light.ttf
│ │ │ │ │ ├── SourceSerif4-BlackItalic.ttf
│ │ │ │ │ ├── SourceSerif4-LightItalic.ttf
│ │ │ │ │ ├── SourceSerif4-MediumItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Italic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Medium.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-Regular.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Italic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Medium.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-Regular.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Italic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Medium.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-Regular.ttf
│ │ │ │ │ ├── SourceSerif4-ExtraBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4-SemiBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-BoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-ExtraBold.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-ExtraLight.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-SemiBold.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-BoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-ExtraBold.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-ExtraLight.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-SemiBold.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-BoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-ExtraBold.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-ExtraLight.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-SemiBold.ttf
│ │ │ │ │ ├── SourceSerif4-ExtraLightItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-BlackItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-LightItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-MediumItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-BlackItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-LightItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-MediumItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-BlackItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-LightItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-MediumItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-ExtraBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-SemiBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-ExtraBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-SemiBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-ExtraBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_48pt-SemiBoldItalic.ttf
│ │ │ │ │ ├── SourceSerif4_18pt-ExtraLightItalic.ttf
│ │ │ │ │ ├── SourceSerif4_36pt-ExtraLightItalic.ttf
│ │ │ │ │ └── SourceSerif4_48pt-ExtraLightItalic.ttf
│ │ │ │ │ ├── SourceSerif4-VariableFont_opsz,wght.ttf
│ │ │ │ │ └── SourceSerif4-Italic-VariableFont_opsz,wght.ttf
│ │ │ └── images
│ │ │ │ ├── woman-smiling-at-text.jpg
│ │ │ │ └── README.md
│ │ ├── tsconfig.json
│ │ ├── vite.config.ts
│ │ ├── .gitignore
│ │ ├── index.html
│ │ ├── tsconfig.node.json
│ │ ├── tsconfig.app.json
│ │ ├── tests
│ │ │ └── playwright.config.ts
│ │ └── package.json
│ └── 01.solution.v7
│ │ ├── README.mdx
│ │ ├── src
│ │ ├── vite-env.d.ts
│ │ ├── main.tsx
│ │ ├── styles
│ │ │ ├── fonts.css
│ │ │ └── index.css
│ │ ├── routes
│ │ │ ├── 404.tsx
│ │ │ └── app
│ │ │ │ ├── recipients
│ │ │ │ ├── new.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── $id.edit.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── marketing
│ │ │ │ ├── homepage.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── about.tsx
│ │ └── error-boundary.tsx
│ │ ├── public
│ │ ├── favicon.ico
│ │ ├── fonts
│ │ │ ├── Poppins
│ │ │ │ ├── Poppins-Black.ttf
│ │ │ │ ├── Poppins-Bold.ttf
│ │ │ │ ├── Poppins-Light.ttf
│ │ │ │ ├── Poppins-Thin.ttf
│ │ │ │ ├── Poppins-Italic.ttf
│ │ │ │ ├── Poppins-Medium.ttf
│ │ │ │ ├── Poppins-Regular.ttf
│ │ │ │ ├── Poppins-SemiBold.ttf
│ │ │ │ ├── Poppins-BoldItalic.ttf
│ │ │ │ ├── Poppins-ExtraBold.ttf
│ │ │ │ ├── Poppins-ExtraLight.ttf
│ │ │ │ ├── Poppins-ThinItalic.ttf
│ │ │ │ ├── Poppins-BlackItalic.ttf
│ │ │ │ ├── Poppins-LightItalic.ttf
│ │ │ │ ├── Poppins-MediumItalic.ttf
│ │ │ │ ├── Poppins-ExtraBoldItalic.ttf
│ │ │ │ ├── Poppins-SemiBoldItalic.ttf
│ │ │ │ └── Poppins-ExtraLightItalic.ttf
│ │ │ └── Source_Serif_4
│ │ │ │ ├── static
│ │ │ │ ├── SourceSerif4-Bold.ttf
│ │ │ │ ├── SourceSerif4-Black.ttf
│ │ │ │ ├── SourceSerif4-Italic.ttf
│ │ │ │ ├── SourceSerif4-Light.ttf
│ │ │ │ ├── SourceSerif4-Medium.ttf
│ │ │ │ ├── SourceSerif4-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4-Regular.ttf
│ │ │ │ ├── SourceSerif4-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_36pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_48pt-Bold.ttf
│ │ │ │ ├── SourceSerif4-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Black.ttf
│ │ │ │ ├── SourceSerif4_18pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Light.ttf
│ │ │ │ ├── SourceSerif4_18pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_36pt-Black.ttf
│ │ │ │ ├── SourceSerif4_36pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_36pt-Light.ttf
│ │ │ │ ├── SourceSerif4_36pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_48pt-Black.ttf
│ │ │ │ ├── SourceSerif4_48pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_48pt-Light.ttf
│ │ │ │ ├── SourceSerif4_48pt-Medium.ttf
│ │ │ │ ├── SourceSerif4-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_18pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_36pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_48pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBoldItalic.ttf
│ │ │ │ └── SourceSerif4_48pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4-VariableFont_opsz,wght.ttf
│ │ │ │ └── SourceSerif4-Italic-VariableFont_opsz,wght.ttf
│ │ └── images
│ │ │ ├── woman-smiling-at-text.jpg
│ │ │ └── README.md
│ │ ├── tsconfig.json
│ │ ├── vite.config.ts
│ │ ├── .gitignore
│ │ ├── index.html
│ │ ├── tsconfig.node.json
│ │ ├── tsconfig.app.json
│ │ ├── package.json
│ │ └── tests
│ │ └── playwright.config.ts
├── 50.upgrade-v6
│ ├── FINISHED.mdx
│ ├── README.mdx
│ └── 01.problem.v6
│ │ ├── README.mdx
│ │ ├── src
│ │ ├── vite-env.d.ts
│ │ ├── main.tsx
│ │ ├── styles
│ │ │ ├── fonts.css
│ │ │ └── index.css
│ │ ├── routes
│ │ │ ├── 404.tsx
│ │ │ └── app
│ │ │ │ ├── recipients
│ │ │ │ ├── new.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── $id.edit.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── marketing
│ │ │ │ ├── homepage.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── about.tsx
│ │ └── error-boundary.tsx
│ │ ├── public
│ │ ├── favicon.ico
│ │ ├── fonts
│ │ │ ├── Poppins
│ │ │ │ ├── Poppins-Bold.ttf
│ │ │ │ ├── Poppins-Thin.ttf
│ │ │ │ ├── Poppins-Black.ttf
│ │ │ │ ├── Poppins-Italic.ttf
│ │ │ │ ├── Poppins-Light.ttf
│ │ │ │ ├── Poppins-Medium.ttf
│ │ │ │ ├── Poppins-ExtraBold.ttf
│ │ │ │ ├── Poppins-Regular.ttf
│ │ │ │ ├── Poppins-SemiBold.ttf
│ │ │ │ ├── Poppins-BlackItalic.ttf
│ │ │ │ ├── Poppins-BoldItalic.ttf
│ │ │ │ ├── Poppins-ExtraLight.ttf
│ │ │ │ ├── Poppins-LightItalic.ttf
│ │ │ │ ├── Poppins-ThinItalic.ttf
│ │ │ │ ├── Poppins-MediumItalic.ttf
│ │ │ │ ├── Poppins-SemiBoldItalic.ttf
│ │ │ │ ├── Poppins-ExtraBoldItalic.ttf
│ │ │ │ └── Poppins-ExtraLightItalic.ttf
│ │ │ └── Source_Serif_4
│ │ │ │ ├── static
│ │ │ │ ├── SourceSerif4-Black.ttf
│ │ │ │ ├── SourceSerif4-Bold.ttf
│ │ │ │ ├── SourceSerif4-Light.ttf
│ │ │ │ ├── SourceSerif4-Italic.ttf
│ │ │ │ ├── SourceSerif4-Medium.ttf
│ │ │ │ ├── SourceSerif4-Regular.ttf
│ │ │ │ ├── SourceSerif4-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Black.ttf
│ │ │ │ ├── SourceSerif4_18pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Light.ttf
│ │ │ │ ├── SourceSerif4_36pt-Black.ttf
│ │ │ │ ├── SourceSerif4_36pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_36pt-Light.ttf
│ │ │ │ ├── SourceSerif4_48pt-Black.ttf
│ │ │ │ ├── SourceSerif4_48pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_48pt-Light.ttf
│ │ │ │ ├── SourceSerif4-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4-LightItalic.ttf
│ │ │ │ ├── SourceSerif4-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_18pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_36pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_36pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_36pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_48pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_48pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_48pt-Regular.ttf
│ │ │ │ ├── SourceSerif4-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLightItalic.ttf
│ │ │ │ └── SourceSerif4_48pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4-VariableFont_opsz,wght.ttf
│ │ │ │ └── SourceSerif4-Italic-VariableFont_opsz,wght.ttf
│ │ └── images
│ │ │ ├── woman-smiling-at-text.jpg
│ │ │ └── README.md
│ │ ├── tsconfig.json
│ │ ├── vite.config.ts
│ │ ├── .gitignore
│ │ ├── index.html
│ │ ├── tsconfig.node.json
│ │ ├── tsconfig.app.json
│ │ ├── tests
│ │ └── playwright.config.ts
│ │ └── package.json
├── 01.upgrade-v5
│ ├── FINISHED.mdx
│ ├── README.mdx
│ └── 01.problem.v5
│ │ ├── README.mdx
│ │ ├── src
│ │ ├── vite-env.d.ts
│ │ ├── main.tsx
│ │ ├── styles
│ │ │ ├── fonts.css
│ │ │ └── index.css
│ │ ├── routes
│ │ │ ├── 404.tsx
│ │ │ └── app
│ │ │ │ ├── recipients
│ │ │ │ ├── new.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── $id.edit.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── marketing
│ │ │ │ ├── homepage.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── about.tsx
│ │ └── error-boundary.tsx
│ │ ├── public
│ │ ├── favicon.ico
│ │ ├── fonts
│ │ │ ├── Poppins
│ │ │ │ ├── Poppins-Bold.ttf
│ │ │ │ ├── Poppins-Thin.ttf
│ │ │ │ ├── Poppins-Black.ttf
│ │ │ │ ├── Poppins-Italic.ttf
│ │ │ │ ├── Poppins-Light.ttf
│ │ │ │ ├── Poppins-Medium.ttf
│ │ │ │ ├── Poppins-ExtraBold.ttf
│ │ │ │ ├── Poppins-Regular.ttf
│ │ │ │ ├── Poppins-SemiBold.ttf
│ │ │ │ ├── Poppins-BlackItalic.ttf
│ │ │ │ ├── Poppins-BoldItalic.ttf
│ │ │ │ ├── Poppins-ExtraLight.ttf
│ │ │ │ ├── Poppins-LightItalic.ttf
│ │ │ │ ├── Poppins-ThinItalic.ttf
│ │ │ │ ├── Poppins-MediumItalic.ttf
│ │ │ │ ├── Poppins-SemiBoldItalic.ttf
│ │ │ │ ├── Poppins-ExtraBoldItalic.ttf
│ │ │ │ └── Poppins-ExtraLightItalic.ttf
│ │ │ └── Source_Serif_4
│ │ │ │ ├── static
│ │ │ │ ├── SourceSerif4-Black.ttf
│ │ │ │ ├── SourceSerif4-Bold.ttf
│ │ │ │ ├── SourceSerif4-Light.ttf
│ │ │ │ ├── SourceSerif4-Italic.ttf
│ │ │ │ ├── SourceSerif4-Medium.ttf
│ │ │ │ ├── SourceSerif4-Regular.ttf
│ │ │ │ ├── SourceSerif4-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Black.ttf
│ │ │ │ ├── SourceSerif4_18pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_18pt-Light.ttf
│ │ │ │ ├── SourceSerif4_36pt-Black.ttf
│ │ │ │ ├── SourceSerif4_36pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_36pt-Light.ttf
│ │ │ │ ├── SourceSerif4_48pt-Black.ttf
│ │ │ │ ├── SourceSerif4_48pt-Bold.ttf
│ │ │ │ ├── SourceSerif4_48pt-Light.ttf
│ │ │ │ ├── SourceSerif4-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4-LightItalic.ttf
│ │ │ │ ├── SourceSerif4-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_18pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_18pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_36pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_36pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_36pt-Regular.ttf
│ │ │ │ ├── SourceSerif4_48pt-Italic.ttf
│ │ │ │ ├── SourceSerif4_48pt-Medium.ttf
│ │ │ │ ├── SourceSerif4_48pt-Regular.ttf
│ │ │ │ ├── SourceSerif4-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-BoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBold.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraLight.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBold.ttf
│ │ │ │ ├── SourceSerif4-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-BlackItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-LightItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-MediumItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-ExtraBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_48pt-SemiBoldItalic.ttf
│ │ │ │ ├── SourceSerif4_18pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4_36pt-ExtraLightItalic.ttf
│ │ │ │ └── SourceSerif4_48pt-ExtraLightItalic.ttf
│ │ │ │ ├── SourceSerif4-VariableFont_opsz,wght.ttf
│ │ │ │ └── SourceSerif4-Italic-VariableFont_opsz,wght.ttf
│ │ └── images
│ │ │ ├── woman-smiling-at-text.jpg
│ │ │ └── README.md
│ │ ├── tsconfig.json
│ │ ├── vite.config.ts
│ │ ├── .gitignore
│ │ ├── index.html
│ │ ├── tsconfig.node.json
│ │ ├── tsconfig.app.json
│ │ ├── tests
│ │ └── playwright.config.ts
│ │ └── package.json
├── FINISHED.mdx
└── README.mdx
├── .npmrc
├── epicshop
├── .npmrc
├── package.json
├── update-deps.sh
├── Dockerfile
├── setup-custom.js
└── fly.toml
├── public
└── images
│ └── instructor.png
├── .prettierignore
├── LICENSE.md
├── .gitignore
├── eslint.config.js
├── tsconfig.json
└── .github
└── workflows
└── validate.yml
/exercises/99.upgrade-v7/FINISHED.mdx:
--------------------------------------------------------------------------------
1 | # Final
2 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/README.mdx:
--------------------------------------------------------------------------------
1 | # Final
2 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/FINISHED.mdx:
--------------------------------------------------------------------------------
1 | # v6 Upgrade
2 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/README.mdx:
--------------------------------------------------------------------------------
1 | # v6 Upgrade
2 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/FINISHED.mdx:
--------------------------------------------------------------------------------
1 | # Simple Server
2 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/README.mdx:
--------------------------------------------------------------------------------
1 | # Simple Server
2 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/README.mdx:
--------------------------------------------------------------------------------
1 | # v5 Start
2 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/README.mdx:
--------------------------------------------------------------------------------
1 | # v6 Start
2 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/README.mdx:
--------------------------------------------------------------------------------
1 | # v7 Start
2 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/README.mdx:
--------------------------------------------------------------------------------
1 | # v7 Finish
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 | registry=https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/epicshop/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 | registry=https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/exercises/FINISHED.mdx:
--------------------------------------------------------------------------------
1 | # Upgrade React Router 🔼
2 |
3 | Hooray! You're all done! 👏👏
4 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
8 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 | import { BrowserRouter as Router } from 'react-router-dom'
3 | import './styles/index.css'
4 | import { AppRoutes } from './routes.tsx'
5 |
6 | createRoot(document.getElementById('🧭')!).render(
7 |
8 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import defaultConfig from '@epic-web/config/eslint'
2 |
3 | /** @type {import("eslint").Linter.Config} */
4 | export default [
5 | ...defaultConfig,
6 | {
7 | rules: {
8 | // we leave unused vars around for the exercises
9 | 'no-unused-vars': 'off',
10 | '@typescript-eslint/no-unused-vars': 'off',
11 | },
12 | },
13 | ]
14 |
--------------------------------------------------------------------------------
/epicshop/update-deps.sh:
--------------------------------------------------------------------------------
1 | npx npm-check-updates --dep prod,dev --upgrade --workspaces --root
2 | cd epicshop && npx npm-check-updates --dep prod,dev --upgrade --root
3 | cd ..
4 | rm -rf node_modules package-lock.json ./epicshop/package-lock.json ./epicshop/node_modules ./exercises/**/node_modules
5 | npm install
6 | npm run setup
7 | npm run typecheck
8 | npm run lint --fix
9 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite'
2 | import react from '@vitejs/plugin-react'
3 | import { defineConfig } from 'vite'
4 |
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), tailwindcss()],
8 | server: {
9 | port: process.env.PORT ? Number(process.env.PORT) : undefined,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite'
2 | import react from '@vitejs/plugin-react'
3 | import { defineConfig } from 'vite'
4 |
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), tailwindcss()],
8 | server: {
9 | port: process.env.PORT ? Number(process.env.PORT) : undefined,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite'
2 | import react from '@vitejs/plugin-react'
3 | import { defineConfig } from 'vite'
4 |
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), tailwindcss()],
8 | server: {
9 | port: process.env.PORT ? Number(process.env.PORT) : undefined,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite'
2 | import react from '@vitejs/plugin-react'
3 | import { defineConfig } from 'vite'
4 |
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), tailwindcss()],
8 | server: {
9 | port: process.env.PORT ? Number(process.env.PORT) : undefined,
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GratiText
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GratiText
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GratiText
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/public/images/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 |
3 | - "woman-smiling-at-text.jpg" photo by
4 | Good
5 | Faces on
6 | Unsplash
7 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/public/images/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 |
3 | - "woman-smiling-at-text.jpg" photo by
4 | Good
5 | Faces on
6 | Unsplash
7 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/public/images/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 |
3 | - "woman-smiling-at-text.jpg" photo by
4 | Good
5 | Faces on
6 | Unsplash
7 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GratiText
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/public/images/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 |
3 | - "woman-smiling-at-text.jpg" photo by
4 | Good
5 | Faces on
6 | Unsplash
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "exclude": [
4 | "node_modules"
5 | ],
6 | "references": [
7 | {
8 | "path": "exercises/01.upgrade-v5/01.problem.v5"
9 | },
10 | {
11 | "path": "exercises/50.upgrade-v6/01.problem.v6"
12 | },
13 | {
14 | "path": "exercises/99.upgrade-v7/01.problem.v7"
15 | },
16 | {
17 | "path": "exercises/99.upgrade-v7/01.solution.v7"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 | import { RouterProvider } from 'react-router-dom'
3 | import './styles/index.css'
4 | import { UnknownErrorBoundary } from './error-boundary.tsx'
5 | import { router } from './routes.tsx'
6 |
7 | createRoot(document.getElementById('🧭')!).render(
8 |
9 | ,
11 | )
12 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Poppins';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
6 | }
7 |
8 | /* Source_Serif_4 */
9 | @font-face {
10 | font-family: 'Source_Serif_4';
11 | font-style: normal;
12 | font-weight: 400;
13 | src: url('/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf')
14 | format('truetype');
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Poppins';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
6 | }
7 |
8 | /* Source_Serif_4 */
9 | @font-face {
10 | font-family: 'Source_Serif_4';
11 | font-style: normal;
12 | font-weight: 400;
13 | src: url('/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf')
14 | format('truetype');
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Poppins';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
6 | }
7 |
8 | /* Source_Serif_4 */
9 | @font-face {
10 | font-family: 'Source_Serif_4';
11 | font-style: normal;
12 | font-weight: 400;
13 | src: url('/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf')
14 | format('truetype');
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Poppins';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
6 | }
7 |
8 | /* Source_Serif_4 */
9 | @font-face {
10 | font-family: 'Source_Serif_4';
11 | font-style: normal;
12 | font-weight: 400;
13 | src: url('/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf')
14 | format('truetype');
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/src/routes/404.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonLink } from '#src/components/button.tsx'
2 |
3 | export function NotFoundRoute() {
4 | return (
5 |
6 |
404 - Page Not Found
7 |
8 | Sorry, we couldn't find the page you're looking for.
9 |
10 |
Go back home
11 |
6 |
404 - Page Not Found
7 |
8 | Sorry, we couldn't find the page you're looking for.
9 |
10 |
Go back home
11 |
6 |
404 - Page Not Found
7 |
8 | Sorry, we couldn't find the page you're looking for.
9 |
10 |
Go back home
11 |
6 |
404 - Page Not Found
7 |
8 | Sorry, we couldn't find the page you're looking for.
9 |
10 |
Go back home
11 |
6 |
7 |
8 | Add New Recipient
9 |
10 |
Who should receive your messages?
11 |
12 |
13 |
14 |
6 |
7 |
8 | Add New Recipient
9 |
10 |
Who should receive your messages?
11 |
12 |
13 |
14 |
6 |
7 |
8 | Add New Recipient
9 |
10 |
Who should receive your messages?
11 |
12 |
13 |
14 |
6 |
7 |
8 | Add New Recipient
9 |
10 |
Who should receive your messages?
11 |
12 |
13 |
14 |
8 |
Unknown error
9 |
10 | An unknown error occurred. Please try again later.
11 |
12 |
13 | {error instanceof Error ? error.message : 'Unknown error'}
14 |
15 |
7 |
20 |
21 |
22 |
24 |
7 |
20 |
21 |
22 |
24 |
7 |
20 |
21 |
22 |
24 |
7 |
20 |
21 |
{children}
22 |
(
11 |
12 |
Unknown error
13 |
14 | An unknown error occurred. Please try again later.
15 |
16 |
17 | {error instanceof Error ? error.message : 'Unknown error'}
18 |
19 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/exercises/50.upgrade-v6/01.problem.v6/src/error-boundary.tsx:
--------------------------------------------------------------------------------
1 | import { ErrorBoundary } from 'react-error-boundary'
2 |
3 | export function UnknownErrorBoundary({
4 | children,
5 | }: {
6 | children: React.ReactNode
7 | }) {
8 | return (
9 | (
11 |
12 |
Unknown error
13 |
14 | An unknown error occurred. Please try again later.
15 |
16 |
17 | {error instanceof Error ? error.message : 'Unknown error'}
18 |
19 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.tsx:
--------------------------------------------------------------------------------
1 | import { ErrorBoundary } from 'react-error-boundary'
2 |
3 | export function UnknownErrorBoundary({
4 | children,
5 | }: {
6 | children: React.ReactNode
7 | }) {
8 | return (
9 | (
11 |
12 |
Unknown error
13 |
14 | An unknown error occurred. Please try again later.
15 |
16 |
17 | {error instanceof Error ? error.message : 'Unknown error'}
18 |
19 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/epicshop/setup-custom.js:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import {
3 | getApps,
4 | isProblemApp,
5 | setPlayground,
6 | } from '@epic-web/workshop-utils/apps.server'
7 | import fsExtra from 'fs-extra'
8 |
9 | const allApps = await getApps()
10 | const problemApps = allApps.filter(isProblemApp)
11 |
12 | if (!process.env.SKIP_PLAYGROUND) {
13 | const firstProblemApp = problemApps[0]
14 | if (firstProblemApp) {
15 | console.log('🛝 setting up the first problem app...')
16 | const playgroundPath = path.join(process.cwd(), 'playground')
17 | if (await fsExtra.exists(playgroundPath)) {
18 | console.log('🗑 deleting existing playground app')
19 | await fsExtra.remove(playgroundPath)
20 | }
21 | await setPlayground(firstProblemApp.fullPath).then(
22 | () => {
23 | console.log('✅ first problem app set up')
24 | },
25 | (error) => {
26 | console.error(error)
27 | throw new Error('❌ first problem app setup failed')
28 | },
29 | )
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/epicshop/fly.toml:
--------------------------------------------------------------------------------
1 | app = "epicweb-dev-upgrade-react-router"
2 | primary_region = "sjc"
3 | kill_signal = "SIGINT"
4 | kill_timeout = 5
5 | processes = [ ]
6 | swap_size_mb = 512
7 |
8 | [experimental]
9 | allowed_public_ports = [ ]
10 | auto_rollback = true
11 |
12 | [[services]]
13 | internal_port = 8080
14 | processes = [ "app" ]
15 | protocol = "tcp"
16 | script_checks = [ ]
17 |
18 | [services.concurrency]
19 | hard_limit = 100
20 | soft_limit = 80
21 | type = "connections"
22 |
23 | [[services.ports]]
24 | handlers = [ "http" ]
25 | port = 80
26 | force_https = true
27 |
28 | [[services.ports]]
29 | handlers = [ "tls", "http" ]
30 | port = 443
31 |
32 | [[services.tcp_checks]]
33 | grace_period = "1s"
34 | interval = "15s"
35 | restart_limit = 0
36 | timeout = "2s"
37 |
38 | [[services.http_checks]]
39 | interval = "10s"
40 | grace_period = "5s"
41 | method = "get"
42 | path = "/"
43 | protocol = "http"
44 | timeout = "2s"
45 | tls_skip_verify = false
46 | headers = { }
--------------------------------------------------------------------------------
/exercises/99.upgrade-v7/01.solution.v7/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "exercises_99.upgrade-v7_01.solution.v7",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "imports": {
7 | "#src/*": "./src/*"
8 | },
9 | "scripts": {
10 | "dev": "vite",
11 | "build": "tsc -b && vite build",
12 | "preview": "vite preview",
13 | "test": "playwright test --config=./tests/playwright.config.ts"
14 | },
15 | "dependencies": {
16 | "@tailwindcss/vite": "^4.0.9",
17 | "class-variance-authority": "^0.7.1",
18 | "clsx": "^2.1.1",
19 | "cron-parser": "^5.0.4",
20 | "match-sorter": "^8.0.0",
21 | "react": "^19.0.0",
22 | "react-dom": "^19.0.0",
23 | "react-router": "^7.0.0",
24 | "tailwindcss": "^4.0.9"
25 | },
26 | "devDependencies": {
27 | "@playwright/test": "^1.50.1",
28 | "@types/node": "^22.13.5",
29 | "@types/react": "^19.0.10",
30 | "@types/react-dom": "^19.0.4",
31 | "@vitejs/plugin-react": "^4.3.4",
32 | "typescript": "^5.7.3",
33 | "vite": "^6.2.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/exercises/01.upgrade-v5/01.problem.v5/src/routes/app/marketing/homepage.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonLink } from '#src/components/button.tsx'
2 |
3 | export function HomepageRoute() {
4 | return (
5 |
6 |
7 |
8 | Thoughtful Connections Made Simple
9 |
10 |
11 | Strengthen your relationships with regular personalized messages of
12 | love and gratitude.
13 |
14 |
15 |
16 | Get Started
17 |
18 |
19 |
20 |
21 |
26 |
27 |
6 |
7 |
8 | Thoughtful Connections Made Simple
9 |
10 |
11 | Strengthen your relationships with regular personalized messages of
12 | love and gratitude.
13 |
14 |
15 |
16 | Get Started
17 |
18 |
19 |
20 |
21 |
26 |
27 |
6 |
7 |
8 | Thoughtful Connections Made Simple
9 |
10 |
11 | Strengthen your relationships with regular personalized messages of
12 | love and gratitude.
13 |
14 |
15 |
16 | Get Started
17 |
18 |
19 |
20 |
21 |
26 |
27 |
6 |
7 |
8 | Thoughtful Connections Made Simple
9 |
10 |
11 | Strengthen your relationships with regular personalized messages of
12 | love and gratitude.
13 |
14 |
15 |
16 | Get Started
17 |
18 |
19 |
20 |
21 |
26 |
27 |
8 | {recipients.length > 0 ? (
9 | <>
10 |
Select a Recipient
11 |
12 | Choose a recipient from your list to view their messages and
13 | schedule
14 |
15 |
16 | ) : (
17 | <>
18 |
19 |
No Recipients Yet
20 |
21 | Add your first recipient to start sending messages
22 |
23 |
24 |
25 | Add Your First Recipient
26 |
27 |
28 | )}
29 |
8 | {recipients.length > 0 ? (
9 | <>
10 |
Select a Recipient
11 |
12 | Choose a recipient from your list to view their messages and
13 | schedule
14 |
15 |
16 | ) : (
17 | <>
18 |
19 |
No Recipients Yet
20 |
21 | Add your first recipient to start sending messages
22 |
23 |
24 |
25 | Add Your First Recipient
26 |
27 |
28 | )}
29 |
8 | {recipients.length > 0 ? (
9 | <>
10 |
Select a Recipient
11 |
12 | Choose a recipient from your list to view their messages and
13 | schedule
14 |
15 |
16 | ) : (
17 | <>
18 |
19 |
No Recipients Yet
20 |
21 | Add your first recipient to start sending messages
22 |
23 |
24 |
25 | Add Your First Recipient
26 |
27 |
28 | )}
29 |
8 | {recipients.length > 0 ? (
9 | <>
10 |
Select a Recipient
11 |
12 | Choose a recipient from your list to view their messages and
13 | schedule
14 |
15 |
16 | ) : (
17 | <>
18 |
19 |
No Recipients Yet
20 |
21 | Add your first recipient to start sending messages
22 |
23 |
24 |
25 | Add Your First Recipient
26 |
27 |
28 | )}
29 |
15 |
16 |
22 |
24 |
Edit Recipient
25 |
Edit the details of your recipient.
26 |
27 |
28 |
30 |
15 |
16 |
22 |
24 |
Edit Recipient
25 |
Edit the details of your recipient.
26 |
27 |
28 |
30 |
15 |
16 |
23 |
25 |
Edit Recipient
26 |
Edit the details of your recipient.
27 |
28 |
29 |
31 |
15 |
16 |
22 |
24 |
Edit Recipient
25 |
Edit the details of your recipient.
26 |
27 |
28 |
30 |
6 |
7 |
9 |
10 |
33 |
6 |
7 |
9 |
10 |
33 |
6 |
7 |
9 |
10 |
33 |
6 |
7 | {children}
8 |
9 |
10 |
33 |
7 |
About Us
8 |
35 |
36 | Go home
38 |
39 |
40 |
7 |
About Us
8 |
35 |
36 | Go home
38 |
39 |
40 |
7 |
About Us
8 |
35 |
36 | Go home
38 |
39 |
40 |
7 |
About Us
8 |
35 |
36 | Go home
38 |
39 |
40 |
26 |