+
+ );
+}
+
+function FiltersComponent() {
+ const { setFilters } = useUserStore();
+
+ // Imagine some form inputs here
+
+ return null;
+}
diff --git a/videos/long/combining-zustand-with-react-query/src/api/user.ts b/videos/long/combining-zustand-with-react-query/src/api/user.ts
new file mode 100644
index 0000000..5e09447
--- /dev/null
+++ b/videos/long/combining-zustand-with-react-query/src/api/user.ts
@@ -0,0 +1,14 @@
+import { User } from '@/types/user';
+
+export type GetUsersFilters = {
+ limit: number;
+ page: number;
+};
+
+export async function getUsers(filters?: GetUsersFilters) {
+ // Do something cool with the filters
+
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ return [{ id: 1, name: 'Darius' }] as User[];
+}
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Bold.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Light.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Medium.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Regular.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/combining-zustand-with-react-query/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/combining-zustand-with-react-query/src/index.css b/videos/long/combining-zustand-with-react-query/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/combining-zustand-with-react-query/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/combining-zustand-with-react-query/src/main.tsx b/videos/long/combining-zustand-with-react-query/src/main.tsx
new file mode 100644
index 0000000..ffa106d
--- /dev/null
+++ b/videos/long/combining-zustand-with-react-query/src/main.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ {user.name}
;
+ })}
+
+
+ Jotai Example
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/app/page.tsx b/videos/long/comparing-state-management-react/src/app/page.tsx
new file mode 100644
index 0000000..07f8000
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+ return (
+ MobX Example
+Cosden Solutions
+
+
+ Recoil Example
+
+
+ Redux Toolkit Example
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/features/jotai/Todo.tsx b/videos/long/comparing-state-management-react/src/features/jotai/Todo.tsx
new file mode 100644
index 0000000..58018d3
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/jotai/Todo.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { useAtom, useSetAtom } from "jotai";
+import {
+ todosAtom,
+ addTodoAtom,
+ toggleTodoAtom,
+ removeTodoAtom,
+} from "./todoStore";
+
+export function Todo() {
+ const [todos] = useAtom(todosAtom);
+ const addTodo = useSetAtom(addTodoAtom);
+ const toggleTodo = useSetAtom(toggleTodoAtom);
+ const removeTodo = useSetAtom(removeTodoAtom);
+
+ const [text, setText] = useState("");
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (text.trim()) {
+ addTodo(text);
+ setText("");
+ }
+ };
+
+ return (
+ Zustand Example
+
+
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/features/jotai/todoStore.ts b/videos/long/comparing-state-management-react/src/features/jotai/todoStore.ts
new file mode 100644
index 0000000..84999eb
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/jotai/todoStore.ts
@@ -0,0 +1,40 @@
+import { atom } from "jotai";
+
+type Todo = {
+ id: number;
+ text: string;
+ completed: boolean;
+};
+
+export const todosAtom = atom-
+ {todos.map((todo) => (
+
- + toggleTodo(todo.id)} + /> + + {todo.text} + + + + ))} +
+
+
+
+ );
+});
diff --git a/videos/long/comparing-state-management-react/src/features/mobx/todoStore.ts b/videos/long/comparing-state-management-react/src/features/mobx/todoStore.ts
new file mode 100644
index 0000000..d388ba6
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/mobx/todoStore.ts
@@ -0,0 +1,36 @@
+import { makeAutoObservable } from "mobx";
+
+type Todo = {
+ id: number;
+ text: string;
+ completed: boolean;
+};
+
+class TodoStore {
+ todos: Todo[] = [];
+
+ constructor() {
+ makeAutoObservable(this);
+ }
+
+ addTodo(text: string) {
+ this.todos.push({
+ id: Date.now(),
+ text,
+ completed: false,
+ });
+ }
+
+ toggleTodo(id: number) {
+ const todo = this.todos.find((todo) => todo.id === id);
+ if (todo) {
+ todo.completed = !todo.completed;
+ }
+ }
+
+ removeTodo(id: number) {
+ this.todos = this.todos.filter((todo) => todo.id !== id);
+ }
+}
+
+export const todoStore = new TodoStore();
diff --git a/videos/long/comparing-state-management-react/src/features/recoil/Todo.tsx b/videos/long/comparing-state-management-react/src/features/recoil/Todo.tsx
new file mode 100644
index 0000000..138c4e2
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/recoil/Todo.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { useRecoilState } from "recoil";
+import { todosState, addTodo, toggleTodo, removeTodo } from "./todoStore";
+
+export function Todo() {
+ const [todos, setTodos] = useRecoilState(todosState);
+
+ const [text, setText] = useState("");
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (text.trim()) {
+ setTodos((todos) => addTodo(todos, text));
+ setText("");
+ }
+ };
+
+ return (
+ -
+ {todoStore.todos.map((todo) => (
+
- + todoStore.toggleTodo(todo.id)} + /> + + {todo.text} + + + + ))} +
+
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/features/recoil/todoStore.ts b/videos/long/comparing-state-management-react/src/features/recoil/todoStore.ts
new file mode 100644
index 0000000..e515ba0
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/recoil/todoStore.ts
@@ -0,0 +1,30 @@
+import { atom } from "recoil";
+
+type Todo = {
+ id: number;
+ text: string;
+ completed: boolean;
+};
+
+export const todosState = atom-
+ {todos.map((todo) => (
+
- + setTodos((todos) => toggleTodo(todos, todo.id))} + /> + + {todo.text} + + + + ))} +
+
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/features/redux/store.ts b/videos/long/comparing-state-management-react/src/features/redux/store.ts
new file mode 100644
index 0000000..fc162b2
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/redux/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import todosReducer from "./todosSlice";
+
+export const store = configureStore({
+ reducer: {
+ todos: todosReducer,
+ },
+});
+
+export type RootState = ReturnType-
+ {todos.map((todo) => (
+
- + dispatch(toggleTodo(todo.id))} + /> + + {todo.text} + + + + ))} +
+
+
+
+ );
+}
diff --git a/videos/long/comparing-state-management-react/src/features/zustand/todoStore.ts b/videos/long/comparing-state-management-react/src/features/zustand/todoStore.ts
new file mode 100644
index 0000000..0862b1b
--- /dev/null
+++ b/videos/long/comparing-state-management-react/src/features/zustand/todoStore.ts
@@ -0,0 +1,39 @@
+import { create } from "zustand";
+
+type Todo = {
+ id: number;
+ text: string;
+ completed: boolean;
+};
+
+type TodoStore = {
+ todos: Todo[];
+ addTodo: (text: string) => void;
+ toggleTodo: (id: number) => void;
+ removeTodo: (id: number) => void;
+};
+
+export const useTodoStore = create-
+ {todos.map((todo) => (
+
- + toggleTodo(todo.id)} + /> + + {todo.text} + + + + ))} +
-
+ {data.results.map((person) => (
+
- {person.name} + ))} +
+
+ );
+}
+
+export default App;
+```
+
+You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+## State Management
+
+Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
+
+First you need to add TanStack Store as a dependency:
+
+```bash
+pnpm add @tanstack/store
+```
+
+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+function App() {
+ const count = useStore(countStore);
+ return (
+ -
+ {data.map((person) => (
+
- {person.name} + ))} +
+
+
+ );
+}
+
+export default App;
+```
+
+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
+
+Let's check this out by doubling the count using derived state.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store, Derived } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+const doubledStore = new Derived({
+ fn: () => countStore.state * 2,
+ deps: [countStore],
+});
+doubledStore.mount();
+
+function App() {
+ const count = useStore(countStore);
+ const doubledCount = useStore(doubledStore);
+
+ return (
+
+
+
+ );
+}
+
+export default App;
+```
+
+We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
+
+Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
+
+You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
+
+# Demo files
+
+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
diff --git a/videos/long/complete-authentication-system-react/client/components.json b/videos/long/complete-authentication-system-react/client/components.json
new file mode 100644
index 0000000..6998bdf
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/components.json
@@ -0,0 +1,21 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "src/styles.css",
+ "baseColor": "zinc",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/videos/long/complete-authentication-system-react/client/index.html b/videos/long/complete-authentication-system-react/client/index.html
new file mode 100644
index 0000000..80106b3
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+ Doubled - {doubledCount}
+
+
+
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/components/SignInForm.tsx b/videos/long/complete-authentication-system-react/client/src/components/SignInForm.tsx
new file mode 100644
index 0000000..00d6de8
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/components/SignInForm.tsx
@@ -0,0 +1,127 @@
+import { useForm } from "react-hook-form";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "./ui/form";
+import { Input } from "./ui/input";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "./ui/button";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { signIn } from "supertokens-web-js/recipe/emailpassword";
+import { useAuth } from "./AuthProvider";
+
+const formSchema = z.object({
+ email: z.string().email(),
+ password: z.string().min(8),
+});
+type FormSchema = z.infer
+
+
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/components/SignUpForm.tsx b/videos/long/complete-authentication-system-react/client/src/components/SignUpForm.tsx
new file mode 100644
index 0000000..90add6d
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/components/SignUpForm.tsx
@@ -0,0 +1,123 @@
+import { useForm } from "react-hook-form";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "./ui/form";
+import { Input } from "./ui/input";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "./ui/button";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { signUp } from "supertokens-web-js/recipe/emailpassword";
+import { useAuth } from "./AuthProvider";
+
+const formSchema = z.object({
+ email: z.string().email(),
+ password: z.string().min(8),
+});
+type FormSchema = z.infer
+
+
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/components/ui/button.tsx b/videos/long/complete-authentication-system-react/client/src/components/ui/button.tsx
new file mode 100644
index 0000000..a2df8dc
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps+ {body} +
+ ) +} + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +} diff --git a/videos/long/complete-authentication-system-react/client/src/components/ui/input.tsx b/videos/long/complete-authentication-system-react/client/src/components/ui/input.tsx new file mode 100644 index 0000000..03295ca --- /dev/null +++ b/videos/long/complete-authentication-system-react/client/src/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + + ) +} + +export { Input } diff --git a/videos/long/complete-authentication-system-react/client/src/components/ui/label.tsx b/videos/long/complete-authentication-system-react/client/src/components/ui/label.tsx new file mode 100644 index 0000000..fb5fbc3 --- /dev/null +++ b/videos/long/complete-authentication-system-react/client/src/components/ui/label.tsx @@ -0,0 +1,24 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" + +import { cn } from "@/lib/utils" + +function Label({ + className, + ...props +}: React.ComponentProps
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/routes/auth/signin.tsx b/videos/long/complete-authentication-system-react/client/src/routes/auth/signin.tsx
new file mode 100644
index 0000000..f4f8a0b
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/routes/auth/signin.tsx
@@ -0,0 +1,14 @@
+import { SignInForm } from "@/components/SignInForm";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/auth/signin")({
+ component: RouteComponent,
+});
+
+function RouteComponent() {
+ return (
+
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/routes/auth/signup.tsx b/videos/long/complete-authentication-system-react/client/src/routes/auth/signup.tsx
new file mode 100644
index 0000000..6b71037
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/routes/auth/signup.tsx
@@ -0,0 +1,14 @@
+import { SignUpForm } from "@/components/SignUpForm";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/auth/signup")({
+ component: RouteComponent,
+});
+
+function RouteComponent() {
+ return (
+
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/routes/index.tsx b/videos/long/complete-authentication-system-react/client/src/routes/index.tsx
new file mode 100644
index 0000000..17d6e78
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/routes/index.tsx
@@ -0,0 +1,37 @@
+import { useAuth } from "@/components/AuthProvider";
+import { Button } from "@/components/ui/button";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { signOut } from "supertokens-web-js/recipe/session";
+
+export const Route = createFileRoute("/")({
+ component: App,
+});
+
+function App() {
+ const { isAuthenticated, userId, handleSignOut } = useAuth();
+
+ return (
+
+ {isAuthenticated ? (
+
+ );
+}
diff --git a/videos/long/complete-authentication-system-react/client/src/styles.css b/videos/long/complete-authentication-system-react/client/src/styles.css
new file mode 100644
index 0000000..ea2f4d3
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/src/styles.css
@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+ @apply m-0;
+ font-family:
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+ 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family:
+ source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.141 0.005 285.823);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.141 0.005 285.823);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.141 0.005 285.823);
+ --primary: oklch(0.21 0.006 285.885);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.967 0.001 286.375);
+ --secondary-foreground: oklch(0.21 0.006 285.885);
+ --muted: oklch(0.967 0.001 286.375);
+ --muted-foreground: oklch(0.552 0.016 285.938);
+ --accent: oklch(0.967 0.001 286.375);
+ --accent-foreground: oklch(0.21 0.006 285.885);
+ --destructive: oklch(0.577 0.245 27.325);
+ --destructive-foreground: oklch(0.577 0.245 27.325);
+ --border: oklch(0.92 0.004 286.32);
+ --input: oklch(0.92 0.004 286.32);
+ --ring: oklch(0.871 0.006 286.286);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --radius: 0.625rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
+ --sidebar-primary: oklch(0.21 0.006 285.885);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.967 0.001 286.375);
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+ --sidebar-border: oklch(0.92 0.004 286.32);
+ --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+ --background: oklch(0.141 0.005 285.823);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.141 0.005 285.823);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.141 0.005 285.823);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.985 0 0);
+ --primary-foreground: oklch(0.21 0.006 285.885);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.274 0.006 286.033);
+ --muted-foreground: oklch(0.705 0.015 286.067);
+ --accent: oklch(0.274 0.006 286.033);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.396 0.141 25.723);
+ --destructive-foreground: oklch(0.637 0.237 25.331);
+ --border: oklch(0.274 0.006 286.033);
+ --input: oklch(0.274 0.006 286.033);
+ --ring: oklch(0.442 0.017 285.786);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.21 0.006 285.885);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.274 0.006 286.033);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(0.274 0.006 286.033);
+ --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/videos/long/complete-authentication-system-react/client/tsconfig.json b/videos/long/complete-authentication-system-react/client/tsconfig.json
new file mode 100644
index 0000000..7920df9
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "include": ["**/*.ts", "**/*.tsx"],
+ "compilerOptions": {
+ "target": "ES2022",
+ "jsx": "react-jsx",
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "types": ["vite/client"],
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ /* Linting */
+ "skipLibCheck": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ }
+ }
+}
diff --git a/videos/long/complete-authentication-system-react/client/vite.config.js b/videos/long/complete-authentication-system-react/client/vite.config.js
new file mode 100644
index 0000000..393040f
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/client/vite.config.js
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import viteReact from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import { resolve } from "node:path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
+ test: {
+ globals: true,
+ environment: "jsdom",
+ },
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, './src'),
+ },
+ }
+});
diff --git a/videos/long/complete-authentication-system-react/server/.env b/videos/long/complete-authentication-system-react/server/.env
new file mode 100644
index 0000000..d58bbb4
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/.env
@@ -0,0 +1,4 @@
+SUPERTOKENS_CONNECTION_URI=https://st-dev-11fefe10-420c-11f0-9708-a713e61c1fef.aws.supertokens.io
+SUPERTOKENS_API_KEY="vcbgvgF9ZrzUArxbzCQhb5UN=Z"
+API_BASE_URL=http://localhost:8000
+APP_BASE_URL=http://localhost:3000
\ No newline at end of file
diff --git a/videos/long/complete-authentication-system-react/server/.gitignore b/videos/long/complete-authentication-system-react/server/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/videos/long/complete-authentication-system-react/server/package.json b/videos/long/complete-authentication-system-react/server/package.json
new file mode 100644
index 0000000..6b956f9
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "server",
+ "version": "1.0.0",
+ "description": "Express server with SuperTokens authentication",
+ "main": "dist/index.js",
+ "scripts": {
+ "dev": "tsx watch --clear-screen=false ./src/index.ts",
+ "build": "tsc",
+ "start": "node dist/index.js"
+ },
+ "keywords": [
+ "express",
+ "supertokens",
+ "authentication"
+ ],
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "body-parser": "^2.2.0",
+ "cors": "^2.8.5",
+ "dotenv": "^16.5.0",
+ "express": "^5.1.0",
+ "supertokens-node": "^22.1.0",
+ "tsx": "^4.19.4",
+ "zod": "^3.25.48"
+ },
+ "devDependencies": {
+ "@types/body-parser": "^1.19.5",
+ "@types/cors": "^2.8.18",
+ "@types/express": "^5.0.2",
+ "@types/node": "^22.15.29",
+ "nodemon": "^3.1.10",
+ "ts-node": "^10.9.2",
+ "typescript": "^5.8.3"
+ }
+}
diff --git a/videos/long/complete-authentication-system-react/server/pnpm-lock.yaml b/videos/long/complete-authentication-system-react/server/pnpm-lock.yaml
new file mode 100644
index 0000000..765c7d8
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/pnpm-lock.yaml
@@ -0,0 +1,1745 @@
+lockfileVersion: '9.0'
+
+settings:
+ autoInstallPeers: true
+ excludeLinksFromLockfile: false
+
+importers:
+
+ .:
+ dependencies:
+ body-parser:
+ specifier: ^2.2.0
+ version: 2.2.0
+ cors:
+ specifier: ^2.8.5
+ version: 2.8.5
+ dotenv:
+ specifier: ^16.5.0
+ version: 16.5.0
+ express:
+ specifier: ^5.1.0
+ version: 5.1.0
+ supertokens-node:
+ specifier: ^22.1.0
+ version: 22.1.0
+ tsx:
+ specifier: ^4.19.4
+ version: 4.19.4
+ zod:
+ specifier: ^3.25.48
+ version: 3.25.48
+ devDependencies:
+ '@types/body-parser':
+ specifier: ^1.19.5
+ version: 1.19.5
+ '@types/cors':
+ specifier: ^2.8.18
+ version: 2.8.18
+ '@types/express':
+ specifier: ^5.0.2
+ version: 5.0.2
+ '@types/node':
+ specifier: ^22.15.29
+ version: 22.15.29
+ nodemon:
+ specifier: ^3.1.10
+ version: 3.1.10
+ ts-node:
+ specifier: ^10.9.2
+ version: 10.9.2(@types/node@22.15.29)(typescript@5.8.3)
+ typescript:
+ specifier: ^5.8.3
+ version: 5.8.3
+
+packages:
+
+ '@cspotcode/source-map-support@0.8.1':
+ resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+ engines: {node: '>=12'}
+
+ '@esbuild/aix-ppc64@0.25.5':
+ resolution: {integrity: sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==}
+ engines: {node: '>=18'}
+ cpu: [ppc64]
+ os: [aix]
+
+ '@esbuild/android-arm64@0.25.5':
+ resolution: {integrity: sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [android]
+
+ '@esbuild/android-arm@0.25.5':
+ resolution: {integrity: sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==}
+ engines: {node: '>=18'}
+ cpu: [arm]
+ os: [android]
+
+ '@esbuild/android-x64@0.25.5':
+ resolution: {integrity: sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [android]
+
+ '@esbuild/darwin-arm64@0.25.5':
+ resolution: {integrity: sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [darwin]
+
+ '@esbuild/darwin-x64@0.25.5':
+ resolution: {integrity: sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [darwin]
+
+ '@esbuild/freebsd-arm64@0.25.5':
+ resolution: {integrity: sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [freebsd]
+
+ '@esbuild/freebsd-x64@0.25.5':
+ resolution: {integrity: sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [freebsd]
+
+ '@esbuild/linux-arm64@0.25.5':
+ resolution: {integrity: sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [linux]
+
+ '@esbuild/linux-arm@0.25.5':
+ resolution: {integrity: sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==}
+ engines: {node: '>=18'}
+ cpu: [arm]
+ os: [linux]
+
+ '@esbuild/linux-ia32@0.25.5':
+ resolution: {integrity: sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==}
+ engines: {node: '>=18'}
+ cpu: [ia32]
+ os: [linux]
+
+ '@esbuild/linux-loong64@0.25.5':
+ resolution: {integrity: sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==}
+ engines: {node: '>=18'}
+ cpu: [loong64]
+ os: [linux]
+
+ '@esbuild/linux-mips64el@0.25.5':
+ resolution: {integrity: sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==}
+ engines: {node: '>=18'}
+ cpu: [mips64el]
+ os: [linux]
+
+ '@esbuild/linux-ppc64@0.25.5':
+ resolution: {integrity: sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==}
+ engines: {node: '>=18'}
+ cpu: [ppc64]
+ os: [linux]
+
+ '@esbuild/linux-riscv64@0.25.5':
+ resolution: {integrity: sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==}
+ engines: {node: '>=18'}
+ cpu: [riscv64]
+ os: [linux]
+
+ '@esbuild/linux-s390x@0.25.5':
+ resolution: {integrity: sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==}
+ engines: {node: '>=18'}
+ cpu: [s390x]
+ os: [linux]
+
+ '@esbuild/linux-x64@0.25.5':
+ resolution: {integrity: sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [linux]
+
+ '@esbuild/netbsd-arm64@0.25.5':
+ resolution: {integrity: sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [netbsd]
+
+ '@esbuild/netbsd-x64@0.25.5':
+ resolution: {integrity: sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [netbsd]
+
+ '@esbuild/openbsd-arm64@0.25.5':
+ resolution: {integrity: sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [openbsd]
+
+ '@esbuild/openbsd-x64@0.25.5':
+ resolution: {integrity: sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [openbsd]
+
+ '@esbuild/sunos-x64@0.25.5':
+ resolution: {integrity: sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [sunos]
+
+ '@esbuild/win32-arm64@0.25.5':
+ resolution: {integrity: sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==}
+ engines: {node: '>=18'}
+ cpu: [arm64]
+ os: [win32]
+
+ '@esbuild/win32-ia32@0.25.5':
+ resolution: {integrity: sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==}
+ engines: {node: '>=18'}
+ cpu: [ia32]
+ os: [win32]
+
+ '@esbuild/win32-x64@0.25.5':
+ resolution: {integrity: sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==}
+ engines: {node: '>=18'}
+ cpu: [x64]
+ os: [win32]
+
+ '@jridgewell/resolve-uri@3.1.2':
+ resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+ engines: {node: '>=6.0.0'}
+
+ '@jridgewell/sourcemap-codec@1.5.0':
+ resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+ '@jridgewell/trace-mapping@0.3.9':
+ resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+ '@tsconfig/node10@1.0.11':
+ resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+ '@tsconfig/node12@1.0.11':
+ resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+ '@tsconfig/node14@1.0.3':
+ resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+ '@tsconfig/node16@1.0.4':
+ resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+ '@types/body-parser@1.19.5':
+ resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+
+ '@types/connect@3.4.38':
+ resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
+ '@types/cors@2.8.18':
+ resolution: {integrity: sha512-nX3d0sxJW41CqQvfOzVG1NCTXfFDrDWIghCZncpHeWlVFd81zxB/DLhg7avFg6eHLCRX7ckBmoIIcqa++upvJA==}
+
+ '@types/express-serve-static-core@5.0.6':
+ resolution: {integrity: sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==}
+
+ '@types/express@5.0.2':
+ resolution: {integrity: sha512-BtjL3ZwbCQriyb0DGw+Rt12qAXPiBTPs815lsUvtt1Grk0vLRMZNMUZ741d5rjk+UQOxfDiBZ3dxpX00vSkK3g==}
+
+ '@types/http-errors@2.0.4':
+ resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+
+ '@types/mime@1.3.5':
+ resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+
+ '@types/node@22.15.29':
+ resolution: {integrity: sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==}
+
+ '@types/qs@6.14.0':
+ resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+ '@types/range-parser@1.2.7':
+ resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+
+ '@types/send@0.17.4':
+ resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+
+ '@types/serve-static@1.15.7':
+ resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
+
+ accepts@2.0.0:
+ resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+ engines: {node: '>= 0.6'}
+
+ acorn-walk@8.3.4:
+ resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+ engines: {node: '>=0.4.0'}
+
+ acorn@8.14.1:
+ resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+ engines: {node: '>=0.4.0'}
+ hasBin: true
+
+ agent-base@6.0.2:
+ resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+ engines: {node: '>= 6.0.0'}
+
+ anymatch@3.1.3:
+ resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+ engines: {node: '>= 8'}
+
+ arg@4.1.3:
+ resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+ asynckit@0.4.0:
+ resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+ axios@1.9.0:
+ resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
+
+ balanced-match@1.0.2:
+ resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+ base64-js@1.5.1:
+ resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+ binary-extensions@2.3.0:
+ resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+ engines: {node: '>=8'}
+
+ body-parser@2.2.0:
+ resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+ engines: {node: '>=18'}
+
+ brace-expansion@1.1.11:
+ resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+
+ braces@3.0.3:
+ resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+ engines: {node: '>=8'}
+
+ buffer-equal-constant-time@1.0.1:
+ resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
+ buffer@6.0.3:
+ resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+ bytes@3.1.2:
+ resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+ engines: {node: '>= 0.8'}
+
+ call-bind-apply-helpers@1.0.2:
+ resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+ engines: {node: '>= 0.4'}
+
+ call-bound@1.0.4:
+ resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+ engines: {node: '>= 0.4'}
+
+ chokidar@3.6.0:
+ resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+ engines: {node: '>= 8.10.0'}
+
+ combined-stream@1.0.8:
+ resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+ engines: {node: '>= 0.8'}
+
+ concat-map@0.0.1:
+ resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+ content-disposition@1.0.0:
+ resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+ engines: {node: '>= 0.6'}
+
+ content-type@1.0.5:
+ resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+ engines: {node: '>= 0.6'}
+
+ cookie-signature@1.2.2:
+ resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+ engines: {node: '>=6.6.0'}
+
+ cookie@0.7.2:
+ resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+ engines: {node: '>= 0.6'}
+
+ cors@2.8.5:
+ resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+ engines: {node: '>= 0.10'}
+
+ create-require@1.1.1:
+ resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+ cross-fetch@3.2.0:
+ resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
+
+ crypto-js@4.2.0:
+ resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
+ dayjs@1.11.13:
+ resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
+ debug@4.4.1:
+ resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+ engines: {node: '>=6.0'}
+ peerDependencies:
+ supports-color: '*'
+ peerDependenciesMeta:
+ supports-color:
+ optional: true
+
+ delayed-stream@1.0.0:
+ resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+ engines: {node: '>=0.4.0'}
+
+ depd@2.0.0:
+ resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+ engines: {node: '>= 0.8'}
+
+ diff@4.0.2:
+ resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+ engines: {node: '>=0.3.1'}
+
+ dotenv@16.5.0:
+ resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
+ engines: {node: '>=12'}
+
+ dunder-proto@1.0.1:
+ resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+ engines: {node: '>= 0.4'}
+
+ ecdsa-sig-formatter@1.0.11:
+ resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
+ ee-first@1.1.1:
+ resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+ encodeurl@2.0.0:
+ resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+ engines: {node: '>= 0.8'}
+
+ es-define-property@1.0.1:
+ resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+ engines: {node: '>= 0.4'}
+
+ es-errors@1.3.0:
+ resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+ engines: {node: '>= 0.4'}
+
+ es-object-atoms@1.1.1:
+ resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+ engines: {node: '>= 0.4'}
+
+ es-set-tostringtag@2.1.0:
+ resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+ engines: {node: '>= 0.4'}
+
+ esbuild@0.25.5:
+ resolution: {integrity: sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==}
+ engines: {node: '>=18'}
+ hasBin: true
+
+ escape-html@1.0.3:
+ resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+ etag@1.8.1:
+ resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+ engines: {node: '>= 0.6'}
+
+ express@5.1.0:
+ resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+ engines: {node: '>= 18'}
+
+ fill-range@7.1.1:
+ resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+ engines: {node: '>=8'}
+
+ finalhandler@2.1.0:
+ resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+ engines: {node: '>= 0.8'}
+
+ follow-redirects@1.15.9:
+ resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+ engines: {node: '>=4.0'}
+ peerDependencies:
+ debug: '*'
+ peerDependenciesMeta:
+ debug:
+ optional: true
+
+ form-data@4.0.2:
+ resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+ engines: {node: '>= 6'}
+
+ forwarded@0.2.0:
+ resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+ engines: {node: '>= 0.6'}
+
+ fresh@2.0.0:
+ resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+ engines: {node: '>= 0.8'}
+
+ fsevents@2.3.3:
+ resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+ engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+ os: [darwin]
+
+ function-bind@1.1.2:
+ resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+ get-intrinsic@1.3.0:
+ resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+ engines: {node: '>= 0.4'}
+
+ get-proto@1.0.1:
+ resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+ engines: {node: '>= 0.4'}
+
+ get-tsconfig@4.10.1:
+ resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+ glob-parent@5.1.2:
+ resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+ engines: {node: '>= 6'}
+
+ gopd@1.2.0:
+ resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+ engines: {node: '>= 0.4'}
+
+ has-flag@3.0.0:
+ resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+ engines: {node: '>=4'}
+
+ has-symbols@1.1.0:
+ resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+ engines: {node: '>= 0.4'}
+
+ has-tostringtag@1.0.2:
+ resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+ engines: {node: '>= 0.4'}
+
+ hasown@2.0.2:
+ resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+ engines: {node: '>= 0.4'}
+
+ http-errors@2.0.0:
+ resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+ engines: {node: '>= 0.8'}
+
+ https-proxy-agent@5.0.1:
+ resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+ engines: {node: '>= 6'}
+
+ iconv-lite@0.6.3:
+ resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+ engines: {node: '>=0.10.0'}
+
+ ieee754@1.2.1:
+ resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+ ignore-by-default@1.0.1:
+ resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
+
+ inherits@2.0.4:
+ resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+ ipaddr.js@1.9.1:
+ resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+ engines: {node: '>= 0.10'}
+
+ is-binary-path@2.1.0:
+ resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+ engines: {node: '>=8'}
+
+ is-extglob@2.1.1:
+ resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+ engines: {node: '>=0.10.0'}
+
+ is-glob@4.0.3:
+ resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+ engines: {node: '>=0.10.0'}
+
+ is-number@7.0.0:
+ resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+ engines: {node: '>=0.12.0'}
+
+ is-promise@4.0.0:
+ resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+ jose@4.15.9:
+ resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
+
+ jsonwebtoken@9.0.2:
+ resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+ engines: {node: '>=12', npm: '>=6'}
+
+ jwa@1.4.2:
+ resolution: {integrity: sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==}
+
+ jws@3.2.2:
+ resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
+ libphonenumber-js@1.12.8:
+ resolution: {integrity: sha512-f1KakiQJa9tdc7w1phC2ST+DyxWimy9c3g3yeF+84QtEanJr2K77wAmBPP22riU05xldniHsvXuflnLZ4oysqA==}
+
+ lodash.includes@4.3.0:
+ resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
+ lodash.isboolean@3.0.3:
+ resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+ lodash.isinteger@4.0.4:
+ resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+ lodash.isnumber@3.0.3:
+ resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
+ lodash.isplainobject@4.0.6:
+ resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+ lodash.isstring@4.0.1:
+ resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
+ lodash.once@4.1.1:
+ resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
+ make-error@1.3.6:
+ resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+ math-intrinsics@1.1.0:
+ resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+ engines: {node: '>= 0.4'}
+
+ media-typer@1.1.0:
+ resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+ engines: {node: '>= 0.8'}
+
+ merge-descriptors@2.0.0:
+ resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+ engines: {node: '>=18'}
+
+ mime-db@1.52.0:
+ resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+ engines: {node: '>= 0.6'}
+
+ mime-db@1.54.0:
+ resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+ engines: {node: '>= 0.6'}
+
+ mime-types@2.1.35:
+ resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+ engines: {node: '>= 0.6'}
+
+ mime-types@3.0.1:
+ resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+ engines: {node: '>= 0.6'}
+
+ minimatch@3.1.2:
+ resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+ ms@2.1.3:
+ resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+ negotiator@1.0.0:
+ resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+ engines: {node: '>= 0.6'}
+
+ node-fetch@2.7.0:
+ resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+ engines: {node: 4.x || >=6.0.0}
+ peerDependencies:
+ encoding: ^0.1.0
+ peerDependenciesMeta:
+ encoding:
+ optional: true
+
+ nodemailer@6.10.1:
+ resolution: {integrity: sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==}
+ engines: {node: '>=6.0.0'}
+
+ nodemon@3.1.10:
+ resolution: {integrity: sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==}
+ engines: {node: '>=10'}
+ hasBin: true
+
+ normalize-path@3.0.0:
+ resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+ engines: {node: '>=0.10.0'}
+
+ object-assign@4.1.1:
+ resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+ engines: {node: '>=0.10.0'}
+
+ object-inspect@1.13.4:
+ resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+ engines: {node: '>= 0.4'}
+
+ on-finished@2.4.1:
+ resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+ engines: {node: '>= 0.8'}
+
+ once@1.4.0:
+ resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+ pako@2.1.0:
+ resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
+ parseurl@1.3.3:
+ resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+ engines: {node: '>= 0.8'}
+
+ path-to-regexp@8.2.0:
+ resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+ engines: {node: '>=16'}
+
+ picomatch@2.3.1:
+ resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+ engines: {node: '>=8.6'}
+
+ pkce-challenge@3.1.0:
+ resolution: {integrity: sha512-bQ/0XPZZ7eX+cdAkd61uYWpfMhakH3NeteUF1R8GNa+LMqX8QFAkbCLqq+AYAns1/ueACBu/BMWhrlKGrdvGZg==}
+
+ process@0.11.10:
+ resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+ engines: {node: '>= 0.6.0'}
+
+ proxy-addr@2.0.7:
+ resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+ engines: {node: '>= 0.10'}
+
+ proxy-from-env@1.1.0:
+ resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+ pstree.remy@1.1.8:
+ resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
+
+ qs@6.14.0:
+ resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+ engines: {node: '>=0.6'}
+
+ querystringify@2.2.0:
+ resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
+ range-parser@1.2.1:
+ resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+ engines: {node: '>= 0.6'}
+
+ raw-body@3.0.0:
+ resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+ engines: {node: '>= 0.8'}
+
+ readdirp@3.6.0:
+ resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+ engines: {node: '>=8.10.0'}
+
+ requires-port@1.0.0:
+ resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+ resolve-pkg-maps@1.0.0:
+ resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+ router@2.2.0:
+ resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+ engines: {node: '>= 18'}
+
+ safe-buffer@5.2.1:
+ resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+ safer-buffer@2.1.2:
+ resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+ scmp@2.1.0:
+ resolution: {integrity: sha512-o/mRQGk9Rcer/jEEw/yw4mwo3EU/NvYvp577/Btqrym9Qy5/MdWGBqipbALgd2lrdWTJ5/gqDusxfnQBxOxT2Q==}
+
+ semver@7.7.2:
+ resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+ engines: {node: '>=10'}
+ hasBin: true
+
+ send@1.2.0:
+ resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+ engines: {node: '>= 18'}
+
+ serve-static@2.2.0:
+ resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+ engines: {node: '>= 18'}
+
+ set-cookie-parser@2.7.1:
+ resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
+ setprototypeof@1.2.0:
+ resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+ side-channel-list@1.0.0:
+ resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+ engines: {node: '>= 0.4'}
+
+ side-channel-map@1.0.1:
+ resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+ engines: {node: '>= 0.4'}
+
+ side-channel-weakmap@1.0.2:
+ resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+ engines: {node: '>= 0.4'}
+
+ side-channel@1.1.0:
+ resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+ engines: {node: '>= 0.4'}
+
+ simple-update-notifier@2.0.0:
+ resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
+ engines: {node: '>=10'}
+
+ statuses@2.0.1:
+ resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+ engines: {node: '>= 0.8'}
+
+ supertokens-js-override@0.0.4:
+ resolution: {integrity: sha512-r0JFBjkMIdep3Lbk3JA+MpnpuOtw4RSyrlRAbrzMcxwiYco3GFWl/daimQZ5b1forOiUODpOlXbSOljP/oyurg==}
+
+ supertokens-node@22.1.0:
+ resolution: {integrity: sha512-ZdjiXfPCaZYYCNFHBin5wvHAP0gfYCzegKcroLAWfZCzFOdf4Rxso/rd8NOBN5B4qxs1lcs8nEinNFJqNazxHg==}
+
+ supports-color@5.5.0:
+ resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+ engines: {node: '>=4'}
+
+ tldts-core@6.1.86:
+ resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+ tldts@6.1.86:
+ resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+ hasBin: true
+
+ to-regex-range@5.0.1:
+ resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+ engines: {node: '>=8.0'}
+
+ toidentifier@1.0.1:
+ resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+ engines: {node: '>=0.6'}
+
+ touch@3.1.1:
+ resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
+ hasBin: true
+
+ tr46@0.0.3:
+ resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+ ts-node@10.9.2:
+ resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+ hasBin: true
+ peerDependencies:
+ '@swc/core': '>=1.2.50'
+ '@swc/wasm': '>=1.2.50'
+ '@types/node': '*'
+ typescript: '>=2.7'
+ peerDependenciesMeta:
+ '@swc/core':
+ optional: true
+ '@swc/wasm':
+ optional: true
+
+ tsx@4.19.4:
+ resolution: {integrity: sha512-gK5GVzDkJK1SI1zwHf32Mqxf2tSJkNx+eYcNly5+nHvWqXUJYUkWBQtKauoESz3ymezAI++ZwT855x5p5eop+Q==}
+ engines: {node: '>=18.0.0'}
+ hasBin: true
+
+ twilio@4.23.0:
+ resolution: {integrity: sha512-LdNBQfOe0dY2oJH2sAsrxazpgfFQo5yXGxe96QA8UWB5uu+433PrUbkv8gQ5RmrRCqUTPQ0aOrIyAdBr1aB03Q==}
+ engines: {node: '>=14.0'}
+
+ type-is@2.0.1:
+ resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+ engines: {node: '>= 0.6'}
+
+ typescript@5.8.3:
+ resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+ engines: {node: '>=14.17'}
+ hasBin: true
+
+ undefsafe@2.0.5:
+ resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
+
+ undici-types@6.21.0:
+ resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+ unpipe@1.0.0:
+ resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+ engines: {node: '>= 0.8'}
+
+ url-parse@1.5.10:
+ resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
+ v8-compile-cache-lib@3.0.1:
+ resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+ vary@1.1.2:
+ resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+ engines: {node: '>= 0.8'}
+
+ webidl-conversions@3.0.1:
+ resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+ whatwg-url@5.0.0:
+ resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+ wrappy@1.0.2:
+ resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+ xmlbuilder@13.0.2:
+ resolution: {integrity: sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==}
+ engines: {node: '>=6.0'}
+
+ yn@3.1.1:
+ resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+ engines: {node: '>=6'}
+
+ zod@3.25.48:
+ resolution: {integrity: sha512-0X1mz8FtgEIvaxGjdIImYpZEaZMrund9pGXm3M6vM7Reba0e2eI71KPjSCGXBfwKDPwPoywf6waUKc3/tFvX2Q==}
+
+snapshots:
+
+ '@cspotcode/source-map-support@0.8.1':
+ dependencies:
+ '@jridgewell/trace-mapping': 0.3.9
+
+ '@esbuild/aix-ppc64@0.25.5':
+ optional: true
+
+ '@esbuild/android-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/android-arm@0.25.5':
+ optional: true
+
+ '@esbuild/android-x64@0.25.5':
+ optional: true
+
+ '@esbuild/darwin-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/darwin-x64@0.25.5':
+ optional: true
+
+ '@esbuild/freebsd-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/freebsd-x64@0.25.5':
+ optional: true
+
+ '@esbuild/linux-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/linux-arm@0.25.5':
+ optional: true
+
+ '@esbuild/linux-ia32@0.25.5':
+ optional: true
+
+ '@esbuild/linux-loong64@0.25.5':
+ optional: true
+
+ '@esbuild/linux-mips64el@0.25.5':
+ optional: true
+
+ '@esbuild/linux-ppc64@0.25.5':
+ optional: true
+
+ '@esbuild/linux-riscv64@0.25.5':
+ optional: true
+
+ '@esbuild/linux-s390x@0.25.5':
+ optional: true
+
+ '@esbuild/linux-x64@0.25.5':
+ optional: true
+
+ '@esbuild/netbsd-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/netbsd-x64@0.25.5':
+ optional: true
+
+ '@esbuild/openbsd-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/openbsd-x64@0.25.5':
+ optional: true
+
+ '@esbuild/sunos-x64@0.25.5':
+ optional: true
+
+ '@esbuild/win32-arm64@0.25.5':
+ optional: true
+
+ '@esbuild/win32-ia32@0.25.5':
+ optional: true
+
+ '@esbuild/win32-x64@0.25.5':
+ optional: true
+
+ '@jridgewell/resolve-uri@3.1.2': {}
+
+ '@jridgewell/sourcemap-codec@1.5.0': {}
+
+ '@jridgewell/trace-mapping@0.3.9':
+ dependencies:
+ '@jridgewell/resolve-uri': 3.1.2
+ '@jridgewell/sourcemap-codec': 1.5.0
+
+ '@tsconfig/node10@1.0.11': {}
+
+ '@tsconfig/node12@1.0.11': {}
+
+ '@tsconfig/node14@1.0.3': {}
+
+ '@tsconfig/node16@1.0.4': {}
+
+ '@types/body-parser@1.19.5':
+ dependencies:
+ '@types/connect': 3.4.38
+ '@types/node': 22.15.29
+
+ '@types/connect@3.4.38':
+ dependencies:
+ '@types/node': 22.15.29
+
+ '@types/cors@2.8.18':
+ dependencies:
+ '@types/node': 22.15.29
+
+ '@types/express-serve-static-core@5.0.6':
+ dependencies:
+ '@types/node': 22.15.29
+ '@types/qs': 6.14.0
+ '@types/range-parser': 1.2.7
+ '@types/send': 0.17.4
+
+ '@types/express@5.0.2':
+ dependencies:
+ '@types/body-parser': 1.19.5
+ '@types/express-serve-static-core': 5.0.6
+ '@types/serve-static': 1.15.7
+
+ '@types/http-errors@2.0.4': {}
+
+ '@types/mime@1.3.5': {}
+
+ '@types/node@22.15.29':
+ dependencies:
+ undici-types: 6.21.0
+
+ '@types/qs@6.14.0': {}
+
+ '@types/range-parser@1.2.7': {}
+
+ '@types/send@0.17.4':
+ dependencies:
+ '@types/mime': 1.3.5
+ '@types/node': 22.15.29
+
+ '@types/serve-static@1.15.7':
+ dependencies:
+ '@types/http-errors': 2.0.4
+ '@types/node': 22.15.29
+ '@types/send': 0.17.4
+
+ accepts@2.0.0:
+ dependencies:
+ mime-types: 3.0.1
+ negotiator: 1.0.0
+
+ acorn-walk@8.3.4:
+ dependencies:
+ acorn: 8.14.1
+
+ acorn@8.14.1: {}
+
+ agent-base@6.0.2:
+ dependencies:
+ debug: 4.4.1(supports-color@5.5.0)
+ transitivePeerDependencies:
+ - supports-color
+
+ anymatch@3.1.3:
+ dependencies:
+ normalize-path: 3.0.0
+ picomatch: 2.3.1
+
+ arg@4.1.3: {}
+
+ asynckit@0.4.0: {}
+
+ axios@1.9.0(debug@4.4.1):
+ dependencies:
+ follow-redirects: 1.15.9(debug@4.4.1)
+ form-data: 4.0.2
+ proxy-from-env: 1.1.0
+ transitivePeerDependencies:
+ - debug
+
+ balanced-match@1.0.2: {}
+
+ base64-js@1.5.1: {}
+
+ binary-extensions@2.3.0: {}
+
+ body-parser@2.2.0:
+ dependencies:
+ bytes: 3.1.2
+ content-type: 1.0.5
+ debug: 4.4.1(supports-color@5.5.0)
+ http-errors: 2.0.0
+ iconv-lite: 0.6.3
+ on-finished: 2.4.1
+ qs: 6.14.0
+ raw-body: 3.0.0
+ type-is: 2.0.1
+ transitivePeerDependencies:
+ - supports-color
+
+ brace-expansion@1.1.11:
+ dependencies:
+ balanced-match: 1.0.2
+ concat-map: 0.0.1
+
+ braces@3.0.3:
+ dependencies:
+ fill-range: 7.1.1
+
+ buffer-equal-constant-time@1.0.1: {}
+
+ buffer@6.0.3:
+ dependencies:
+ base64-js: 1.5.1
+ ieee754: 1.2.1
+
+ bytes@3.1.2: {}
+
+ call-bind-apply-helpers@1.0.2:
+ dependencies:
+ es-errors: 1.3.0
+ function-bind: 1.1.2
+
+ call-bound@1.0.4:
+ dependencies:
+ call-bind-apply-helpers: 1.0.2
+ get-intrinsic: 1.3.0
+
+ chokidar@3.6.0:
+ dependencies:
+ anymatch: 3.1.3
+ braces: 3.0.3
+ glob-parent: 5.1.2
+ is-binary-path: 2.1.0
+ is-glob: 4.0.3
+ normalize-path: 3.0.0
+ readdirp: 3.6.0
+ optionalDependencies:
+ fsevents: 2.3.3
+
+ combined-stream@1.0.8:
+ dependencies:
+ delayed-stream: 1.0.0
+
+ concat-map@0.0.1: {}
+
+ content-disposition@1.0.0:
+ dependencies:
+ safe-buffer: 5.2.1
+
+ content-type@1.0.5: {}
+
+ cookie-signature@1.2.2: {}
+
+ cookie@0.7.2: {}
+
+ cors@2.8.5:
+ dependencies:
+ object-assign: 4.1.1
+ vary: 1.1.2
+
+ create-require@1.1.1: {}
+
+ cross-fetch@3.2.0:
+ dependencies:
+ node-fetch: 2.7.0
+ transitivePeerDependencies:
+ - encoding
+
+ crypto-js@4.2.0: {}
+
+ dayjs@1.11.13: {}
+
+ debug@4.4.1(supports-color@5.5.0):
+ dependencies:
+ ms: 2.1.3
+ optionalDependencies:
+ supports-color: 5.5.0
+
+ delayed-stream@1.0.0: {}
+
+ depd@2.0.0: {}
+
+ diff@4.0.2: {}
+
+ dotenv@16.5.0: {}
+
+ dunder-proto@1.0.1:
+ dependencies:
+ call-bind-apply-helpers: 1.0.2
+ es-errors: 1.3.0
+ gopd: 1.2.0
+
+ ecdsa-sig-formatter@1.0.11:
+ dependencies:
+ safe-buffer: 5.2.1
+
+ ee-first@1.1.1: {}
+
+ encodeurl@2.0.0: {}
+
+ es-define-property@1.0.1: {}
+
+ es-errors@1.3.0: {}
+
+ es-object-atoms@1.1.1:
+ dependencies:
+ es-errors: 1.3.0
+
+ es-set-tostringtag@2.1.0:
+ dependencies:
+ es-errors: 1.3.0
+ get-intrinsic: 1.3.0
+ has-tostringtag: 1.0.2
+ hasown: 2.0.2
+
+ esbuild@0.25.5:
+ optionalDependencies:
+ '@esbuild/aix-ppc64': 0.25.5
+ '@esbuild/android-arm': 0.25.5
+ '@esbuild/android-arm64': 0.25.5
+ '@esbuild/android-x64': 0.25.5
+ '@esbuild/darwin-arm64': 0.25.5
+ '@esbuild/darwin-x64': 0.25.5
+ '@esbuild/freebsd-arm64': 0.25.5
+ '@esbuild/freebsd-x64': 0.25.5
+ '@esbuild/linux-arm': 0.25.5
+ '@esbuild/linux-arm64': 0.25.5
+ '@esbuild/linux-ia32': 0.25.5
+ '@esbuild/linux-loong64': 0.25.5
+ '@esbuild/linux-mips64el': 0.25.5
+ '@esbuild/linux-ppc64': 0.25.5
+ '@esbuild/linux-riscv64': 0.25.5
+ '@esbuild/linux-s390x': 0.25.5
+ '@esbuild/linux-x64': 0.25.5
+ '@esbuild/netbsd-arm64': 0.25.5
+ '@esbuild/netbsd-x64': 0.25.5
+ '@esbuild/openbsd-arm64': 0.25.5
+ '@esbuild/openbsd-x64': 0.25.5
+ '@esbuild/sunos-x64': 0.25.5
+ '@esbuild/win32-arm64': 0.25.5
+ '@esbuild/win32-ia32': 0.25.5
+ '@esbuild/win32-x64': 0.25.5
+
+ escape-html@1.0.3: {}
+
+ etag@1.8.1: {}
+
+ express@5.1.0:
+ dependencies:
+ accepts: 2.0.0
+ body-parser: 2.2.0
+ content-disposition: 1.0.0
+ content-type: 1.0.5
+ cookie: 0.7.2
+ cookie-signature: 1.2.2
+ debug: 4.4.1(supports-color@5.5.0)
+ encodeurl: 2.0.0
+ escape-html: 1.0.3
+ etag: 1.8.1
+ finalhandler: 2.1.0
+ fresh: 2.0.0
+ http-errors: 2.0.0
+ merge-descriptors: 2.0.0
+ mime-types: 3.0.1
+ on-finished: 2.4.1
+ once: 1.4.0
+ parseurl: 1.3.3
+ proxy-addr: 2.0.7
+ qs: 6.14.0
+ range-parser: 1.2.1
+ router: 2.2.0
+ send: 1.2.0
+ serve-static: 2.2.0
+ statuses: 2.0.1
+ type-is: 2.0.1
+ vary: 1.1.2
+ transitivePeerDependencies:
+ - supports-color
+
+ fill-range@7.1.1:
+ dependencies:
+ to-regex-range: 5.0.1
+
+ finalhandler@2.1.0:
+ dependencies:
+ debug: 4.4.1(supports-color@5.5.0)
+ encodeurl: 2.0.0
+ escape-html: 1.0.3
+ on-finished: 2.4.1
+ parseurl: 1.3.3
+ statuses: 2.0.1
+ transitivePeerDependencies:
+ - supports-color
+
+ follow-redirects@1.15.9(debug@4.4.1):
+ optionalDependencies:
+ debug: 4.4.1(supports-color@5.5.0)
+
+ form-data@4.0.2:
+ dependencies:
+ asynckit: 0.4.0
+ combined-stream: 1.0.8
+ es-set-tostringtag: 2.1.0
+ mime-types: 2.1.35
+
+ forwarded@0.2.0: {}
+
+ fresh@2.0.0: {}
+
+ fsevents@2.3.3:
+ optional: true
+
+ function-bind@1.1.2: {}
+
+ get-intrinsic@1.3.0:
+ dependencies:
+ call-bind-apply-helpers: 1.0.2
+ es-define-property: 1.0.1
+ es-errors: 1.3.0
+ es-object-atoms: 1.1.1
+ function-bind: 1.1.2
+ get-proto: 1.0.1
+ gopd: 1.2.0
+ has-symbols: 1.1.0
+ hasown: 2.0.2
+ math-intrinsics: 1.1.0
+
+ get-proto@1.0.1:
+ dependencies:
+ dunder-proto: 1.0.1
+ es-object-atoms: 1.1.1
+
+ get-tsconfig@4.10.1:
+ dependencies:
+ resolve-pkg-maps: 1.0.0
+
+ glob-parent@5.1.2:
+ dependencies:
+ is-glob: 4.0.3
+
+ gopd@1.2.0: {}
+
+ has-flag@3.0.0: {}
+
+ has-symbols@1.1.0: {}
+
+ has-tostringtag@1.0.2:
+ dependencies:
+ has-symbols: 1.1.0
+
+ hasown@2.0.2:
+ dependencies:
+ function-bind: 1.1.2
+
+ http-errors@2.0.0:
+ dependencies:
+ depd: 2.0.0
+ inherits: 2.0.4
+ setprototypeof: 1.2.0
+ statuses: 2.0.1
+ toidentifier: 1.0.1
+
+ https-proxy-agent@5.0.1:
+ dependencies:
+ agent-base: 6.0.2
+ debug: 4.4.1(supports-color@5.5.0)
+ transitivePeerDependencies:
+ - supports-color
+
+ iconv-lite@0.6.3:
+ dependencies:
+ safer-buffer: 2.1.2
+
+ ieee754@1.2.1: {}
+
+ ignore-by-default@1.0.1: {}
+
+ inherits@2.0.4: {}
+
+ ipaddr.js@1.9.1: {}
+
+ is-binary-path@2.1.0:
+ dependencies:
+ binary-extensions: 2.3.0
+
+ is-extglob@2.1.1: {}
+
+ is-glob@4.0.3:
+ dependencies:
+ is-extglob: 2.1.1
+
+ is-number@7.0.0: {}
+
+ is-promise@4.0.0: {}
+
+ jose@4.15.9: {}
+
+ jsonwebtoken@9.0.2:
+ dependencies:
+ jws: 3.2.2
+ lodash.includes: 4.3.0
+ lodash.isboolean: 3.0.3
+ lodash.isinteger: 4.0.4
+ lodash.isnumber: 3.0.3
+ lodash.isplainobject: 4.0.6
+ lodash.isstring: 4.0.1
+ lodash.once: 4.1.1
+ ms: 2.1.3
+ semver: 7.7.2
+
+ jwa@1.4.2:
+ dependencies:
+ buffer-equal-constant-time: 1.0.1
+ ecdsa-sig-formatter: 1.0.11
+ safe-buffer: 5.2.1
+
+ jws@3.2.2:
+ dependencies:
+ jwa: 1.4.2
+ safe-buffer: 5.2.1
+
+ libphonenumber-js@1.12.8: {}
+
+ lodash.includes@4.3.0: {}
+
+ lodash.isboolean@3.0.3: {}
+
+ lodash.isinteger@4.0.4: {}
+
+ lodash.isnumber@3.0.3: {}
+
+ lodash.isplainobject@4.0.6: {}
+
+ lodash.isstring@4.0.1: {}
+
+ lodash.once@4.1.1: {}
+
+ make-error@1.3.6: {}
+
+ math-intrinsics@1.1.0: {}
+
+ media-typer@1.1.0: {}
+
+ merge-descriptors@2.0.0: {}
+
+ mime-db@1.52.0: {}
+
+ mime-db@1.54.0: {}
+
+ mime-types@2.1.35:
+ dependencies:
+ mime-db: 1.52.0
+
+ mime-types@3.0.1:
+ dependencies:
+ mime-db: 1.54.0
+
+ minimatch@3.1.2:
+ dependencies:
+ brace-expansion: 1.1.11
+
+ ms@2.1.3: {}
+
+ negotiator@1.0.0: {}
+
+ node-fetch@2.7.0:
+ dependencies:
+ whatwg-url: 5.0.0
+
+ nodemailer@6.10.1: {}
+
+ nodemon@3.1.10:
+ dependencies:
+ chokidar: 3.6.0
+ debug: 4.4.1(supports-color@5.5.0)
+ ignore-by-default: 1.0.1
+ minimatch: 3.1.2
+ pstree.remy: 1.1.8
+ semver: 7.7.2
+ simple-update-notifier: 2.0.0
+ supports-color: 5.5.0
+ touch: 3.1.1
+ undefsafe: 2.0.5
+
+ normalize-path@3.0.0: {}
+
+ object-assign@4.1.1: {}
+
+ object-inspect@1.13.4: {}
+
+ on-finished@2.4.1:
+ dependencies:
+ ee-first: 1.1.1
+
+ once@1.4.0:
+ dependencies:
+ wrappy: 1.0.2
+
+ pako@2.1.0: {}
+
+ parseurl@1.3.3: {}
+
+ path-to-regexp@8.2.0: {}
+
+ picomatch@2.3.1: {}
+
+ pkce-challenge@3.1.0:
+ dependencies:
+ crypto-js: 4.2.0
+
+ process@0.11.10: {}
+
+ proxy-addr@2.0.7:
+ dependencies:
+ forwarded: 0.2.0
+ ipaddr.js: 1.9.1
+
+ proxy-from-env@1.1.0: {}
+
+ pstree.remy@1.1.8: {}
+
+ qs@6.14.0:
+ dependencies:
+ side-channel: 1.1.0
+
+ querystringify@2.2.0: {}
+
+ range-parser@1.2.1: {}
+
+ raw-body@3.0.0:
+ dependencies:
+ bytes: 3.1.2
+ http-errors: 2.0.0
+ iconv-lite: 0.6.3
+ unpipe: 1.0.0
+
+ readdirp@3.6.0:
+ dependencies:
+ picomatch: 2.3.1
+
+ requires-port@1.0.0: {}
+
+ resolve-pkg-maps@1.0.0: {}
+
+ router@2.2.0:
+ dependencies:
+ debug: 4.4.1(supports-color@5.5.0)
+ depd: 2.0.0
+ is-promise: 4.0.0
+ parseurl: 1.3.3
+ path-to-regexp: 8.2.0
+ transitivePeerDependencies:
+ - supports-color
+
+ safe-buffer@5.2.1: {}
+
+ safer-buffer@2.1.2: {}
+
+ scmp@2.1.0: {}
+
+ semver@7.7.2: {}
+
+ send@1.2.0:
+ dependencies:
+ debug: 4.4.1(supports-color@5.5.0)
+ encodeurl: 2.0.0
+ escape-html: 1.0.3
+ etag: 1.8.1
+ fresh: 2.0.0
+ http-errors: 2.0.0
+ mime-types: 3.0.1
+ ms: 2.1.3
+ on-finished: 2.4.1
+ range-parser: 1.2.1
+ statuses: 2.0.1
+ transitivePeerDependencies:
+ - supports-color
+
+ serve-static@2.2.0:
+ dependencies:
+ encodeurl: 2.0.0
+ escape-html: 1.0.3
+ parseurl: 1.3.3
+ send: 1.2.0
+ transitivePeerDependencies:
+ - supports-color
+
+ set-cookie-parser@2.7.1: {}
+
+ setprototypeof@1.2.0: {}
+
+ side-channel-list@1.0.0:
+ dependencies:
+ es-errors: 1.3.0
+ object-inspect: 1.13.4
+
+ side-channel-map@1.0.1:
+ dependencies:
+ call-bound: 1.0.4
+ es-errors: 1.3.0
+ get-intrinsic: 1.3.0
+ object-inspect: 1.13.4
+
+ side-channel-weakmap@1.0.2:
+ dependencies:
+ call-bound: 1.0.4
+ es-errors: 1.3.0
+ get-intrinsic: 1.3.0
+ object-inspect: 1.13.4
+ side-channel-map: 1.0.1
+
+ side-channel@1.1.0:
+ dependencies:
+ es-errors: 1.3.0
+ object-inspect: 1.13.4
+ side-channel-list: 1.0.0
+ side-channel-map: 1.0.1
+ side-channel-weakmap: 1.0.2
+
+ simple-update-notifier@2.0.0:
+ dependencies:
+ semver: 7.7.2
+
+ statuses@2.0.1: {}
+
+ supertokens-js-override@0.0.4: {}
+
+ supertokens-node@22.1.0:
+ dependencies:
+ buffer: 6.0.3
+ content-type: 1.0.5
+ cookie: 0.7.2
+ cross-fetch: 3.2.0
+ debug: 4.4.1(supports-color@5.5.0)
+ jose: 4.15.9
+ libphonenumber-js: 1.12.8
+ nodemailer: 6.10.1
+ pako: 2.1.0
+ pkce-challenge: 3.1.0
+ process: 0.11.10
+ set-cookie-parser: 2.7.1
+ supertokens-js-override: 0.0.4
+ tldts: 6.1.86
+ twilio: 4.23.0(debug@4.4.1)
+ transitivePeerDependencies:
+ - encoding
+ - supports-color
+
+ supports-color@5.5.0:
+ dependencies:
+ has-flag: 3.0.0
+
+ tldts-core@6.1.86: {}
+
+ tldts@6.1.86:
+ dependencies:
+ tldts-core: 6.1.86
+
+ to-regex-range@5.0.1:
+ dependencies:
+ is-number: 7.0.0
+
+ toidentifier@1.0.1: {}
+
+ touch@3.1.1: {}
+
+ tr46@0.0.3: {}
+
+ ts-node@10.9.2(@types/node@22.15.29)(typescript@5.8.3):
+ dependencies:
+ '@cspotcode/source-map-support': 0.8.1
+ '@tsconfig/node10': 1.0.11
+ '@tsconfig/node12': 1.0.11
+ '@tsconfig/node14': 1.0.3
+ '@tsconfig/node16': 1.0.4
+ '@types/node': 22.15.29
+ acorn: 8.14.1
+ acorn-walk: 8.3.4
+ arg: 4.1.3
+ create-require: 1.1.1
+ diff: 4.0.2
+ make-error: 1.3.6
+ typescript: 5.8.3
+ v8-compile-cache-lib: 3.0.1
+ yn: 3.1.1
+
+ tsx@4.19.4:
+ dependencies:
+ esbuild: 0.25.5
+ get-tsconfig: 4.10.1
+ optionalDependencies:
+ fsevents: 2.3.3
+
+ twilio@4.23.0(debug@4.4.1):
+ dependencies:
+ axios: 1.9.0(debug@4.4.1)
+ dayjs: 1.11.13
+ https-proxy-agent: 5.0.1
+ jsonwebtoken: 9.0.2
+ qs: 6.14.0
+ scmp: 2.1.0
+ url-parse: 1.5.10
+ xmlbuilder: 13.0.2
+ transitivePeerDependencies:
+ - debug
+ - supports-color
+
+ type-is@2.0.1:
+ dependencies:
+ content-type: 1.0.5
+ media-typer: 1.1.0
+ mime-types: 3.0.1
+
+ typescript@5.8.3: {}
+
+ undefsafe@2.0.5: {}
+
+ undici-types@6.21.0: {}
+
+ unpipe@1.0.0: {}
+
+ url-parse@1.5.10:
+ dependencies:
+ querystringify: 2.2.0
+ requires-port: 1.0.0
+
+ v8-compile-cache-lib@3.0.1: {}
+
+ vary@1.1.2: {}
+
+ webidl-conversions@3.0.1: {}
+
+ whatwg-url@5.0.0:
+ dependencies:
+ tr46: 0.0.3
+ webidl-conversions: 3.0.1
+
+ wrappy@1.0.2: {}
+
+ xmlbuilder@13.0.2: {}
+
+ yn@3.1.1: {}
+
+ zod@3.25.48: {}
diff --git a/videos/long/complete-authentication-system-react/server/src/index.ts b/videos/long/complete-authentication-system-react/server/src/index.ts
new file mode 100644
index 0000000..334a9b2
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/src/index.ts
@@ -0,0 +1,103 @@
+import express, { Request, Response, NextFunction } from "express";
+import cors from "cors";
+import SuperTokens from "supertokens-node";
+import Session from "supertokens-node/recipe/session";
+import EmailPassword from "supertokens-node/recipe/emailpassword";
+import bodyParser from "body-parser";
+import {
+ errorHandler,
+ SessionRequest,
+ middleware,
+} from "supertokens-node/framework/express";
+import { verifySession } from "supertokens-node/recipe/session/framework/express";
+import { env } from "./lib/env";
+import z from "zod";
+
+SuperTokens.init({
+ framework: "express",
+ supertokens: {
+ connectionURI: env.SUPERTOKENS_CONNECTION_URI,
+ apiKey: env.SUPERTOKENS_API_KEY,
+ },
+ appInfo: {
+ appName: "complete-authentication-system-react",
+ apiDomain: env.API_BASE_URL,
+ websiteDomain: env.APP_BASE_URL,
+ apiBasePath: "/auth",
+ websiteBasePath: "/auth",
+ },
+ recipeList: [Session.init(), EmailPassword.init()],
+});
+
+const app = express();
+const PORT = 8000;
+
+app.use(bodyParser.json());
+
+app.use(
+ cors({
+ origin: env.APP_BASE_URL,
+ allowedHeaders: ["content-type", ...SuperTokens.getAllCORSHeaders()],
+ credentials: true,
+ })
+);
+
+app.use(middleware());
+
+app.get("/", (req: Request, res: Response) => {
+ res.json({ message: "Server is running with SuperTokens!" });
+});
+
+app.post(
+ "/change-email",
+ verifySession(),
+ async (req: SessionRequest, res: express.Response) => {
+ let session = req.session!;
+ let email = req.body.email;
+
+ const emailSchema = z.string().email();
+ const result = emailSchema.safeParse(email);
+
+ if (!result.success) {
+ res.status(400).json({ error: "Invalid email address" });
+ return;
+ }
+
+ // Update the email without requiring a password
+ const resp = await EmailPassword.updateEmailOrPassword({
+ recipeUserId: session.getRecipeUserId(),
+ email: email,
+ });
+
+ if (resp.status === "OK") {
+ res.status(200).json({ message: "Email updated successfully" });
+ return;
+ }
+ if (resp.status === "EMAIL_ALREADY_EXISTS_ERROR") {
+ res
+ .status(403)
+ .json({ error: "Email already exists. Please use a different email." });
+ return;
+ }
+ if (resp.status === "EMAIL_CHANGE_NOT_ALLOWED_ERROR") {
+ res
+ .status(403)
+ .json({ error: "Email change not allowed. Please contact support." });
+ return;
+ }
+
+ res.status(500).json({ error: "Internal server error" });
+ }
+);
+
+app.use(errorHandler());
+
+app.use((err: unknown, req: Request, res: Response, next: NextFunction) => {
+ console.error("Error:", err);
+ res.status(500).json({ error: "Internal server error" });
+});
+
+app.listen(PORT, () => {
+ console.log(`🚀 Server running on http://localhost:${PORT}`);
+ console.log(`📊 SuperTokens APIs available at http://localhost:${PORT}/auth`);
+});
diff --git a/videos/long/complete-authentication-system-react/server/src/lib/env.ts b/videos/long/complete-authentication-system-react/server/src/lib/env.ts
new file mode 100644
index 0000000..5e8c469
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/src/lib/env.ts
@@ -0,0 +1,12 @@
+import { z } from "zod/v4";
+
+import "dotenv/config";
+
+const envSchema = z.object({
+ SUPERTOKENS_CONNECTION_URI: z.string(),
+ SUPERTOKENS_API_KEY: z.string(),
+ API_BASE_URL: z.string(),
+ APP_BASE_URL: z.string(),
+});
+
+export const env = envSchema.parse(process.env);
diff --git a/videos/long/complete-authentication-system-react/server/tsconfig.json b/videos/long/complete-authentication-system-react/server/tsconfig.json
new file mode 100644
index 0000000..77da89d
--- /dev/null
+++ b/videos/long/complete-authentication-system-react/server/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "module": "commonjs",
+ "lib": ["ES2022"],
+ "outDir": "./dist",
+ "rootDir": "./src",
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "experimentalDecorators": true,
+ "emitDecoratorMetadata": true
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file
diff --git a/videos/long/compound-components-design-pattern/.eslintrc.cjs b/videos/long/compound-components-design-pattern/.eslintrc.cjs
new file mode 100644
index 0000000..4d0cd6f
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/.eslintrc.cjs
@@ -0,0 +1,36 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh', 'simple-import-sort'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ 'no-unused-vars': 'off',
+ 'simple-import-sort/imports': [
+ 'error',
+ {
+ groups: [
+ // External packages come first
+ ['^@?\\w'],
+ // Internal files
+ ['^@/'],
+ // Colocated files
+ ['^\\.\\./', '^\\./'],
+ // Style imports
+ ['^.+\\.?(css)$'],
+ ],
+ },
+ ],
+ },
+};
diff --git a/videos/long/compound-components-design-pattern/.gitignore b/videos/long/compound-components-design-pattern/.gitignore
new file mode 100644
index 0000000..4f21d99
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/.gitignore
@@ -0,0 +1,26 @@
+*.code-workspace
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/videos/long/compound-components-design-pattern/.prettierrc.cjs b/videos/long/compound-components-design-pattern/.prettierrc.cjs
new file mode 100644
index 0000000..d2f91d5
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/.prettierrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+ bracketSpacing: true,
+ plugins: ['prettier-plugin-tailwindcss'],
+ printWidth: 80,
+ quoteProps: 'consistent',
+ singleQuote: true,
+ trailingComma: 'all',
+};
diff --git a/videos/long/compound-components-design-pattern/README.md b/videos/long/compound-components-design-pattern/README.md
new file mode 100644
index 0000000..eda34c5
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/README.md
@@ -0,0 +1,9 @@
+# Cosden Solutions Example Code
+
+This repository provides the code shown in a specific video.
+
+## Instructions
+
+1. Install dependencies by running `pnpm install` (or `npm`/`yarn`)
+2. Run in dev mode by running `pnpm run dev` (or `npm`/`yarn`)
+3. Enjoy and learn!
diff --git a/videos/long/compound-components-design-pattern/index.html b/videos/long/compound-components-design-pattern/index.html
new file mode 100644
index 0000000..3a1cf24
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ ) : (
+ Welcome, {userId}
+ Change email
+
+
+
+ )}
+ Not logged in
+ Sign in
+ Sign up
+
+
+
+
+ );
+}
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Bold.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Light.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Medium.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Regular.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/compound-components-design-pattern/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/compound-components-design-pattern/src/components/PostCard.tsx b/videos/long/compound-components-design-pattern/src/components/PostCard.tsx
new file mode 100644
index 0000000..114cf4a
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/src/components/PostCard.tsx
@@ -0,0 +1,68 @@
+import { PropsWithChildren } from 'react';
+import { useContext } from 'react';
+import { createContext } from 'react';
+
+type PostCardContext = {
+ post: Post;
+};
+
+const PostCardContext = createContext
+ {children}
+
+ {post.title}
; +}; + +PostCard.Content = function PostCardContent() { + const { post } = usePostCardContext(); + + return{post.content}
; +}; + +PostCard.User = function PostCardUser() { + const { post } = usePostCardContext(); + + returnBy {post.user.name}
; +}; + +PostCard.Buttons = function PostCardButtons() { + return ( +
+
+
+
+ );
+};
diff --git a/videos/long/compound-components-design-pattern/src/index.css b/videos/long/compound-components-design-pattern/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/compound-components-design-pattern/src/main.tsx b/videos/long/compound-components-design-pattern/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/compound-components-design-pattern/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ data={dummyData}
+ columns={columns}
+ />
+
+ );
+}
+
+export default App;
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Bold.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Light.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Medium.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Regular.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/master-reusable-components-in-react/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/master-reusable-components-in-react/src/components/DataTable.tsx b/videos/long/master-reusable-components-in-react/src/components/DataTable.tsx
new file mode 100644
index 0000000..697183f
--- /dev/null
+++ b/videos/long/master-reusable-components-in-react/src/components/DataTable.tsx
@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+
+type Column+ Employee Table +
+
+
+
+
+ );
+}
+
+type TableHeaderPropsSomething went wrong! Please try again.
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample2.tsx b/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample2.tsx
new file mode 100644
index 0000000..7a90904
--- /dev/null
+++ b/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample2.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+const BASE_URL = "https://jsonplaceholder.typicode.com";
+
+interface Post {
+ id: number;
+ title: string;
+}
+
+export default function FetchExample2() {
+ const [page, setPage] = useState(0);
+
+ const {
+ data: posts,
+ isError,
+ isPending,
+ } = useQuery({
+ queryKey: ["posts", { page }],
+ queryFn: async () => {
+ const response = await fetch(`${BASE_URL}/posts?page=${page}`);
+ return (await response.json()) as Post[];
+ },
+ });
+
+ // Do cool things with the JSX
+
+ return (
+ Data Fething in React
+ + + {isLoading &&Loading...
}
+ {!isLoading && (
+ -
+ {posts.map((post) => {
+ return
- {post.title} ; + })} +
+
+ );
+}
diff --git a/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample3.tsx b/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample3.tsx
new file mode 100644
index 0000000..e48e8bc
--- /dev/null
+++ b/videos/long/modern-data-fetching-complete-guide/src/components/FetchExample3.tsx
@@ -0,0 +1,28 @@
+const BASE_URL = "https://jsonplaceholder.typicode.com";
+
+interface Post {
+ id: number;
+ title: string;
+}
+
+export default async function FetchExample3() {
+ const response = await fetch(`${BASE_URL}/posts`);
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch posts");
+ }
+
+ const posts = (await response.json()) as Post[];
+
+ return (
+ Data Fething in React
+ + + {isPending &&Loading...
}
+ {!isPending && (
+ -
+ {posts?.map((post) => {
+ return
- {post.title} ; + })} +
+
+ );
+}
diff --git a/videos/long/modern-data-fetching-complete-guide/src/components/Providers.tsx b/videos/long/modern-data-fetching-complete-guide/src/components/Providers.tsx
new file mode 100644
index 0000000..932870a
--- /dev/null
+++ b/videos/long/modern-data-fetching-complete-guide/src/components/Providers.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { PropsWithChildren } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+type ProvidersProps = PropsWithChildren;
+
+export default function Providers({ children }: ProvidersProps) {
+ return (
+ Data Fething in React
+-
+ {posts.map((post) => {
+ return
- {post.title} ; + })} +
+
+ );
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Bold.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Light.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Medium.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Regular.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/most-important-design-pattern-in-react/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/most-important-design-pattern-in-react/src/components/Counter.tsx b/videos/long/most-important-design-pattern-in-react/src/components/Counter.tsx
new file mode 100644
index 0000000..9cd3561
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/components/Counter.tsx
@@ -0,0 +1,13 @@
+import { useCount } from '@/hooks/useCount';
+
+export default function Counter() {
+ const { count, increment, decrement } = useCount();
+
+ return (
+ Cosden Solutions
+
+
+
+
+ );
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/components/DarkModeToggle.tsx b/videos/long/most-important-design-pattern-in-react/src/components/DarkModeToggle.tsx
new file mode 100644
index 0000000..ee7c3a1
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/components/DarkModeToggle.tsx
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export default function DarkModeToggle() {
+ const [isDarkMode, setIsDarkMode] = useState(false);
+
+ return (
+ Count: {count}
+
+
+
+ );
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/components/UserForm.tsx b/videos/long/most-important-design-pattern-in-react/src/components/UserForm.tsx
new file mode 100644
index 0000000..176ce38
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/components/UserForm.tsx
@@ -0,0 +1,75 @@
+import { FormEvent, useRef, useState } from 'react';
+
+export default function UserForm() {
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+
+ async function handleSubmit(e: FormEvent) {
+ // Do something with data...
+ }
+
+ return (
+
+ );
+}
+
+function UserFormItems() {
+ const [isVisible, setIsVisible] = useState(true);
+ const [items, setItems] = useState
+
+ );
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/hooks/useCount.ts b/videos/long/most-important-design-pattern-in-react/src/hooks/useCount.ts
new file mode 100644
index 0000000..e112ff3
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/hooks/useCount.ts
@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+
+function initializeCount() {
+ const savedCount = localStorage.getItem('count');
+ return savedCount ? Number(savedCount) : 0;
+}
+
+export function useCount() {
+ const [count, setCount] = useState(initializeCount);
+
+ useEffect(() => {
+ localStorage.setItem('count', count.toString());
+ }, [count]);
+
+ const increment = useCallback(() => {
+ setCount(count + 1);
+ }, []);
+
+ const decrement = useCallback(() => {
+ setCount(count - 1);
+ }, []);
+
+ return {
+ count,
+ increment,
+ decrement,
+ };
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/index.css b/videos/long/most-important-design-pattern-in-react/src/index.css
new file mode 100644
index 0000000..dc3a958
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/most-important-design-pattern-in-react/src/main.tsx b/videos/long/most-important-design-pattern-in-react/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/most-important-design-pattern-in-react/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ {isVisible && (
+
+
+
+
+
+ )}
+ -
+ {items.map((item, index) => (
+
- setSelectedItem(item)}> + {item} + + ))} +
+
+ Selected Item: {selectedItem}
+
+
+ );
+}
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Bold.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Light.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Medium.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Regular.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/multi-file-input-with-progress-bar/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/multi-file-input-with-progress-bar/src/components/FileUpload.tsx b/videos/long/multi-file-input-with-progress-bar/src/components/FileUpload.tsx
new file mode 100644
index 0000000..a5c39a3
--- /dev/null
+++ b/videos/long/multi-file-input-with-progress-bar/src/components/FileUpload.tsx
@@ -0,0 +1,269 @@
+import axios from 'axios';
+import {
+ FileAudio,
+ FileIcon,
+ FileImage,
+ FileText,
+ FileVideo,
+ Plus,
+ Trash2,
+ Upload,
+ X,
+} from 'lucide-react';
+import { ChangeEvent, useRef, useState } from 'react';
+
+type FileWithProgress = {
+ id: string;
+ file: File;
+ progress: number;
+ uploaded: boolean;
+};
+
+export function FileUpload() {
+ const [files, setFiles] = useState
+
+ );
+}
+
+type FileInputProps = {
+ inputRef: React.RefObjectFile Upload
+
+
+
+
+ );
+}
+
+type FileItemProps = {
+ file: FileWithProgress;
+ onRemove: (id: string) => void;
+ uploading: boolean;
+};
+
+function FileItem({ file, onRemove, uploading }: FileItemProps) {
+ const Icon = getFileIcon(file.file.type);
+
+ return (
+ Files:
+
+ {files.map((file) => (
+
+
+
+ );
+}
+
+type ProgressBarProps = {
+ progress: number;
+};
+
+function ProgressBar({ progress }: ProgressBarProps) {
+ return (
+
+
+
+
+ {!uploading && (
+
+ )}
+
+ {file.file.name}
+
+
+ {formatFileSize(file.file.size)}
+ •
+ {file.file.type || 'Unknown type'}
+
+
+ {file.uploaded ? 'Completed' : `${Math.round(file.progress)}%`}
+
+
+
+
+ );
+}
+
+const getFileIcon = (mimeType: string) => {
+ if (mimeType.startsWith('image/')) return FileImage;
+ if (mimeType.startsWith('video/')) return FileVideo;
+ if (mimeType.startsWith('audio/')) return FileAudio;
+ if (mimeType === 'application/pdf') return FileText;
+ return FileIcon;
+};
+
+const formatFileSize = (bytes: number) => {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
diff --git a/videos/long/multi-file-input-with-progress-bar/src/index.css b/videos/long/multi-file-input-with-progress-bar/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/multi-file-input-with-progress-bar/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/multi-file-input-with-progress-bar/src/main.tsx b/videos/long/multi-file-input-with-progress-bar/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/multi-file-input-with-progress-bar/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ {children}
+
+
+ );
+}
diff --git a/videos/long/multi-step-form-react/src/app/onboarding/name/page.tsx b/videos/long/multi-step-form-react/src/app/onboarding/name/page.tsx
new file mode 100644
index 0000000..49a9aa0
--- /dev/null
+++ b/videos/long/multi-step-form-react/src/app/onboarding/name/page.tsx
@@ -0,0 +1,5 @@
+import OnboardingNameForm from "@/features/onboarding/components/onboaring-name-form";
+
+export default function OnboardingNamePage() {
+ return Cosden Solutions
++ {body} +
+ ) +}) +FormMessage.displayName = "FormMessage" + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +} diff --git a/videos/long/multi-step-form-react/src/components/ui/input.tsx b/videos/long/multi-step-form-react/src/components/ui/input.tsx new file mode 100644 index 0000000..68551b9 --- /dev/null +++ b/videos/long/multi-step-form-react/src/components/ui/input.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Input = React.forwardRef
+
+ );
+}
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/persist-state-localStorage-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/persist-state-localStorage-tutorial/src/hooks/usePersistedState.ts b/videos/long/persist-state-localStorage-tutorial/src/hooks/usePersistedState.ts
new file mode 100644
index 0000000..e23fcb3
--- /dev/null
+++ b/videos/long/persist-state-localStorage-tutorial/src/hooks/usePersistedState.ts
@@ -0,0 +1,16 @@
+import { getItem, setItem } from '@/utils/localStorage';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+export function usePersistedState{count}
+ +
+ {
+ setCategory(filters.category);
+ setMaxPrice(filters.maxPrice);
+ setSearch(filters.search);
+ }}
+ />
+
+ );
+}
diff --git a/videos/long/react-custom-filter-component/src/api/data/products.ts b/videos/long/react-custom-filter-component/src/api/data/products.ts
new file mode 100644
index 0000000..bc262ee
--- /dev/null
+++ b/videos/long/react-custom-filter-component/src/api/data/products.ts
@@ -0,0 +1,74 @@
+import { Product } from '@/types/product';
+
+export const products: Product[] = [
+ {
+ id: 1,
+ name: 'Product 1',
+ category: 'first',
+ price: 100,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 2,
+ name: 'Product 2',
+ category: 'second',
+ price: 200,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 3,
+ name: 'Product 3',
+ category: 'third',
+ price: 300,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 4,
+ name: 'Product 4',
+ category: 'first',
+ price: 400,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 5,
+ name: 'Product 5',
+ category: 'second',
+ price: 500,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 6,
+ name: 'Product 6',
+ category: 'third',
+ price: 600,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 7,
+ name: 'Product 7',
+ category: 'first',
+ price: 700,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 8,
+ name: 'Product 8',
+ category: 'second',
+ price: 800,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 9,
+ name: 'Product 9',
+ category: 'third',
+ price: 900,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 10,
+ name: 'Product 10',
+ category: 'first',
+ price: 1000,
+ image: 'https://via.placeholder.com/150',
+ },
+];
diff --git a/videos/long/react-custom-filter-component/src/api/products.ts b/videos/long/react-custom-filter-component/src/api/products.ts
new file mode 100644
index 0000000..80f31f0
--- /dev/null
+++ b/videos/long/react-custom-filter-component/src/api/products.ts
@@ -0,0 +1,33 @@
+import { products } from './data/products';
+
+export type ProductFilters = {
+ category?: 'first' | 'second' | 'third';
+ maxPrice?: number;
+ search?: string;
+};
+
+export const fetchProducts = async (options?: ProductFilters) => {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ let filteredProducts = products;
+
+ if (options?.category) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.category === options.category;
+ });
+ }
+
+ if (options?.maxPrice) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.price <= (options.maxPrice as number);
+ });
+ }
+
+ if (options?.search) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.name.toLowerCase().includes(options.search!.toLowerCase());
+ });
+ }
+
+ return filteredProducts;
+};
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-custom-filter-component/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-custom-filter-component/src/components/ProductList/ProductList.tsx b/videos/long/react-custom-filter-component/src/components/ProductList/ProductList.tsx
new file mode 100644
index 0000000..a34fe12
--- /dev/null
+++ b/videos/long/react-custom-filter-component/src/components/ProductList/ProductList.tsx
@@ -0,0 +1,27 @@
+import { Product } from '@/types/product';
+
+type ProductListProps = {
+ products: Product[];
+};
+
+export default function ProductList({ products }: ProductListProps) {
+ return (
+
+
+ Products
+
+ {data &&
+ Loading...
} +
+ {products.map((product) => (
+
+ );
+}
diff --git a/videos/long/react-custom-filter-component/src/components/ProductList/ProductListFilters.tsx b/videos/long/react-custom-filter-component/src/components/ProductList/ProductListFilters.tsx
new file mode 100644
index 0000000..8b45e11
--- /dev/null
+++ b/videos/long/react-custom-filter-component/src/components/ProductList/ProductListFilters.tsx
@@ -0,0 +1,52 @@
+import { ProductFilters } from '@/api/products';
+import { useDebounce } from '@/hooks/useDebounce';
+import { useEffect, useState } from 'react';
+
+type ProductListFiltersProps = {
+ onChange: (filters: ProductFilters) => void;
+};
+
+export default function ProductListFilters({
+ onChange,
+}: ProductListFiltersProps) {
+ const [search, setSearch] = useState
+ 
+
+ ))}
+
+
+
+
+ {product.name}
+{product.category}
+${product.price}
+
+ setSearch(e.target.value)}
+ placeholder="Search products"
+ />
+
+
+
+ );
+}
diff --git a/videos/long/react-custom-filter-component/src/hooks/useDebounce.ts b/videos/long/react-custom-filter-component/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..7462c11
--- /dev/null
+++ b/videos/long/react-custom-filter-component/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce
+
+ );
+}
diff --git a/videos/long/react-drag-drop-tutorial/src/Column.tsx b/videos/long/react-drag-drop-tutorial/src/Column.tsx
new file mode 100644
index 0000000..43d8e7f
--- /dev/null
+++ b/videos/long/react-drag-drop-tutorial/src/Column.tsx
@@ -0,0 +1,25 @@
+import { useDroppable } from '@dnd-kit/core';
+import { TaskCard } from './TaskCard';
+import { Column as ColumnType, Task } from './types';
+
+type ColumnProps = {
+ column: ColumnType;
+ tasks: Task[];
+};
+
+export function Column({ column, tasks }: ColumnProps) {
+ const { setNodeRef } = useDroppable({
+ id: column.id,
+ });
+
+ return (
+
+
+ {COLUMNS.map((column) => {
+ return (
+ task.status === column.id)}
+ />
+ );
+ })}
+
+
+
+
+ );
+}
diff --git a/videos/long/react-drag-drop-tutorial/src/TaskCard.tsx b/videos/long/react-drag-drop-tutorial/src/TaskCard.tsx
new file mode 100644
index 0000000..4317b33
--- /dev/null
+++ b/videos/long/react-drag-drop-tutorial/src/TaskCard.tsx
@@ -0,0 +1,31 @@
+import { useDraggable } from '@dnd-kit/core';
+import { Task } from './types';
+
+type TaskCardProps = {
+ task: Task;
+};
+
+export function TaskCard({ task }: TaskCardProps) {
+ const { attributes, listeners, setNodeRef, transform } = useDraggable({
+ id: task.id,
+ });
+
+ const style = transform
+ ? {
+ transform: `translate(${transform.x}px, ${transform.y}px)`,
+ }
+ : undefined;
+
+ return (
+ {column.title}
+
+ {tasks.map((task) => {
+ return
+
+
+ );
+}
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-drag-drop-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-drag-drop-tutorial/src/index.css b/videos/long/react-drag-drop-tutorial/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/react-drag-drop-tutorial/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/react-drag-drop-tutorial/src/main.tsx b/videos/long/react-drag-drop-tutorial/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/react-drag-drop-tutorial/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ {task.title}
+{task.description}
+
+
+ Welcome, user! Test!@!!!
+
+
+ );
+}
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-i18next-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-i18next-tutorial/src/index.css b/videos/long/react-i18next-tutorial/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/react-i18next-tutorial/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/react-i18next-tutorial/src/main.tsx b/videos/long/react-i18next-tutorial/src/main.tsx
new file mode 100644
index 0000000..cdec830
--- /dev/null
+++ b/videos/long/react-i18next-tutorial/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './utils/i18n';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+ );
+}
diff --git a/videos/long/react-playwright-tutorial/src/app/globals.css b/videos/long/react-playwright-tutorial/src/app/globals.css
new file mode 100644
index 0000000..b8ba322
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/src/app/globals.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type="text"] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/react-playwright-tutorial/src/app/layout.tsx b/videos/long/react-playwright-tutorial/src/app/layout.tsx
new file mode 100644
index 0000000..3314e47
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/videos/long/react-playwright-tutorial/src/app/page.tsx b/videos/long/react-playwright-tutorial/src/app/page.tsx
new file mode 100644
index 0000000..4885d9e
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/src/app/page.tsx
@@ -0,0 +1,15 @@
+import { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+ title: "Cosden Solutions",
+};
+
+export default function Home() {
+ return (
+ Home Page
+ Form +
+
+ );
+}
diff --git a/videos/long/react-playwright-tutorial/tailwind.config.ts b/videos/long/react-playwright-tutorial/tailwind.config.ts
new file mode 100644
index 0000000..efc2259
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/tailwind.config.ts
@@ -0,0 +1,31 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+ content: [
+ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ primary: {
+ 500: "#faf5cf",
+ 700: "#a37d54",
+ },
+ grayscale: {
+ 200: "#e6e6e6",
+ 400: "#c4c4c4",
+ 700: "#2b2b2b",
+ 800: "#1a1a1a",
+ 900: "#000",
+ },
+ },
+ fontFamily: {
+ manrope: ["Manrope"],
+ },
+ },
+ },
+ plugins: [],
+};
+export default config;
diff --git a/videos/long/react-playwright-tutorial/tests-examples/demo-todo-app.spec.ts b/videos/long/react-playwright-tutorial/tests-examples/demo-todo-app.spec.ts
new file mode 100644
index 0000000..8641cb5
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/tests-examples/demo-todo-app.spec.ts
@@ -0,0 +1,437 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+ 'buy some cheese',
+ 'feed the cat',
+ 'book a doctors appointment'
+] as const;
+
+test.describe('New Todo', () => {
+ test('should allow me to add todo items', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create 1st todo.
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ // Make sure the list only has one todo item.
+ await expect(page.getByTestId('todo-title')).toHaveText([
+ TODO_ITEMS[0]
+ ]);
+
+ // Create 2nd todo.
+ await newTodo.fill(TODO_ITEMS[1]);
+ await newTodo.press('Enter');
+
+ // Make sure the list now has two todo items.
+ await expect(page.getByTestId('todo-title')).toHaveText([
+ TODO_ITEMS[0],
+ TODO_ITEMS[1]
+ ]);
+
+ await checkNumberOfTodosInLocalStorage(page, 2);
+ });
+
+ test('should clear text input field when an item is added', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create one todo item.
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ // Check that input is empty.
+ await expect(newTodo).toBeEmpty();
+ await checkNumberOfTodosInLocalStorage(page, 1);
+ });
+
+ test('should append new items to the bottom of the list', async ({ page }) => {
+ // Create 3 items.
+ await createDefaultTodos(page);
+
+ // create a todo count locator
+ const todoCount = page.getByTestId('todo-count')
+
+ // Check test using different methods.
+ await expect(page.getByText('3 items left')).toBeVisible();
+ await expect(todoCount).toHaveText('3 items left');
+ await expect(todoCount).toContainText('3');
+ await expect(todoCount).toHaveText(/3/);
+
+ // Check all items in one call.
+ await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+});
+
+test.describe('Mark all as completed', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test.afterEach(async ({ page }) => {
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should allow me to mark all items as completed', async ({ page }) => {
+ // Complete all todos.
+ await page.getByLabel('Mark all as complete').check();
+
+ // Ensure all todos have 'completed' class.
+ await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+ });
+
+ test('should allow me to clear the complete state of all items', async ({ page }) => {
+ const toggleAll = page.getByLabel('Mark all as complete');
+ // Check and then immediately uncheck.
+ await toggleAll.check();
+ await toggleAll.uncheck();
+
+ // Should be no completed classes.
+ await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
+ });
+
+ test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+ const toggleAll = page.getByLabel('Mark all as complete');
+ await toggleAll.check();
+ await expect(toggleAll).toBeChecked();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+ // Uncheck first todo.
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ await firstTodo.getByRole('checkbox').uncheck();
+
+ // Reuse toggleAll locator and make sure its not checked.
+ await expect(toggleAll).not.toBeChecked();
+
+ await firstTodo.getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+ // Assert the toggle all is checked again.
+ await expect(toggleAll).toBeChecked();
+ });
+});
+
+test.describe('Item', () => {
+
+ test('should allow me to mark items as complete', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create two items.
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ // Check first item.
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ await firstTodo.getByRole('checkbox').check();
+ await expect(firstTodo).toHaveClass('completed');
+
+ // Check second item.
+ const secondTodo = page.getByTestId('todo-item').nth(1);
+ await expect(secondTodo).not.toHaveClass('completed');
+ await secondTodo.getByRole('checkbox').check();
+
+ // Assert completed class.
+ await expect(firstTodo).toHaveClass('completed');
+ await expect(secondTodo).toHaveClass('completed');
+ });
+
+ test('should allow me to un-mark items as complete', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create two items.
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ const secondTodo = page.getByTestId('todo-item').nth(1);
+ const firstTodoCheckbox = firstTodo.getByRole('checkbox');
+
+ await firstTodoCheckbox.check();
+ await expect(firstTodo).toHaveClass('completed');
+ await expect(secondTodo).not.toHaveClass('completed');
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ await firstTodoCheckbox.uncheck();
+ await expect(firstTodo).not.toHaveClass('completed');
+ await expect(secondTodo).not.toHaveClass('completed');
+ await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+ });
+
+ test('should allow me to edit an item', async ({ page }) => {
+ await createDefaultTodos(page);
+
+ const todoItems = page.getByTestId('todo-item');
+ const secondTodo = todoItems.nth(1);
+ await secondTodo.dblclick();
+ await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]);
+ await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ // Explicitly assert the new text value.
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2]
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+});
+
+test.describe('Editing', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should hide other controls when editing', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item').nth(1);
+ await todoItem.dblclick();
+ await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+ await expect(todoItem.locator('label', {
+ hasText: TODO_ITEMS[1],
+ })).not.toBeVisible();
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should save edits on blur', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2],
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+
+ test('should trim entered text', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages ');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2],
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+
+ test('should remove the item if an empty text string was entered', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ TODO_ITEMS[2],
+ ]);
+ });
+
+ test('should cancel edits on escape', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape');
+ await expect(todoItems).toHaveText(TODO_ITEMS);
+ });
+});
+
+test.describe('Counter', () => {
+ test('should display the current number of todo items', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // create a todo count locator
+ const todoCount = page.getByTestId('todo-count')
+
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ await expect(todoCount).toContainText('1');
+
+ await newTodo.fill(TODO_ITEMS[1]);
+ await newTodo.press('Enter');
+ await expect(todoCount).toContainText('2');
+
+ await checkNumberOfTodosInLocalStorage(page, 2);
+ });
+});
+
+test.describe('Clear completed button', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ });
+
+ test('should display the correct text', async ({ page }) => {
+ await page.locator('.todo-list li .toggle').first().check();
+ await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
+ });
+
+ test('should remove completed items when clicked', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).getByRole('checkbox').check();
+ await page.getByRole('button', { name: 'Clear completed' }).click();
+ await expect(todoItems).toHaveCount(2);
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+ });
+
+ test('should be hidden when there are no items that are completed', async ({ page }) => {
+ await page.locator('.todo-list li .toggle').first().check();
+ await page.getByRole('button', { name: 'Clear completed' }).click();
+ await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
+ });
+});
+
+test.describe('Persistence', () => {
+ test('should persist its data', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ const todoItems = page.getByTestId('todo-item');
+ const firstTodoCheck = todoItems.nth(0).getByRole('checkbox');
+ await firstTodoCheck.check();
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+ await expect(firstTodoCheck).toBeChecked();
+ await expect(todoItems).toHaveClass(['completed', '']);
+
+ // Ensure there is 1 completed item.
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ // Now reload.
+ await page.reload();
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+ await expect(firstTodoCheck).toBeChecked();
+ await expect(todoItems).toHaveClass(['completed', '']);
+ });
+});
+
+test.describe('Routing', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ // make sure the app had a chance to save updated todos in storage
+ // before navigating to a new view, otherwise the items can get lost :(
+ // in some frameworks like Durandal
+ await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+ });
+
+ test('should allow me to display active items', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item');
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Active' }).click();
+ await expect(todoItem).toHaveCount(2);
+ await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+ });
+
+ test('should respect the back button', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item');
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ await test.step('Showing all items', async () => {
+ await page.getByRole('link', { name: 'All' }).click();
+ await expect(todoItem).toHaveCount(3);
+ });
+
+ await test.step('Showing active items', async () => {
+ await page.getByRole('link', { name: 'Active' }).click();
+ });
+
+ await test.step('Showing completed items', async () => {
+ await page.getByRole('link', { name: 'Completed' }).click();
+ });
+
+ await expect(todoItem).toHaveCount(1);
+ await page.goBack();
+ await expect(todoItem).toHaveCount(2);
+ await page.goBack();
+ await expect(todoItem).toHaveCount(3);
+ });
+
+ test('should allow me to display completed items', async ({ page }) => {
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Completed' }).click();
+ await expect(page.getByTestId('todo-item')).toHaveCount(1);
+ });
+
+ test('should allow me to display all items', async ({ page }) => {
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Active' }).click();
+ await page.getByRole('link', { name: 'Completed' }).click();
+ await page.getByRole('link', { name: 'All' }).click();
+ await expect(page.getByTestId('todo-item')).toHaveCount(3);
+ });
+
+ test('should highlight the currently applied filter', async ({ page }) => {
+ await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');
+
+ //create locators for active and completed links
+ const activeLink = page.getByRole('link', { name: 'Active' });
+ const completedLink = page.getByRole('link', { name: 'Completed' });
+ await activeLink.click();
+
+ // Page change - active items.
+ await expect(activeLink).toHaveClass('selected');
+ await completedLink.click();
+
+ // Page change - completed items.
+ await expect(completedLink).toHaveClass('selected');
+ });
+});
+
+async function createDefaultTodos(page: Page) {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ for (const item of TODO_ITEMS) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+ return await page.waitForFunction(e => {
+ return JSON.parse(localStorage['react-todos']).length === e;
+ }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+ return await page.waitForFunction(e => {
+ return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+ }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+ return await page.waitForFunction(t => {
+ return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+ }, title);
+}
diff --git a/videos/long/react-playwright-tutorial/tests/example.spec.ts b/videos/long/react-playwright-tutorial/tests/example.spec.ts
new file mode 100644
index 0000000..40c38ea
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/tests/example.spec.ts
@@ -0,0 +1,59 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Home Page", () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("http://localhost:3000");
+ });
+
+ test("should have correct metadata and elements", async ({ page }) => {
+ await expect(page).toHaveTitle("Cosden Solutions");
+ await expect(
+ page.getByRole("heading", {
+ name: "Home Page",
+ })
+ ).toBeVisible();
+ await expect(page.getByRole("link", { name: "Form" })).toBeVisible();
+ });
+
+ test("should redirect to form page on click", async ({ page }) => {
+ await page.getByRole("link", { name: "Form" }).click();
+
+ await expect(page).toHaveTitle("Form");
+ });
+});
+
+test.describe("Form Page", () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("http://localhost:3000/form");
+ });
+
+ test("should have correct metadata and elements", async ({ page }) => {
+ await expect(page).toHaveTitle("Form");
+ await expect(
+ page.getByRole("heading", {
+ name: "Form",
+ })
+ ).toBeVisible();
+ await expect(page.getByPlaceholder("Enter Item")).toBeVisible();
+ await expect(page.getByRole("button", { name: "Add" })).toBeVisible();
+ });
+
+ test("should have empty items list on start", async ({ page }) => {
+ const itemsList = page.getByTestId("items-list");
+
+ await expect(itemsList).toBeEmpty();
+ });
+
+ test("should add item to list", async ({ page }) => {
+ const input = page.getByPlaceholder("Enter Item");
+
+ await input.fill("Item 1");
+
+ await page.getByRole("button", { name: "Add" }).click();
+
+ const item = page.getByTestId("item").nth(0);
+
+ await expect(item).toHaveText("Item 1");
+ await expect(input).toBeEmpty();
+ });
+});
diff --git a/videos/long/react-playwright-tutorial/tsconfig.json b/videos/long/react-playwright-tutorial/tsconfig.json
new file mode 100644
index 0000000..7b28589
--- /dev/null
+++ b/videos/long/react-playwright-tutorial/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/videos/long/react-query-state-management/.eslintrc.cjs b/videos/long/react-query-state-management/.eslintrc.cjs
new file mode 100644
index 0000000..4d0cd6f
--- /dev/null
+++ b/videos/long/react-query-state-management/.eslintrc.cjs
@@ -0,0 +1,36 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh', 'simple-import-sort'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ 'no-unused-vars': 'off',
+ 'simple-import-sort/imports': [
+ 'error',
+ {
+ groups: [
+ // External packages come first
+ ['^@?\\w'],
+ // Internal files
+ ['^@/'],
+ // Colocated files
+ ['^\\.\\./', '^\\./'],
+ // Style imports
+ ['^.+\\.?(css)$'],
+ ],
+ },
+ ],
+ },
+};
diff --git a/videos/long/react-query-state-management/.gitignore b/videos/long/react-query-state-management/.gitignore
new file mode 100644
index 0000000..4f21d99
--- /dev/null
+++ b/videos/long/react-query-state-management/.gitignore
@@ -0,0 +1,26 @@
+*.code-workspace
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/videos/long/react-query-state-management/.prettierrc.cjs b/videos/long/react-query-state-management/.prettierrc.cjs
new file mode 100644
index 0000000..d2f91d5
--- /dev/null
+++ b/videos/long/react-query-state-management/.prettierrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+ bracketSpacing: true,
+ plugins: ['prettier-plugin-tailwindcss'],
+ printWidth: 80,
+ quoteProps: 'consistent',
+ singleQuote: true,
+ trailingComma: 'all',
+};
diff --git a/videos/long/react-query-state-management/README.md b/videos/long/react-query-state-management/README.md
new file mode 100644
index 0000000..eda34c5
--- /dev/null
+++ b/videos/long/react-query-state-management/README.md
@@ -0,0 +1,9 @@
+# Cosden Solutions Example Code
+
+This repository provides the code shown in a specific video.
+
+## Instructions
+
+1. Install dependencies by running `pnpm install` (or `npm`/`yarn`)
+2. Run in dev mode by running `pnpm run dev` (or `npm`/`yarn`)
+3. Enjoy and learn!
diff --git a/videos/long/react-query-state-management/index.html b/videos/long/react-query-state-management/index.html
new file mode 100644
index 0000000..3a1cf24
--- /dev/null
+++ b/videos/long/react-query-state-management/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Form
+ +-
+ {items.map((item, index) => (
+
- + {item} + + ))} +
+
+ );
+}
+
+function UserCard() {
+ const { data } = useUserState();
+ return (
+ <>
+ {data?.name}
+ + ); +} diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Bold.ttf new file mode 100644 index 0000000..98c1c3d Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Bold.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraBold.ttf new file mode 100644 index 0000000..369d719 Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraBold.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraLight.ttf new file mode 100644 index 0000000..8915d96 Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-ExtraLight.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Light.ttf new file mode 100644 index 0000000..4942924 Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Light.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Medium.ttf new file mode 100644 index 0000000..5eda9ec Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Medium.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Regular.ttf new file mode 100644 index 0000000..1a07233 Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-Regular.ttf differ diff --git a/videos/long/react-query-state-management/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-query-state-management/src/assets/fonts/Manrope-SemiBold.ttf new file mode 100644 index 0000000..b6e9c20 Binary files /dev/null and b/videos/long/react-query-state-management/src/assets/fonts/Manrope-SemiBold.ttf differ diff --git a/videos/long/react-query-state-management/src/index.css b/videos/long/react-query-state-management/src/index.css new file mode 100644 index 0000000..516b009 --- /dev/null +++ b/videos/long/react-query-state-management/src/index.css @@ -0,0 +1,15 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + @apply bg-grayscale-800 p-4 font-manrope text-white; +} + +button { + @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50; +} + +input[type='text'] { + @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500; +} diff --git a/videos/long/react-query-state-management/src/main.tsx b/videos/long/react-query-state-management/src/main.tsx new file mode 100644 index 0000000..bf5e2e9 --- /dev/null +++ b/videos/long/react-query-state-management/src/main.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +import App from './App'; + +import './index.css'; + +const queryClient = new QueryClient(); + +ReactDOM.createRoot(document.getElementById('root')!).render( +
+
+ );
+}
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-storybook-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-storybook-tutorial/src/components/Button.tsx b/videos/long/react-storybook-tutorial/src/components/Button.tsx
new file mode 100644
index 0000000..f267c98
--- /dev/null
+++ b/videos/long/react-storybook-tutorial/src/components/Button.tsx
@@ -0,0 +1,51 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+
+type ButtonProps = PropsWithChildren<{
+ onClick?: () => void;
+ variant: 'primary' | 'secondary';
+ size: 'sm' | 'md' | 'lg';
+}>;
+
+export const Button = ({
+ children,
+ onClick,
+ variant = 'primary',
+ size = 'md',
+}: ButtonProps) => {
+ const variantStyles: RecordCosden Solutions
+{children}
;
+}
diff --git a/videos/long/react-storybook-tutorial/src/index.css b/videos/long/react-storybook-tutorial/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/react-storybook-tutorial/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/react-storybook-tutorial/src/main.tsx b/videos/long/react-storybook-tutorial/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/react-storybook-tutorial/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ );
+}
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-upload-files-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-upload-files-tutorial/src/components/FileUploader.tsx b/videos/long/react-upload-files-tutorial/src/components/FileUploader.tsx
new file mode 100644
index 0000000..45f8823
--- /dev/null
+++ b/videos/long/react-upload-files-tutorial/src/components/FileUploader.tsx
@@ -0,0 +1,84 @@
+import axios from 'axios';
+import { ChangeEvent, useState } from 'react';
+
+type UploadStatus = 'idle' | 'uploading' | 'success' | 'error';
+
+export default function FileUploader() {
+ const [file, setFile] = useState
+
+
+ {file && (
+
+ );
+}
diff --git a/videos/long/react-upload-files-tutorial/src/index.css b/videos/long/react-upload-files-tutorial/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/react-upload-files-tutorial/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/react-upload-files-tutorial/src/main.tsx b/videos/long/react-upload-files-tutorial/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/react-upload-files-tutorial/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ )}
+
+ {status === 'uploading' && (
+ File name: {file.name}
+Size: {(file.size / 1024).toFixed(2)} KB
+Type: {file.type}
+
+
+ )}
+
+ {file && status !== 'uploading' && (
+
+ )}
+
+ {status === 'success' && (
+
+
+
+ {uploadProgress}% uploaded
+File uploaded successfully!
+ )} + + {status === 'error' && ( +Upload failed. Please try again.
+ )} +
+
+ );
+}
diff --git a/videos/long/react-url-as-state/src/api/data/products.ts b/videos/long/react-url-as-state/src/api/data/products.ts
new file mode 100644
index 0000000..bc262ee
--- /dev/null
+++ b/videos/long/react-url-as-state/src/api/data/products.ts
@@ -0,0 +1,74 @@
+import { Product } from '@/types/product';
+
+export const products: Product[] = [
+ {
+ id: 1,
+ name: 'Product 1',
+ category: 'first',
+ price: 100,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 2,
+ name: 'Product 2',
+ category: 'second',
+ price: 200,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 3,
+ name: 'Product 3',
+ category: 'third',
+ price: 300,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 4,
+ name: 'Product 4',
+ category: 'first',
+ price: 400,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 5,
+ name: 'Product 5',
+ category: 'second',
+ price: 500,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 6,
+ name: 'Product 6',
+ category: 'third',
+ price: 600,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 7,
+ name: 'Product 7',
+ category: 'first',
+ price: 700,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 8,
+ name: 'Product 8',
+ category: 'second',
+ price: 800,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 9,
+ name: 'Product 9',
+ category: 'third',
+ price: 900,
+ image: 'https://via.placeholder.com/150',
+ },
+ {
+ id: 10,
+ name: 'Product 10',
+ category: 'first',
+ price: 1000,
+ image: 'https://via.placeholder.com/150',
+ },
+];
diff --git a/videos/long/react-url-as-state/src/api/products.ts b/videos/long/react-url-as-state/src/api/products.ts
new file mode 100644
index 0000000..80f31f0
--- /dev/null
+++ b/videos/long/react-url-as-state/src/api/products.ts
@@ -0,0 +1,33 @@
+import { products } from './data/products';
+
+export type ProductFilters = {
+ category?: 'first' | 'second' | 'third';
+ maxPrice?: number;
+ search?: string;
+};
+
+export const fetchProducts = async (options?: ProductFilters) => {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ let filteredProducts = products;
+
+ if (options?.category) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.category === options.category;
+ });
+ }
+
+ if (options?.maxPrice) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.price <= (options.maxPrice as number);
+ });
+ }
+
+ if (options?.search) {
+ filteredProducts = filteredProducts.filter((product) => {
+ return product.name.toLowerCase().includes(options.search!.toLowerCase());
+ });
+ }
+
+ return filteredProducts;
+};
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-Bold.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-Light.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-Medium.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-Regular.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/react-url-as-state/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/react-url-as-state/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/react-url-as-state/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/react-url-as-state/src/components/ProductList/ProductList.tsx b/videos/long/react-url-as-state/src/components/ProductList/ProductList.tsx
new file mode 100644
index 0000000..a34fe12
--- /dev/null
+++ b/videos/long/react-url-as-state/src/components/ProductList/ProductList.tsx
@@ -0,0 +1,27 @@
+import { Product } from '@/types/product';
+
+type ProductListProps = {
+ products: Product[];
+};
+
+export default function ProductList({ products }: ProductListProps) {
+ return (
+
+
+ Products
+
+ {data &&
+ Loading...
} +
+ {products.map((product) => (
+
+ );
+}
diff --git a/videos/long/react-url-as-state/src/components/ProductList/ProductListFilters.tsx b/videos/long/react-url-as-state/src/components/ProductList/ProductListFilters.tsx
new file mode 100644
index 0000000..f604a5a
--- /dev/null
+++ b/videos/long/react-url-as-state/src/components/ProductList/ProductListFilters.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+import { ProductFilters } from '@/api/products';
+import { useDebounce } from '@/hooks/useDebounce';
+import { useProductFilters } from '@/hooks/useProductFilters';
+
+export default function ProductListFilters() {
+ const { search, category, maxPrice, setFilters } = useProductFilters();
+
+ const [localSearch, setLocalSearch] =
+ useState
+
+
+ ))}
+
+
+
+
+ {product.name}
+{product.category}
+${product.price}
+
+ setLocalSearch(e.target.value)}
+ placeholder="Search products"
+ />
+
+
+
+ );
+}
diff --git a/videos/long/react-url-as-state/src/hooks/useDebounce.ts b/videos/long/react-url-as-state/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..7462c11
--- /dev/null
+++ b/videos/long/react-url-as-state/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce
+
+ );
+}
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Bold.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Light.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Medium.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Regular.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/refactoring-react-component/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/refactoring-react-component/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/refactoring-react-component/src/components/CreateProjectForm.tsx b/videos/long/refactoring-react-component/src/components/CreateProjectForm.tsx
new file mode 100644
index 0000000..3c5ecb0
--- /dev/null
+++ b/videos/long/refactoring-react-component/src/components/CreateProjectForm.tsx
@@ -0,0 +1,130 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+import {
+ Control,
+ useController,
+ useForm,
+ UseFormGetValues,
+ UseFormSetValue,
+} from 'react-hook-form';
+import { z } from 'zod';
+import TextInput from './TextInput';
+import { useKeyDown } from '@/hooks/useKeyDown';
+
+const createProjectFormSchema = z.object({
+ name: z.string(),
+ description: z.string().nullable(),
+ tasks: z.array(
+ z.object({
+ name: z.string(),
+ duration: z.coerce.number().int().positive(),
+ }),
+ ),
+});
+
+type CreateProjectFormValues = z.infer
+
+ {Array.from({ length: numberOfTasks }).map((_, index) => (
+
+ );
+}
diff --git a/videos/long/refactoring-react-component/src/components/TextInput.tsx b/videos/long/refactoring-react-component/src/components/TextInput.tsx
new file mode 100644
index 0000000..7dc33a0
--- /dev/null
+++ b/videos/long/refactoring-react-component/src/components/TextInput.tsx
@@ -0,0 +1,29 @@
+import { ComponentProps } from 'react';
+import { Control, useController } from 'react-hook-form';
+
+type TextInputProps = ComponentProps<'input'> & {
+ control: Control
+
+ ))}
+
+ {errors.tasks && (
+ {errors.tasks.message}
+ )}
+
+ {label && }
+
+ {errors[name] && (
+ {errors[name].message?.toString()}
+ )}
+
+ );
+}
diff --git a/videos/long/refactoring-react-component/src/hooks/useKeyDown.ts b/videos/long/refactoring-react-component/src/hooks/useKeyDown.ts
new file mode 100644
index 0000000..d02118b
--- /dev/null
+++ b/videos/long/refactoring-react-component/src/hooks/useKeyDown.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+export function useKeyDown(
+ key: KeyboardEvent['key'],
+ fn: () => void,
+ deps: any[] = [],
+) {
+ useEffect(() => {
+ function handleKeyDown(event: KeyboardEvent) {
+ if (event.key === key) {
+ fn();
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, deps);
+}
diff --git a/videos/long/refactoring-react-component/src/index.css b/videos/long/refactoring-react-component/src/index.css
new file mode 100644
index 0000000..73c0084
--- /dev/null
+++ b/videos/long/refactoring-react-component/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button[type='submit'] {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/refactoring-react-component/src/main.tsx b/videos/long/refactoring-react-component/src/main.tsx
new file mode 100644
index 0000000..2bc4d62
--- /dev/null
+++ b/videos/long/refactoring-react-component/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+ Id
+ Name
+
+ )}
+ />
+
+ );
+}
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Bold.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Light.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Medium.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Regular.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/rendering-100k-rows-in-react/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/rendering-100k-rows-in-react/src/components/UserCard.tsx b/videos/long/rendering-100k-rows-in-react/src/components/UserCard.tsx
new file mode 100644
index 0000000..2154b16
--- /dev/null
+++ b/videos/long/rendering-100k-rows-in-react/src/components/UserCard.tsx
@@ -0,0 +1,10 @@
+import { User } from '@/user';
+
+export default function UserCard({ user }: { user: User }) {
+ return (
+ <>
+ Loading...
+ : undefined
+ }
+ fixedHeaderContent={() => (
+
+
+ );
+}
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Bold.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Light.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Medium.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Regular.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/reusable-create-edit-form/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/reusable-create-edit-form/src/components/UserForm.tsx b/videos/long/reusable-create-edit-form/src/components/UserForm.tsx
new file mode 100644
index 0000000..241d226
--- /dev/null
+++ b/videos/long/reusable-create-edit-form/src/components/UserForm.tsx
@@ -0,0 +1,94 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { User } from '@/types/User';
+
+import { Button } from './ui/button';
+import DatePicker from './ui/datepicker';
+import { Input } from './ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from './ui/select';
+
+const formSchema = z.object({
+ birthday: z.date(),
+ email: z.string().email(),
+ firstName: z.string(),
+ lastName: z.string(),
+ role: z.union([z.literal('editor'), z.literal('viewer')]),
+});
+
+type FormValues = z.infer
+
+ );
+}
diff --git a/videos/long/reusable-create-edit-form/src/components/ui/button.tsx b/videos/long/reusable-create-edit-form/src/components/ui/button.tsx
new file mode 100644
index 0000000..0ba4277
--- /dev/null
+++ b/videos/long/reusable-create-edit-form/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributesUser Form
+ + +
+
+ );
+}
diff --git a/videos/long/role-based-authentication-in-react/src/api/auth.ts b/videos/long/role-based-authentication-in-react/src/api/auth.ts
new file mode 100644
index 0000000..3c52e24
--- /dev/null
+++ b/videos/long/role-based-authentication-in-react/src/api/auth.ts
@@ -0,0 +1,27 @@
+import { User } from '@/types/user';
+
+const testUser: User = {
+ id: 1,
+ email: 'test@email.com',
+ role: 'viewer',
+};
+
+export async function getUser() {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ const authToken = generateAuthToken();
+
+ return [200, { authToken, user: testUser }] as const;
+}
+
+export async function login() {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+
+ const authToken = generateAuthToken();
+
+ return [200, { authToken, user: testUser }] as const;
+}
+
+function generateAuthToken() {
+ return Math.random().toString(36).substring(2);
+}
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Bold.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Light.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Medium.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Regular.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/role-based-authentication-in-react/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/role-based-authentication-in-react/src/components/AuthProvider.tsx b/videos/long/role-based-authentication-in-react/src/components/AuthProvider.tsx
new file mode 100644
index 0000000..7c04455
--- /dev/null
+++ b/videos/long/role-based-authentication-in-react/src/components/AuthProvider.tsx
@@ -0,0 +1,85 @@
+import { getUser, login } from '@/api/auth';
+import { User } from '@/types/user';
+import {
+ createContext,
+ PropsWithChildren,
+ useContext,
+ useEffect,
+ useState,
+} from 'react';
+
+type AuthContext = {
+ authToken?: string | null;
+ currentUser?: User | null;
+ handleLogin: () => PromiseCosden Solutions
+ Protected Route + {authToken ? ( + + ) : ( + + )} +Loading...
;
+ }
+
+ if (
+ currentUser === null ||
+ (allowedRoles && !allowedRoles.includes(currentUser.role))
+ ) {
+ return Permission denied
;
+ }
+
+ return children;
+}
diff --git a/videos/long/role-based-authentication-in-react/src/index.css b/videos/long/role-based-authentication-in-react/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/role-based-authentication-in-react/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/role-based-authentication-in-react/src/main.tsx b/videos/long/role-based-authentication-in-react/src/main.tsx
new file mode 100644
index 0000000..647d729
--- /dev/null
+++ b/videos/long/role-based-authentication-in-react/src/main.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import AuthProvider from './components/AuthProvider';
+import ProtectedRoute from './components/ProtectedRoute';
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: Protected content
+
+
+ );
+};
+
+export default App;
diff --git a/videos/long/rtk-query-tutorial/src/assets/react.svg b/videos/long/rtk-query-tutorial/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/videos/long/rtk-query-tutorial/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/videos/long/rtk-query-tutorial/src/components/Counter.tsx b/videos/long/rtk-query-tutorial/src/components/Counter.tsx
new file mode 100644
index 0000000..e773268
--- /dev/null
+++ b/videos/long/rtk-query-tutorial/src/components/Counter.tsx
@@ -0,0 +1,20 @@
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../state/store";
+import { decrement, incrementAsync } from "../state/counter/counterSlice";
+
+const Counter = () => {
+ const count = useSelector((state: RootState) => state.counter.value);
+ const dispatch = useDispatchRedux Complete Tutorial
+
+
+ );
+};
+
+export default Counter;
diff --git a/videos/long/rtk-query-tutorial/src/components/PostsList.tsx b/videos/long/rtk-query-tutorial/src/components/PostsList.tsx
new file mode 100644
index 0000000..afc5124
--- /dev/null
+++ b/videos/long/rtk-query-tutorial/src/components/PostsList.tsx
@@ -0,0 +1,46 @@
+import {
+ useCreatePostMutation,
+ useGetPostsQuery,
+} from "../state/posts/postsApiSlice";
+
+const PostsList = () => {
+ const {
+ data: posts,
+ isLoading,
+ isError,
+ } = useGetPostsQuery({
+ limit: 1,
+ offset: 0,
+ });
+
+ const [createPostMutation, { isLoading: isCreatingPost }] =
+ useCreatePostMutation();
+
+ if (isLoading) {
+ return {count}
+
+
+
+
+ Loading...
;
+ }
+
+ if (isError) {
+ return Error...
;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default PostsList;
diff --git a/videos/long/rtk-query-tutorial/src/index.css b/videos/long/rtk-query-tutorial/src/index.css
new file mode 100644
index 0000000..6151f9a
--- /dev/null
+++ b/videos/long/rtk-query-tutorial/src/index.css
@@ -0,0 +1,62 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+ margin-top: 0;
+}
+
+h2 {
+ margin: 0;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/videos/long/rtk-query-tutorial/src/main.tsx b/videos/long/rtk-query-tutorial/src/main.tsx
new file mode 100644
index 0000000..172f2e3
--- /dev/null
+++ b/videos/long/rtk-query-tutorial/src/main.tsx
@@ -0,0 +1,11 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { Provider } from "react-redux";
+import { store } from "./state/store.ts";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+ -
+ {posts?.map((post) => {
+ return
- {post.title} ; + })} +
This runs on the client
+This runs on the server.
+
+
+ );
+}
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Bold.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Light.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Medium.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Regular.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/solving-react-interview-questions/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/solving-react-interview-questions/src/components/MemoryGame.tsx b/videos/long/solving-react-interview-questions/src/components/MemoryGame.tsx
new file mode 100644
index 0000000..40142df
--- /dev/null
+++ b/videos/long/solving-react-interview-questions/src/components/MemoryGame.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+
+type Card = {
+ id: number;
+ imageUrl: string;
+ isFlipped: boolean;
+ isMatched: boolean;
+};
+
+type MemoryGameProps = {
+ images: string[];
+};
+
+export default function MemoryGame({
+ images,
+}: MemoryGameProps) {
+ const [cards, setCards] = useState
+ {cards.map((card) => (
+
+ );
+}
+
+export function shuffleArray handleCardClick(card)}
+ className={`aspect-square cursor-pointer rounded-lg border-2 border-grayscale-700 transition-all duration-300 ${
+ card.isFlipped || card.isMatched
+ ? 'rotate-0'
+ : 'rotate-180 bg-primary-700'
+ }`}
+ >
+ {(card.isFlipped || card.isMatched) && (
+ 
+ )}
+
+ ))}
+
+
+ );
+}
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Bold.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..98c1c3d
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..369d719
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraBold.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..8915d96
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-ExtraLight.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Light.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Light.ttf
new file mode 100644
index 0000000..4942924
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Light.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Medium.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..5eda9ec
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Regular.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..1a07233
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-SemiBold.ttf b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..b6e9c20
Binary files /dev/null and b/videos/long/tanstack-router-tutorial/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/videos/long/tanstack-router-tutorial/src/index.css b/videos/long/tanstack-router-tutorial/src/index.css
new file mode 100644
index 0000000..516b009
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/index.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-grayscale-800 p-4 font-manrope text-white;
+}
+
+button {
+ @apply rounded-md bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-2 font-semibold text-black hover:opacity-50 disabled:from-grayscale-700 disabled:to-grayscale-700 disabled:text-white disabled:opacity-50;
+}
+
+input[type='text'] {
+ @apply rounded-md border-2 border-grayscale-700 bg-grayscale-700 px-2 py-1 text-white shadow-lg outline-none focus:border-primary-500;
+}
diff --git a/videos/long/tanstack-router-tutorial/src/main.tsx b/videos/long/tanstack-router-tutorial/src/main.tsx
new file mode 100644
index 0000000..3147290
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/main.tsx
@@ -0,0 +1,29 @@
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen';
+
+import './index.css';
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!;
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement);
+ root.render(
+ Cosden Solutions
+
+
+ Home
+ {' '}
+
+ About
+
+
+ Posts
+
+
+ +
Hello from About!
;
+}
diff --git a/videos/long/tanstack-router-tutorial/src/routes/index.tsx b/videos/long/tanstack-router-tutorial/src/routes/index.tsx
new file mode 100644
index 0000000..52e91d1
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+ component: Index,
+});
+
+function Index() {
+ return (
+
+
+ );
+}
diff --git a/videos/long/tanstack-router-tutorial/src/routes/posts/$postId.tsx b/videos/long/tanstack-router-tutorial/src/routes/posts/$postId.tsx
new file mode 100644
index 0000000..5b652bc
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/routes/posts/$postId.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/posts/$postId')({
+ component: RouteComponent,
+ loader: async ({ params }) => {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ return {
+ postId: params.postId,
+ };
+ },
+ pendingComponent: () => Welcome Home!
+Loading...
,
+ errorComponent: () => Error
,
+});
+
+function RouteComponent() {
+ const { postId } = Route.useLoaderData();
+
+ return Hello {postId}!
;
+}
diff --git a/videos/long/tanstack-router-tutorial/src/routes/posts/index.tsx b/videos/long/tanstack-router-tutorial/src/routes/posts/index.tsx
new file mode 100644
index 0000000..6f1bf5f
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/routes/posts/index.tsx
@@ -0,0 +1,39 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/posts/')({
+ component: Posts,
+ validateSearch: (search) => {
+ return {
+ q: (search.q as string) || '',
+ };
+ },
+ loaderDeps: ({ search: { q } }) => ({ q }),
+ loader: async ({ deps: { q } }) => {
+ const posts = ['post1', 'post2', 'post3'];
+ return {
+ posts: posts.filter((post) => post === q),
+ };
+ },
+});
+
+function Posts() {
+ const { posts } = Route.useLoaderData();
+ const { q } = Route.useSearch();
+
+ return (
+
+ {posts.map((post) => (
+
+ );
+}
diff --git a/videos/long/tanstack-router-tutorial/src/vite-env.d.ts b/videos/long/tanstack-router-tutorial/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/videos/long/tanstack-router-tutorial/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+ {post}
+
+
+ ))}
+
+ {messages.map((message) => (
+
+ );
+}
diff --git a/videos/long/vercel-ai-sdk-tutorial/src/features/shared/components/ui/button.tsx b/videos/long/vercel-ai-sdk-tutorial/src/features/shared/components/ui/button.tsx
new file mode 100644
index 0000000..f8a15d5
--- /dev/null
+++ b/videos/long/vercel-ai-sdk-tutorial/src/features/shared/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/cn";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps
+ {message.role === "user" ? "User: " : "AI: "}
+ {message.parts.map((part, i) => {
+ switch (part.type) {
+ case "text":
+ return
+ ))}
+
+
+ {part.text}
;
+ }
+ })}
+
+
+ );
+}
diff --git a/videos/long/zod-validation-in-react/src/api/api.ts b/videos/long/zod-validation-in-react/src/api/api.ts
new file mode 100644
index 0000000..6439ccd
--- /dev/null
+++ b/videos/long/zod-validation-in-react/src/api/api.ts
@@ -0,0 +1,23 @@
+import { env } from '@/utils/env';
+import { z } from 'zod';
+
+const getUsersSchema = z.object({
+ limit: z.number(),
+ offset: z.number(),
+});
+
+type UsersFilters = z.infer