add next app

web/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

web/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

web/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.5",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "react-hot-toast": "^2.6.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

web/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - sharp
+  - unrs-resolver

web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

web/src/api/auth.ts

@@ -0,0 +1,40 @@
+import { $axios } from "@/lib/axios";
+import { useMutation } from "@tanstack/react-query";
+
+export type RegisterData = {
+  email: string;
+  login: string;
+  password: string;
+};
+
+export const useRegisterMutation = () => {
+  return useMutation({
+    mutationFn: async (data: RegisterData) => {
+      const resp = await $axios.post("/auth/register", data);
+      return resp.data;
+    },
+  });
+};
+
+export type LoginData = {
+  login: string;
+  password: string;
+};
+
+export const useLoginMutation = () => {
+  return useMutation({
+    mutationFn: async (data: LoginData) => {
+      const resp = await $axios.post("/auth/login", data);
+      return resp.data;
+    },
+  });
+};
+
+export const useLogoutMutation = () => {
+  return useMutation({
+    mutationFn: async () => {
+      const resp = await $axios.post("/auth/logout");
+      return resp.data;
+    },
+  });
+};

web/src/api/user.ts

@@ -0,0 +1,20 @@
+import { $axios } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+export type User = {
+  id: number;
+  email: string;
+  login: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export const useUserQuery = () => {
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => {
+      const resp = await $axios.get<User>("/user");
+      return resp.data;
+    },
+  });
+};

web/src/api/wishlists.ts

@@ -0,0 +1,30 @@
+import { $axios } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+export type Wishlist = {
+  uuid: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export const useUserWishlistsQuery = () => {
+  return useQuery({
+    queryKey: ["wishlists"],
+    queryFn: async () => {
+      const resp = await $axios.get<Wishlist[]>("/user/wishlists");
+      return resp.data;
+    },
+  });
+};
+
+export const useWishlistQuery = (uuid: string) => {
+  return useQuery({
+    queryKey: ["wishlists", uuid],
+    queryFn: async () => {
+      const resp = await $axios.get<Wishlist>(`/wishlists/${uuid}`);
+      return resp.data;
+    },
+  });
+};

web/src/app/(auth)/login/LoginForm.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { LoginData, useLoginMutation } from "@/api/auth";
+import { useRouter } from "next/navigation";
+import { handleApiError } from "@/utils/handleApiError";
+import Link from "next/link";
+
+export const LoginForm = () => {
+  const router = useRouter();
+
+  const mutation = useLoginMutation();
+
+  const form = useForm<LoginData>({
+    defaultValues: {
+      login: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    mutation.mutate(data, {
+      onError(error) {
+        handleApiError(error);
+      },
+      onSuccess() {
+        router.push("/");
+      },
+    });
+  });
+
+  return (
+    <form
+      className="flex flex-col gap-2 rounded-lg shadow-xl p-4"
+      onSubmit={onSubmit}
+    >
+      <input
+        type="text"
+        placeholder="login"
+        {...form.register("login", {
+          required: true,
+        })}
+      />
+      <input
+        type="password"
+        placeholder="password"
+        {...form.register("password", {
+          required: true,
+        })}
+      />
+      <button type="submit" className="w-full mt-4">
+        Login
+      </button>
+      <p className="mt-3">
+        Don&apos;t have an account? <Link href="/register">Register</Link>
+      </p>
+    </form>
+  );
+};

web/src/app/(auth)/login/page.tsx

@@ -0,0 +1,19 @@
+import { LoginForm } from "@/app/(auth)/login/LoginForm";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Login() {
+  const c = await cookies();
+  if (c.has("token")) {
+    throw redirect("/");
+  }
+
+  return (
+    <div className="h-full flex flex-col justify-center items-center">
+      <div className="max-w-[500px] w-full">
+        <h1 className="text-2xl font-semibold mb-4 text-center">Wishlify</h1>
+        <LoginForm />
+      </div>
+    </div>
+  );
+}

web/src/app/(auth)/register/RegisterForm.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { RegisterData, useRegisterMutation } from "@/api/auth";
+import { handleApiError } from "@/utils/handleApiError";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+
+export const RegisterForm = () => {
+  const router = useRouter();
+  const mutation = useRegisterMutation();
+
+  const form = useForm<RegisterData>({
+    defaultValues: {
+      email: "",
+      login: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    mutation.mutate(data, {
+      onError(error) {
+        handleApiError(error);
+      },
+      onSuccess() {
+        router.push("/");
+      },
+    });
+  });
+
+  return (
+    <form
+      className="flex flex-col gap-2 rounded-lg shadow-xl p-4"
+      onSubmit={onSubmit}
+    >
+      <input
+        type="email"
+        placeholder="email"
+        {...form.register("email", {
+          required: true,
+        })}
+      />
+      <input
+        type="text"
+        placeholder="login"
+        {...form.register("login", {
+          required: true,
+        })}
+      />
+      <input
+        type="password"
+        placeholder="password"
+        {...form.register("password", {
+          required: true,
+        })}
+      />
+      <button type="submit" className="w-full mt-4">
+        Register
+      </button>
+      <p className="mt-3">
+        Already have an account? <Link href="/login">Login</Link>
+      </p>
+    </form>
+  );
+};

web/src/app/(auth)/register/page.tsx

@@ -0,0 +1,19 @@
+import { RegisterForm } from "@/app/(auth)/register/RegisterForm";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Register() {
+  const c = await cookies();
+  if (c.has("token")) {
+    throw redirect("/");
+  }
+
+  return (
+    <div className="h-full flex flex-col justify-center items-center">
+      <div className="max-w-[500px] w-full">
+        <h1 className="text-2xl font-semibold mb-4 text-center">Wishlify</h1>
+        <RegisterForm />
+      </div>
+    </div>
+  );
+}

web/src/app/(home)/UserWishlists.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useUserWishlistsQuery } from "@/api/wishlists";
+import Link from "next/link";
+
+export const UserWishlists = () => {
+  const { data } = useUserWishlistsQuery();
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold">Your wishlists</h2>
+      <div className="flex flex-col gap-2 mt-2">
+        {data?.map((wishlist) => (
+          <div key={wishlist.uuid}>
+            <Link href={`/wishlists/${wishlist.uuid}`}>
+              <span>{wishlist.name}</span>
+            </Link>
+            <p>{wishlist.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

web/src/app/(home)/layout.tsx

@@ -0,0 +1,12 @@
+import { Header } from "@/components/Header";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+  return (
+    <div className="h-full flex flex-col">
+      <Header />
+      <main className="flex-grow max-w-[1440px] w-full mx-auto p-2">
+        {children}
+      </main>
+    </div>
+  );
+}

web/src/app/(home)/page.tsx

@@ -0,0 +1,17 @@
+import { UserWishlists } from "@/app/(home)/UserWishlists";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+  const c = await cookies();
+
+  if (!c.has("token")) {
+    throw redirect("/login");
+  }
+
+  return (
+    <div>
+      <UserWishlists />
+    </div>
+  );
+}

web/src/app/(home)/wishlists/[uuid]/WishlistDetails.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useWishlistQuery } from "@/api/wishlists";
+
+export type WishlistDetailsProps = {
+  uuid: string;
+};
+
+export const WishlistDetails = ({ uuid }: WishlistDetailsProps) => {
+  const { data: wishlist } = useWishlistQuery(uuid);
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold">{wishlist?.name}</h2>
+      <p>{wishlist?.description}</p>
+    </div>
+  );
+};

web/src/app/(home)/wishlists/[uuid]/page.tsx

@@ -0,0 +1,13 @@
+import { WishlistDetails } from "@/app/(home)/wishlists/[uuid]/WishlistDetails";
+
+export default async function Wishlist({
+  params,
+}: PageProps<"/wishlists/[uuid]">) {
+  const { uuid } = await params;
+
+  return (
+    <div>
+      <WishlistDetails uuid={uuid} />
+    </div>
+  );
+}

web/src/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

web/src/app/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Providers } from "@/app/providers";
+
+export const metadata: Metadata = {
+  title: "Wishlify",
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html lang="en" className="h-full">
+      <body className="h-full">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

web/src/app/providers.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "react-hot-toast";
+
+export const Providers = ({ children }: { children: ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Toaster />
+      {children}
+    </QueryClientProvider>
+  );
+};

web/src/components/Header.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useLogoutMutation } from "@/api/auth";
+import { useUserQuery } from "@/api/user";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+export const Header = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const logoutMutation = useLogoutMutation();
+
+  const { data: user } = useUserQuery();
+
+  const handleLogout = () => {
+    logoutMutation.mutate(undefined, {
+      onSuccess() {
+        queryClient.clear();
+        router.push("/login");
+      },
+    });
+  };
+
+  return (
+    <header className="max-w-[1440px] w-full mx-auto p-2 flex justify-between">
+      <h1 className="text-3xl font-semibold">Wishlify</h1>
+      {user && (
+        <div className="flex items-center gap-4">
+          <span>{user.login}</span>
+          <button type="button" onClick={handleLogout}>
+            Logout
+          </button>
+        </div>
+      )}
+    </header>
+  );
+};

web/src/lib/axios.ts

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const $axios = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  withCredentials: true,
+});

web/src/utils/handleApiError.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+import toast from "react-hot-toast";
+
+export const handleApiError = (error: unknown) => {
+  if (axios.isAxiosError(error)) {
+    if (
+      typeof error.response?.data === "object" &&
+      "error" in error.response.data &&
+      typeof error.response.data.error === "string"
+    ) {
+      toast.error(error.response.data.error);
+    }
+  }
+};

web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}