From 9bb380e7c08fb073e5f37a1f02172e0e10db3f41 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 26 Jun 2025 17:01:53 +0300
Subject: [PATCH 1/9] mvp 1

---
 frontend/src/app.css                          |  21 +
 frontend/src/lib/api/v1.d.ts                  | 647 +++++++++---------
 .../src/lib/components/ui/badge/badge.svelte  |  50 ++
 frontend/src/lib/components/ui/badge/index.ts |   2 +
 .../src/lib/components/ui/separator/index.ts  |   1 +
 .../components/ui/separator/separator.svelte  |  25 +
 frontend/src/routes/app/+layout.svelte        |   2 +-
 .../explore/(components)/ProjectCard.svelte   | 141 +++-
 frontend/src/routes/app/explore/+page.svelte  | 142 +++-
 frontend/src/routes/app/profile/+page.svelte  | 315 +++++++++
 .../app/projects/(components)/dataLoaders.ts  |  18 +
 .../routes/app/projects/[slug]/+page.svelte   | 260 +++++++
 .../src/routes/app/projects/[slug]/+page.ts   |  20 +
 13 files changed, 1294 insertions(+), 350 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/badge/badge.svelte
 create mode 100644 frontend/src/lib/components/ui/badge/index.ts
 create mode 100644 frontend/src/lib/components/ui/separator/index.ts
 create mode 100644 frontend/src/lib/components/ui/separator/separator.svelte
 create mode 100644 frontend/src/routes/app/profile/+page.svelte
 create mode 100644 frontend/src/routes/app/projects/(components)/dataLoaders.ts
 create mode 100644 frontend/src/routes/app/projects/[slug]/+page.svelte
 create mode 100644 frontend/src/routes/app/projects/[slug]/+page.ts

diff --git a/frontend/src/app.css b/frontend/src/app.css
index b62d430..43cee97 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -119,3 +119,24 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+@layer utilities {
+	.line-clamp-1 {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
+	.line-clamp-2 {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+	}
+	.line-clamp-3 {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+	}
+}
diff --git a/frontend/src/lib/api/v1.d.ts b/frontend/src/lib/api/v1.d.ts
index a93a51a..0660400 100644
--- a/frontend/src/lib/api/v1.d.ts
+++ b/frontend/src/lib/api/v1.d.ts
@@ -4,328 +4,339 @@
  */
 
 export interface paths {
-	'/api/health-check': {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		/** Health Check */
-		get: operations['health_check_api_health_check_get'];
-		put?: never;
-		post?: never;
-		delete?: never;
-		options?: never;
-		head?: never;
-		patch?: never;
-		trace?: never;
-	};
-	'/api/projects/': {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		/** Get Projects */
-		get: operations['get_projects_api_projects__get'];
-		put?: never;
-		/** Create Project */
-		post: operations['create_project_api_projects__post'];
-		delete?: never;
-		options?: never;
-		head?: never;
-		patch?: never;
-		trace?: never;
-	};
-	'/api/projects/{project_id}': {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		/** Get Project By Id */
-		get: operations['get_project_by_id_api_projects__project_id__get'];
-		put?: never;
-		post?: never;
-		delete?: never;
-		options?: never;
-		head?: never;
-		patch?: never;
-		trace?: never;
-	};
-	'/api/auth/token': {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		get?: never;
-		put?: never;
-		/** Login For Access Token */
-		post: operations['login_for_access_token_api_auth_token_post'];
-		delete?: never;
-		options?: never;
-		head?: never;
-		patch?: never;
-		trace?: never;
-	};
-	'/api/auth/register': {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		get?: never;
-		put?: never;
-		/** Register */
-		post: operations['register_api_auth_register_post'];
-		delete?: never;
-		options?: never;
-		head?: never;
-		patch?: never;
-		trace?: never;
-	};
+    "/api/health-check": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Health Check */
+        get: operations["health_check_api_health_check_get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/projects/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Projects */
+        get: operations["get_projects_api_projects__get"];
+        put?: never;
+        /** Create Project */
+        post: operations["create_project_api_projects__post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/projects/{project_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Project By Id */
+        get: operations["get_project_by_id_api_projects__project_id__get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/auth/token": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Login For Access Token */
+        post: operations["login_for_access_token_api_auth_token_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/auth/register": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Register */
+        post: operations["register_api_auth_register_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
-	schemas: {
-		/** Body_login_for_access_token_api_auth_token_post */
-		Body_login_for_access_token_api_auth_token_post: {
-			/** Grant Type */
-			grant_type?: string | null;
-			/** Username */
-			username: string;
-			/** Password */
-			password: string;
-			/**
-			 * Scope
-			 * @default
-			 */
-			scope: string;
-			/** Client Id */
-			client_id?: string | null;
-			/** Client Secret */
-			client_secret?: string | null;
-		};
-		/** HTTPValidationError */
-		HTTPValidationError: {
-			/** Detail */
-			detail?: components['schemas']['ValidationError'][];
-		};
-		/** ProjectSchema */
-		ProjectSchema: {
-			/** Title */
-			title: string;
-			/** Description */
-			description: string | null;
-			/** Is Public */
-			is_public: boolean;
-		};
-		/** Token */
-		Token: {
-			/** Access Token */
-			access_token: string;
-			/** Token Type */
-			token_type: string;
-		};
-		/** UserRegister */
-		UserRegister: {
-			/** Username */
-			username: string;
-			/** Password */
-			password: string;
-		};
-		/** ValidationError */
-		ValidationError: {
-			/** Location */
-			loc: (string | number)[];
-			/** Message */
-			msg: string;
-			/** Error Type */
-			type: string;
-		};
-	};
-	responses: never;
-	parameters: never;
-	requestBodies: never;
-	headers: never;
-	pathItems: never;
+    schemas: {
+        /** Body_login_for_access_token_api_auth_token_post */
+        Body_login_for_access_token_api_auth_token_post: {
+            /** Grant Type */
+            grant_type?: string | null;
+            /** Username */
+            username: string;
+            /** Password */
+            password: string;
+            /**
+             * Scope
+             * @default
+             */
+            scope: string;
+            /** Client Id */
+            client_id?: string | null;
+            /** Client Secret */
+            client_secret?: string | null;
+        };
+        /** HTTPValidationError */
+        HTTPValidationError: {
+            /** Detail */
+            detail?: components["schemas"]["ValidationError"][];
+        };
+        /** NewProjectSchema */
+        NewProjectSchema: {
+            /** Title */
+            title: string;
+            /** Description */
+            description: string | null;
+            /** Is Public */
+            is_public: boolean;
+        };
+        /** ProjectSchema */
+        ProjectSchema: {
+            /** Title */
+            title: string;
+            /** Description */
+            description: string | null;
+            /** Is Public */
+            is_public: boolean;
+            /** Id */
+            id: number;
+        };
+        /** Token */
+        Token: {
+            /** Access Token */
+            access_token: string;
+            /** Token Type */
+            token_type: string;
+        };
+        /** UserRegister */
+        UserRegister: {
+            /** Username */
+            username: string;
+            /** Password */
+            password: string;
+        };
+        /** ValidationError */
+        ValidationError: {
+            /** Location */
+            loc: (string | number)[];
+            /** Message */
+            msg: string;
+            /** Error Type */
+            type: string;
+        };
+    };
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
 }
 export type $defs = Record<string, never>;
 export interface operations {
-	health_check_api_health_check_get: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		requestBody?: never;
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': unknown;
-				};
-			};
-		};
-	};
-	get_projects_api_projects__get: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		requestBody?: never;
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['ProjectSchema'][];
-				};
-			};
-		};
-	};
-	create_project_api_projects__post: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		requestBody: {
-			content: {
-				'application/json': components['schemas']['ProjectSchema'];
-			};
-		};
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['ProjectSchema'];
-				};
-			};
-			/** @description Validation Error */
-			422: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['HTTPValidationError'];
-				};
-			};
-		};
-	};
-	get_project_by_id_api_projects__project_id__get: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path: {
-				project_id: number;
-			};
-			cookie?: never;
-		};
-		requestBody?: never;
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['ProjectSchema'];
-				};
-			};
-			/** @description Validation Error */
-			422: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['HTTPValidationError'];
-				};
-			};
-		};
-	};
-	login_for_access_token_api_auth_token_post: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		requestBody: {
-			content: {
-				'application/x-www-form-urlencoded': components['schemas']['Body_login_for_access_token_api_auth_token_post'];
-			};
-		};
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['Token'];
-				};
-			};
-			/** @description Validation Error */
-			422: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['HTTPValidationError'];
-				};
-			};
-		};
-	};
-	register_api_auth_register_post: {
-		parameters: {
-			query?: never;
-			header?: never;
-			path?: never;
-			cookie?: never;
-		};
-		requestBody: {
-			content: {
-				'application/json': components['schemas']['UserRegister'];
-			};
-		};
-		responses: {
-			/** @description Successful Response */
-			200: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['Token'];
-				};
-			};
-			/** @description Validation Error */
-			422: {
-				headers: {
-					[name: string]: unknown;
-				};
-				content: {
-					'application/json': components['schemas']['HTTPValidationError'];
-				};
-			};
-		};
-	};
+    health_check_api_health_check_get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": unknown;
+                };
+            };
+        };
+    };
+    get_projects_api_projects__get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ProjectSchema"][];
+                };
+            };
+        };
+    };
+    create_project_api_projects__post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["NewProjectSchema"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ProjectSchema"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    get_project_by_id_api_projects__project_id__get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                project_id: number;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ProjectSchema"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    login_for_access_token_api_auth_token_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/x-www-form-urlencoded": components["schemas"]["Body_login_for_access_token_api_auth_token_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Token"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    register_api_auth_register_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UserRegister"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Token"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
 }
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..5000457
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/frontend/src/lib/components/ui/badge/index.ts b/frontend/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..64e0aa9
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/frontend/src/lib/components/ui/separator/index.ts b/frontend/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..f3863a6
--- /dev/null
+++ b/frontend/src/lib/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './separator.svelte';
diff --git a/frontend/src/lib/components/ui/separator/separator.svelte b/frontend/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..64e1133
--- /dev/null
+++ b/frontend/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let {
+		class: className,
+		orientation = 'horizontal',
+		decorative = true,
+		...restProps
+	}: {
+		class?: string;
+		orientation?: 'horizontal' | 'vertical';
+		decorative?: boolean;
+	} & import('svelte/elements').HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	class={cn(
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+		className
+	)}
+	{...restProps}
+	role={decorative ? 'none' : 'separator'}
+	aria-orientation={orientation}
+></div>
diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
index aefdc6b..cc3e45d 100644
--- a/frontend/src/routes/app/+layout.svelte
+++ b/frontend/src/routes/app/+layout.svelte
@@ -65,7 +65,7 @@
 						<DropdownMenu.Label>{userState.user?.username}</DropdownMenu.Label>
 						<DropdownMenu.Separator />
 						<DropdownMenu.Group>
-							<DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => goto('/app/profile')}>
 								<User />
 								Profile
 							</DropdownMenu.Item>
diff --git a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
index 593d7c1..8c28af3 100644
--- a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
+++ b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
@@ -1,24 +1,133 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
+	import * as Avatar from '$lib/components/ui/avatar';
 	import { type components } from '@/api/v1';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Eye, Lock, Globe, Calendar, User } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
 
-	const { project }: { project: components['schemas']['ProjectSchema'] } = $props();
+	const { 
+		project, 
+		viewMode = 'grid' 
+	}: { 
+		project: components['schemas']['ProjectSchema'] & { id: number };
+		viewMode?: 'grid' | 'list';
+	} = $props();
+
+	function handleViewProject() {
+		goto(`/app/projects/${project.id}`);
+	}
+
+	function formatDate(dateString?: string) {
+		if (!dateString) return 'Recently';
+		try {
+			return new Date(dateString).toLocaleDateString();
+		} catch {
+			return 'Recently';
+		}
+	}
 </script>
 
-<Card.Root class="w-full max-w-md p-6">
-	<Card.Header>
-		<Card.Title class="text-xl">
-			{project.title}
-		</Card.Title>
-	</Card.Header>
+{#if viewMode === 'grid'}
+	<Card.Root class="group hover:shadow-lg transition-all duration-200 cursor-pointer" onclick={handleViewProject}>
+		<Card.Header class="pb-3">
+			<div class="flex items-start justify-between">
+				<Card.Title class="text-lg font-semibold line-clamp-2 group-hover:text-primary transition-colors">
+					{project.title}
+				</Card.Title>
+				<Badge variant={project.is_public ? 'secondary' : 'outline'} class="ml-2 shrink-0">
+					{#if project.is_public}
+						<Globe class="h-3 w-3 mr-1" />
+						Public
+					{:else}
+						<Lock class="h-3 w-3 mr-1" />
+						Private
+					{/if}
+				</Badge>
+			</div>
+		</Card.Header>
+
+		<Card.Content class="space-y-4">
+			<p class="text-sm text-muted-foreground line-clamp-3 min-h-[3rem]">
+				{project.description || 'No description available.'}
+			</p>
+			
+			<div class="flex items-center justify-between text-xs text-muted-foreground">
+				<div class="flex items-center gap-1">
+					<User class="h-3 w-3" />
+					<span>Project Owner</span>
+				</div>
+				<div class="flex items-center gap-1">
+					<Calendar class="h-3 w-3" />
+					<span>{formatDate()}</span>
+				</div>
+			</div>
+		</Card.Content>
 
-	<Card.Content class="flex flex-col gap-4 text-sm h-32">
-		<p class="truncate text-wrap text-balance">{project.description}</p>
-	</Card.Content>
-	<Card.Footer class="flex justify-end">
-		<Button variant="default">
-			View Project
-		</Button>
-	</Card.Footer>
-</Card.Root>
\ No newline at end of file
+		<Card.Footer class="pt-4">
+			<Button 
+				variant="default" 
+				size="sm" 
+				class="w-full group-hover:shadow-md transition-shadow"
+				onclick={(e) => {
+					e.stopPropagation();
+					handleViewProject();
+				}}
+			>
+				<Eye class="h-4 w-4 mr-2" />
+				View Project
+			</Button>
+		</Card.Footer>
+	</Card.Root>
+{:else}
+	<!-- List View -->
+	<Card.Root class="group hover:shadow-md transition-all duration-200 cursor-pointer" onclick={handleViewProject}>
+		<Card.Content class="p-6">
+			<div class="flex items-center justify-between">
+				<div class="flex-1 min-w-0">
+					<div class="flex items-center gap-3 mb-2">
+						<h3 class="text-lg font-semibold truncate group-hover:text-primary transition-colors">
+							{project.title}
+						</h3>
+						<Badge variant={project.is_public ? 'secondary' : 'outline'}>
+							{#if project.is_public}
+								<Globe class="h-3 w-3 mr-1" />
+								Public
+							{:else}
+								<Lock class="h-3 w-3 mr-1" />
+								Private
+							{/if}
+						</Badge>
+					</div>
+					<p class="text-sm text-muted-foreground line-clamp-2 mb-3">
+						{project.description || 'No description available.'}
+					</p>
+					<div class="flex items-center gap-4 text-xs text-muted-foreground">
+						<div class="flex items-center gap-1">
+							<User class="h-3 w-3" />
+							<span>Project Owner</span>
+						</div>
+						<div class="flex items-center gap-1">
+							<Calendar class="h-3 w-3" />
+							<span>{formatDate()}</span>
+						</div>
+					</div>
+				</div>
+				<div class="flex items-center gap-2 ml-4">
+					<Button 
+						variant="default" 
+						size="sm"
+						onclick={(e) => {
+							e.stopPropagation();
+							handleViewProject();
+						}}
+					>
+						<Eye class="h-4 w-4 mr-2" />
+						View
+					</Button>
+				</div>
+			</div>
+		</Card.Content>
+	</Card.Root>
+{/if}
diff --git a/frontend/src/routes/app/explore/+page.svelte b/frontend/src/routes/app/explore/+page.svelte
index e5caa70..7211dde 100644
--- a/frontend/src/routes/app/explore/+page.svelte
+++ b/frontend/src/routes/app/explore/+page.svelte
@@ -2,29 +2,141 @@
 	import ProjectSkeleton from '$lib/components/skeletons/ProjectSkeleton.svelte';
 	import { getProjects } from './(components)/dataLoaders';
 	import { createQuery } from '@tanstack/svelte-query';
-	import ErrorAlert from '@/components/ErrorAlert.svelte';
+	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
 	import ProjectCard from './(components)/ProjectCard.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import * as Card from '$lib/components/ui/card';
+	import { Search, Filter, Grid3X3, List } from '@lucide/svelte';
+	import { type components } from '@/api/v1';
+
+	type Project = components['schemas']['ProjectSchema'];
+
+	let searchTerm = $state('');
+	let showPublicOnly = $state(false);
+	let viewMode = $state<'grid' | 'list'>('grid');
 
 	const projectsQuery = createQuery({
 		queryKey: ['projects'],
 		queryFn: async () => await getProjects()
 	});
+
+	$effect(() => {
+		// You can add search logic here if needed
+	});
+
+	const filteredProjects = $derived(() => {
+		if (!$projectsQuery.data) return [];
+		let filtered = $projectsQuery.data;
+		
+		if (searchTerm) {
+			filtered = filtered.filter((project: Project) => 
+				project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				(project.description && project.description.toLowerCase().includes(searchTerm.toLowerCase()))
+			);
+		}
+		
+		if (showPublicOnly) {
+			filtered = filtered.filter((project: Project) => project.is_public);
+		}
+		
+		return filtered;
+	});
 </script>
 
-<div class="flex flex-row flex-wrap gap-6 p-4 justify-start">
-	{#if $projectsQuery.isPending}
-		{#each Array(12) as _}
-			<ProjectSkeleton />
-		{/each}
-	{:else if $projectsQuery.isError}
-		<ErrorAlert text={$projectsQuery.error.message} />
-	{:else}
-		{#if $projectsQuery.data.length === 0}
-			<p class="text-gray-500 w-full text-center">No projects found.</p>
+<div class="container mx-auto px-4 py-6 space-y-6">
+	<!-- Header Section -->
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+			<div>
+				<h1 class="text-3xl font-bold tracking-tight">Explore Projects</h1>
+				<p class="text-muted-foreground mt-1">Discover amazing projects from the community</p>
+			</div>
+			<div class="flex items-center gap-2">
+				<Button 
+					variant={viewMode === 'grid' ? 'default' : 'outline'} 
+					size="sm"
+					onclick={() => viewMode = 'grid'}
+				>
+					<Grid3X3 class="h-4 w-4" />
+				</Button>
+				<Button 
+					variant={viewMode === 'list' ? 'default' : 'outline'} 
+					size="sm"
+					onclick={() => viewMode = 'list'}
+				>
+					<List class="h-4 w-4" />
+				</Button>
+			</div>
+		</div>
+
+		<!-- Search and Filter Section -->
+		<Card.Root class="p-4">
+			<div class="flex flex-col md:flex-row gap-4">
+				<div class="relative flex-1">
+					<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+					<Input
+						bind:value={searchTerm}
+						placeholder="Search projects by title or description..."
+						class="pl-10"
+					/>
+				</div>
+				<div class="flex items-center gap-4">
+					<label class="flex items-center gap-2 text-sm">
+						<input 
+							type="checkbox" 
+							bind:checked={showPublicOnly}
+							class="rounded"
+						/>
+						Public only
+					</label>
+					<Button variant="outline" size="sm">
+						<Filter class="h-4 w-4 mr-2" />
+						Filters
+					</Button>
+				</div>
+			</div>
+		</Card.Root>
+	</div>
+
+	<!-- Results Section -->
+	<div class="space-y-4">
+		{#if $projectsQuery.isPending}
+			<div class={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'space-y-4'}>
+				{#each Array(12) as _}
+					<ProjectSkeleton />
+				{/each}
+			</div>
+		{:else if $projectsQuery.isError}
+			<div class="flex justify-center py-12">
+				<ErrorAlert text={$projectsQuery.error.message} />
+			</div>
 		{:else}
-			{#each $projectsQuery.data as project}
-				<ProjectCard {project} />
-			{/each}
+			<!-- Results Count -->
+			<div class="flex items-center justify-between">
+				<p class="text-sm text-muted-foreground">
+					Showing {filteredProjects().length} of {$projectsQuery.data.length} projects
+				</p>
+			</div>
+
+			{#if filteredProjects().length === 0}
+				<div class="flex flex-col items-center justify-center py-12 text-center">
+					<div class="rounded-full bg-muted p-3 mb-4">
+						<Search class="h-6 w-6 text-muted-foreground" />
+					</div>
+					<h3 class="text-lg font-semibold mb-2">No projects found</h3>
+					<p class="text-muted-foreground mb-4">Try adjusting your search or filters</p>
+					<Button variant="outline" onclick={() => { searchTerm = ''; showPublicOnly = false; }}>
+						Clear filters
+					</Button>
+				</div>
+			{:else}
+				<div class={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'space-y-4'}>
+					{#each filteredProjects() as project(project.title)}
+						<ProjectCard {project} {viewMode} />
+					{/each}
+				</div>
+			{/if}
 		{/if}
-	{/if}
+	</div>
 </div>
diff --git a/frontend/src/routes/app/profile/+page.svelte b/frontend/src/routes/app/profile/+page.svelte
new file mode 100644
index 0000000..94b53ba
--- /dev/null
+++ b/frontend/src/routes/app/profile/+page.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import * as Card from '$lib/components/ui/card';
+	import * as Avatar from '$lib/components/ui/avatar';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import { userState } from '@/api/user.svelte';
+	import { 
+		User, 
+		Mail, 
+		Calendar, 
+		Settings, 
+		Edit3, 
+		Save, 
+		X,
+		Camera,
+		Key,
+		Shield,
+		Bell
+	} from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+
+	let isEditing = $state(false);
+	let editedProfile = $state({
+		username: userState.user?.username || '',
+		email: userState.user?.email || '',
+		bio: '',
+		location: '',
+		website: ''
+	});
+
+	function handleEdit() {
+		isEditing = true;
+		editedProfile = {
+			username: userState.user?.username || '',
+			email: userState.user?.email || '',
+			bio: '',
+			location: '',
+			website: ''
+		};
+	}
+
+	function handleSave() {
+		// Here you would typically make an API call to update the profile
+		toast.success('Profile updated successfully!');
+		isEditing = false;
+	}
+
+	function handleCancel() {
+		isEditing = false;
+		editedProfile = {
+			username: userState.user?.username || '',
+			email: userState.user?.email || '',
+			bio: '',
+			location: '',
+			website: ''
+		};
+	}
+
+	function formatDate(date: Date) {
+		return date.toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		});
+	}
+</script>
+
+<div class="container mx-auto px-4 py-6 max-w-4xl space-y-6">
+	<!-- Header -->
+	<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Profile</h1>
+			<p class="text-muted-foreground mt-1">Manage your account settings and preferences</p>
+		</div>
+		{#if !isEditing}
+			<Button onclick={handleEdit}>
+				<Edit3 class="h-4 w-4 mr-2" />
+				Edit Profile
+			</Button>
+		{/if}
+	</div>
+
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+		<!-- Profile Card -->
+		<div class="lg:col-span-1">
+			<Card.Root>
+				<Card.Content class="p-6 text-center">
+					<div class="relative mb-4">
+						<Avatar.Root class="h-24 w-24 mx-auto">
+							<Avatar.Image 
+								src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face" 
+								alt="Profile" 
+							/>
+							<Avatar.Fallback class="text-lg">
+								{userState.user?.username?.[0]?.toUpperCase() || 'U'}
+							</Avatar.Fallback>
+						</Avatar.Root>
+						{#if isEditing}
+							<Button 
+								size="sm" 
+								variant="outline" 
+								class="absolute -bottom-2 -right-2 h-8 w-8 rounded-full p-0"
+							>
+								<Camera class="h-4 w-4" />
+							</Button>
+						{/if}
+					</div>
+
+					<h2 class="text-xl font-semibold mb-1">
+						{userState.user?.username || 'Username'}
+					</h2>
+					<p class="text-sm text-muted-foreground mb-4">
+						{editedProfile.email || 'email@example.com'}
+					</p>
+
+					<Badge variant="secondary" class="mb-4">
+						<Shield class="h-3 w-3 mr-1" />
+						Active User
+					</Badge>
+
+					<div class="text-xs text-muted-foreground flex items-center justify-center gap-1">
+						<Calendar class="h-3 w-3" />
+						<span>Joined {formatDate(new Date())}</span>
+					</div>
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Quick Stats -->
+			<Card.Root class="mt-4">
+				<Card.Header>
+					<Card.Title class="text-sm">Quick Stats</Card.Title>
+				</Card.Header>
+				<Card.Content class="space-y-3">
+					<div class="flex justify-between text-sm">
+						<span class="text-muted-foreground">Projects Created</span>
+						<span class="font-medium">12</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-muted-foreground">Public Projects</span>
+						<span class="font-medium">8</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-muted-foreground">Private Projects</span>
+						<span class="font-medium">4</span>
+					</div>
+				</Card.Content>
+			</Card.Root>
+		</div>
+
+		<!-- Main Content -->
+		<div class="lg:col-span-2 space-y-6">
+			<!-- Personal Information -->
+			<Card.Root>
+				<Card.Header class="flex flex-row items-center justify-between">
+					<div>
+						<Card.Title>Personal Information</Card.Title>
+						<Card.Description>Update your personal details</Card.Description>
+					</div>
+					{#if isEditing}
+						<div class="flex gap-2">
+							<Button size="sm" onclick={handleSave}>
+								<Save class="h-4 w-4 mr-2" />
+								Save
+							</Button>
+							<Button size="sm" variant="outline" onclick={handleCancel}>
+								<X class="h-4 w-4 mr-2" />
+								Cancel
+							</Button>
+						</div>
+					{/if}
+				</Card.Header>
+				<Card.Content class="space-y-4">
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div class="space-y-2">
+							<Label for="username">Username</Label>
+							{#if isEditing}
+								<Input
+									id="username"
+									bind:value={editedProfile.username}
+									placeholder="Enter username"
+								/>
+							{:else}
+								<div class="flex items-center gap-2 p-2 bg-muted rounded-md">
+									<User class="h-4 w-4 text-muted-foreground" />
+									<span>{userState.user?.username || 'Not set'}</span>
+								</div>
+							{/if}
+						</div>
+
+						<div class="space-y-2">
+							<Label for="email">Email</Label>
+							{#if isEditing}
+								<Input
+									id="email"
+									type="email"
+									bind:value={editedProfile.email}
+									placeholder="Enter email"
+								/>
+							{:else}
+								<div class="flex items-center gap-2 p-2 bg-muted rounded-md">
+									<Mail class="h-4 w-4 text-muted-foreground" />
+									<span>{editedProfile.email || 'Not set'}</span>
+								</div>
+							{/if}
+						</div>
+					</div>
+
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div class="space-y-2">
+							<Label for="location">Location</Label>
+							{#if isEditing}
+								<Input
+									id="location"
+									bind:value={editedProfile.location}
+									placeholder="Enter location"
+								/>
+							{:else}
+								<div class="p-2 bg-muted rounded-md">
+									<span class="text-muted-foreground">{editedProfile.location || 'Not set'}</span>
+								</div>
+							{/if}
+						</div>
+
+						<div class="space-y-2">
+							<Label for="website">Website</Label>
+							{#if isEditing}
+								<Input
+									id="website"
+									bind:value={editedProfile.website}
+									placeholder="https://example.com"
+								/>
+							{:else}
+								<div class="p-2 bg-muted rounded-md">
+									<span class="text-muted-foreground">{editedProfile.website || 'Not set'}</span>
+								</div>
+							{/if}
+						</div>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="bio">Bio</Label>
+						{#if isEditing}
+							<Textarea
+								id="bio"
+								bind:value={editedProfile.bio}
+								placeholder="Tell us about yourself..."
+								class="min-h-[100px]"
+							/>
+						{:else}
+							<div class="p-2 bg-muted rounded-md min-h-[100px]">
+								<span class="text-muted-foreground">
+									{editedProfile.bio || 'No bio available.'}
+								</span>
+							</div>
+						{/if}
+					</div>
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Account Settings -->
+			<Card.Root>
+				<Card.Header>
+					<Card.Title>Account Settings</Card.Title>
+					<Card.Description>Manage your account preferences</Card.Description>
+				</Card.Header>
+				<Card.Content class="space-y-4">
+					<div class="flex items-center justify-between">
+						<div class="space-y-1">
+							<Label class="flex items-center gap-2">
+								<Key class="h-4 w-4" />
+								Change Password
+							</Label>
+							<p class="text-sm text-muted-foreground">Update your account password</p>
+						</div>
+						<Button variant="outline" size="sm">
+							Change
+						</Button>
+					</div>
+
+					<Separator />
+
+					<div class="flex items-center justify-between">
+						<div class="space-y-1">
+							<Label class="flex items-center gap-2">
+								<Bell class="h-4 w-4" />
+								Email Notifications
+							</Label>
+							<p class="text-sm text-muted-foreground">Receive notifications about your projects</p>
+						</div>
+						<input type="checkbox" checked class="rounded" />
+					</div>
+
+					<Separator />
+
+					<div class="flex items-center justify-between">
+						<div class="space-y-1">
+							<Label class="flex items-center gap-2 text-destructive">
+								<Settings class="h-4 w-4" />
+								Delete Account
+							</Label>
+							<p class="text-sm text-muted-foreground">Permanently delete your account and all data</p>
+						</div>
+						<Button variant="destructive" size="sm">
+							Delete
+						</Button>
+					</div>
+				</Card.Content>
+			</Card.Root>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/app/projects/(components)/dataLoaders.ts b/frontend/src/routes/app/projects/(components)/dataLoaders.ts
new file mode 100644
index 0000000..15c2014
--- /dev/null
+++ b/frontend/src/routes/app/projects/(components)/dataLoaders.ts
@@ -0,0 +1,18 @@
+import { client } from '@/api/client';
+
+export const getProjectById = async (projectId: number) => {
+	const { data, error } = await client.GET('/api/projects/{project_id}', {
+		params: {
+			path: {
+				project_id: projectId
+			}
+		}
+	});
+
+	if (error || !data) {
+		console.error('Error fetching project:', error);
+		throw new Error(JSON.stringify(error ?? 'Failed to fetch project'));
+	}
+
+	return data;
+};
diff --git a/frontend/src/routes/app/projects/[slug]/+page.svelte b/frontend/src/routes/app/projects/[slug]/+page.svelte
new file mode 100644
index 0000000..13488ff
--- /dev/null
+++ b/frontend/src/routes/app/projects/[slug]/+page.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+	import { type components } from '@/api/v1';
+	import { createQuery } from '@tanstack/svelte-query';
+	import * as Card from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+	import { getProjectById } from '../(components)/dataLoaders';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { 
+		ArrowLeft, 
+		Globe, 
+		Lock, 
+		Calendar, 
+		User, 
+		Edit3, 
+		Trash2,
+		Share2,
+		Bookmark,
+		GitBranch,
+		Code,
+		FileText
+	} from '@lucide/svelte';
+
+	type Project = components['schemas']['ProjectSchema'] & { id: number };
+
+	let { data } = $props();
+	const projectId = data.projectId;
+
+	const projectQuery = createQuery({
+		queryKey: ['project', projectId],
+		queryFn: async () => await getProjectById(projectId)
+	});
+
+	function goBack() {
+		goto('/app/explore');
+	}
+
+	function formatDate(dateString?: string) {
+		if (!dateString) return 'Recently';
+		try {
+			return new Date(dateString).toLocaleDateString();
+		} catch {
+			return 'Recently';
+		}
+	}
+</script>
+
+<div class="container mx-auto px-4 py-6 max-w-6xl space-y-6">
+	<!-- Back Navigation -->
+	<div class="flex items-center gap-4">
+		<Button variant="outline" size="sm" onclick={goBack}>
+			<ArrowLeft class="h-4 w-4 mr-2" />
+			Back to Explore
+		</Button>
+	</div>
+
+	{#if $projectQuery.isPending}
+		<div class="flex justify-center py-12">
+			<div class="text-muted-foreground">Loading project details...</div>
+		</div>
+	{:else if $projectQuery.isError}
+		<div class="flex justify-center py-12">
+			<ErrorAlert text={$projectQuery.error.message} />
+		</div>
+	{:else}
+		{@const project = $projectQuery.data}
+		
+		<!-- Project Header -->
+		<div class="flex flex-col lg:flex-row gap-6">
+			<!-- Main Content -->
+			<div class="flex-1 space-y-6">
+				<Card.Root>
+					<Card.Header class="space-y-4">
+						<div class="flex items-start justify-between">
+							<div class="space-y-2">
+								<div class="flex items-center gap-3">
+									<h1 class="text-3xl font-bold tracking-tight">{project.title}</h1>
+									<Badge variant={project.is_public ? 'secondary' : 'outline'}>
+										{#if project.is_public}
+											<Globe class="h-3 w-3 mr-1" />
+											Public
+										{:else}
+											<Lock class="h-3 w-3 mr-1" />
+											Private
+										{/if}
+									</Badge>
+								</div>
+								<p class="text-muted-foreground">Project ID: #{project.id}</p>
+							</div>
+							<div class="flex items-center gap-2">
+								<Button size="sm">
+									<Bookmark class="h-4 w-4 mr-2" />
+									Bookmark
+								</Button>
+								<Button size="sm" variant="outline">
+									<Share2 class="h-4 w-4 mr-2" />
+									Share
+								</Button>
+								<Button size="sm" variant="outline">
+									<Edit3 class="h-4 w-4 mr-2" />
+									Edit
+								</Button>
+							</div>
+						</div>
+
+						<Separator />
+
+						<!-- Project Meta -->
+						<div class="flex items-center gap-6 text-sm text-muted-foreground">
+							<div class="flex items-center gap-1">
+								<User class="h-4 w-4" />
+								<span>Project Owner</span>
+							</div>
+							<div class="flex items-center gap-1">
+								<Calendar class="h-4 w-4" />
+								<span>Created {formatDate()}</span>
+							</div>
+							<div class="flex items-center gap-1">
+								<Calendar class="h-4 w-4" />
+								<span>Last updated {formatDate()}</span>
+							</div>
+						</div>
+					</Card.Header>
+
+					<Card.Content>
+						<div class="space-y-6">
+							<!-- Description -->
+							<div>
+								<h2 class="text-lg font-semibold mb-3">About this project</h2>
+								<p class="text-muted-foreground leading-relaxed">
+									{project.description || 'No description provided for this project.'}
+								</p>
+							</div>
+
+							<Separator />
+
+							<!-- Project Stats -->
+							<div>
+								<h2 class="text-lg font-semibold mb-4">Project Statistics</h2>
+								<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+									<div class="text-center p-4 bg-muted rounded-lg">
+										<div class="text-2xl font-bold">15</div>
+										<div class="text-sm text-muted-foreground">Files</div>
+									</div>
+									<div class="text-center p-4 bg-muted rounded-lg">
+										<div class="text-2xl font-bold">3</div>
+										<div class="text-sm text-muted-foreground">Contributors</div>
+									</div>
+									<div class="text-center p-4 bg-muted rounded-lg">
+										<div class="text-2xl font-bold">42</div>
+										<div class="text-sm text-muted-foreground">Commits</div>
+									</div>
+									<div class="text-center p-4 bg-muted rounded-lg">
+										<div class="text-2xl font-bold">7</div>
+										<div class="text-sm text-muted-foreground">Branches</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Project Files/Content -->
+				<Card.Root>
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2">
+							<FileText class="h-5 w-5" />
+							Project Files
+						</Card.Title>
+					</Card.Header>
+					<Card.Content>
+						<div class="space-y-2">
+							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
+								<Code class="h-4 w-4 text-muted-foreground" />
+								<span class="font-medium">src/</span>
+								<span class="text-sm text-muted-foreground ml-auto">Source code</span>
+							</div>
+							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
+								<FileText class="h-4 w-4 text-muted-foreground" />
+								<span class="font-medium">README.md</span>
+								<span class="text-sm text-muted-foreground ml-auto">Project documentation</span>
+							</div>
+							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
+								<Code class="h-4 w-4 text-muted-foreground" />
+								<span class="font-medium">package.json</span>
+								<span class="text-sm text-muted-foreground ml-auto">Dependencies</span>
+							</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			</div>
+
+			<!-- Sidebar -->
+			<div class="lg:w-80 space-y-6">
+				<!-- Quick Actions -->
+				<Card.Root>
+					<Card.Header>
+						<Card.Title class="text-sm">Quick Actions</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-2">
+						<Button variant="outline" size="sm" class="w-full justify-start">
+							<GitBranch class="h-4 w-4 mr-2" />
+							Create Branch
+						</Button>
+						<Button variant="outline" size="sm" class="w-full justify-start">
+							<Code class="h-4 w-4 mr-2" />
+							Clone Repository
+						</Button>
+						<Button variant="outline" size="sm" class="w-full justify-start">
+							<FileText class="h-4 w-4 mr-2" />
+							Download ZIP
+						</Button>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Recent Activity -->
+				<Card.Root>
+					<Card.Header>
+						<Card.Title class="text-sm">Recent Activity</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-3">
+						<div class="text-sm">
+							<div class="font-medium">Initial commit</div>
+							<div class="text-muted-foreground text-xs">2 hours ago</div>
+						</div>
+						<div class="text-sm">
+							<div class="font-medium">Added README</div>
+							<div class="text-muted-foreground text-xs">1 day ago</div>
+						</div>
+						<div class="text-sm">
+							<div class="font-medium">Project created</div>
+							<div class="text-muted-foreground text-xs">3 days ago</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Contributors -->
+				<Card.Root>
+					<Card.Header>
+						<Card.Title class="text-sm">Contributors</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-3">
+						<div class="flex items-center gap-3">
+							<div class="h-8 w-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground text-sm font-medium">
+								U
+							</div>
+							<div class="flex-1 min-w-0">
+								<div class="font-medium text-sm">Project Owner</div>
+								<div class="text-muted-foreground text-xs">Owner</div>
+							</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/routes/app/projects/[slug]/+page.ts b/frontend/src/routes/app/projects/[slug]/+page.ts
new file mode 100644
index 0000000..42502ea
--- /dev/null
+++ b/frontend/src/routes/app/projects/[slug]/+page.ts
@@ -0,0 +1,20 @@
+import type { PageLoad } from './$types';
+import { getProjectById } from '../(components)/dataLoaders';
+
+export const load: PageLoad = async ({ params, parent, fetch }) => {
+	const { queryClient } = await parent();
+	const projectId = parseInt(params.slug);
+
+	if (isNaN(projectId)) {
+		throw new Error('Invalid project ID');
+	}
+
+	await queryClient.prefetchQuery({
+		queryKey: ['project', projectId],
+		queryFn: async () => await getProjectById(projectId)
+	});
+
+	return {
+		projectId
+	};
+};

From d603e13b17093e45597d200968ecf6014a49d1a4 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 3 Jul 2025 22:27:36 +0300
Subject: [PATCH 2/9] Reformat

---
 frontend/src/lib/api/v1.d.ts                  | 658 +++++++++---------
 .../src/lib/components/ui/badge/badge.svelte  |  29 +-
 frontend/src/lib/components/ui/badge/index.ts |   4 +-
 .../components/ui/separator/separator.svelte  |   2 +-
 .../explore/(components)/ProjectCard.svelte   |  64 +-
 frontend/src/routes/app/explore/+page.svelte  |  72 +-
 frontend/src/routes/app/profile/+page.svelte  |  94 ++-
 .../routes/app/projects/[slug]/+page.svelte   |  96 +--
 8 files changed, 522 insertions(+), 497 deletions(-)

diff --git a/frontend/src/lib/api/v1.d.ts b/frontend/src/lib/api/v1.d.ts
index 0660400..f090e54 100644
--- a/frontend/src/lib/api/v1.d.ts
+++ b/frontend/src/lib/api/v1.d.ts
@@ -4,339 +4,339 @@
  */
 
 export interface paths {
-    "/api/health-check": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Health Check */
-        get: operations["health_check_api_health_check_get"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/projects/": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get Projects */
-        get: operations["get_projects_api_projects__get"];
-        put?: never;
-        /** Create Project */
-        post: operations["create_project_api_projects__post"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/projects/{project_id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get Project By Id */
-        get: operations["get_project_by_id_api_projects__project_id__get"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/auth/token": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Login For Access Token */
-        post: operations["login_for_access_token_api_auth_token_post"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/auth/register": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Register */
-        post: operations["register_api_auth_register_post"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
+	'/api/health-check': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Health Check */
+		get: operations['health_check_api_health_check_get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get Projects */
+		get: operations['get_projects_api_projects__get'];
+		put?: never;
+		/** Create Project */
+		post: operations['create_project_api_projects__post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/{project_id}': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get Project By Id */
+		get: operations['get_project_by_id_api_projects__project_id__get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/auth/token': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Login For Access Token */
+		post: operations['login_for_access_token_api_auth_token_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/auth/register': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Register */
+		post: operations['register_api_auth_register_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 }
 export type webhooks = Record<string, never>;
 export interface components {
-    schemas: {
-        /** Body_login_for_access_token_api_auth_token_post */
-        Body_login_for_access_token_api_auth_token_post: {
-            /** Grant Type */
-            grant_type?: string | null;
-            /** Username */
-            username: string;
-            /** Password */
-            password: string;
-            /**
-             * Scope
-             * @default
-             */
-            scope: string;
-            /** Client Id */
-            client_id?: string | null;
-            /** Client Secret */
-            client_secret?: string | null;
-        };
-        /** HTTPValidationError */
-        HTTPValidationError: {
-            /** Detail */
-            detail?: components["schemas"]["ValidationError"][];
-        };
-        /** NewProjectSchema */
-        NewProjectSchema: {
-            /** Title */
-            title: string;
-            /** Description */
-            description: string | null;
-            /** Is Public */
-            is_public: boolean;
-        };
-        /** ProjectSchema */
-        ProjectSchema: {
-            /** Title */
-            title: string;
-            /** Description */
-            description: string | null;
-            /** Is Public */
-            is_public: boolean;
-            /** Id */
-            id: number;
-        };
-        /** Token */
-        Token: {
-            /** Access Token */
-            access_token: string;
-            /** Token Type */
-            token_type: string;
-        };
-        /** UserRegister */
-        UserRegister: {
-            /** Username */
-            username: string;
-            /** Password */
-            password: string;
-        };
-        /** ValidationError */
-        ValidationError: {
-            /** Location */
-            loc: (string | number)[];
-            /** Message */
-            msg: string;
-            /** Error Type */
-            type: string;
-        };
-    };
-    responses: never;
-    parameters: never;
-    requestBodies: never;
-    headers: never;
-    pathItems: never;
+	schemas: {
+		/** Body_login_for_access_token_api_auth_token_post */
+		Body_login_for_access_token_api_auth_token_post: {
+			/** Grant Type */
+			grant_type?: string | null;
+			/** Username */
+			username: string;
+			/** Password */
+			password: string;
+			/**
+			 * Scope
+			 * @default
+			 */
+			scope: string;
+			/** Client Id */
+			client_id?: string | null;
+			/** Client Secret */
+			client_secret?: string | null;
+		};
+		/** HTTPValidationError */
+		HTTPValidationError: {
+			/** Detail */
+			detail?: components['schemas']['ValidationError'][];
+		};
+		/** NewProjectSchema */
+		NewProjectSchema: {
+			/** Title */
+			title: string;
+			/** Description */
+			description: string | null;
+			/** Is Public */
+			is_public: boolean;
+		};
+		/** ProjectSchema */
+		ProjectSchema: {
+			/** Title */
+			title: string;
+			/** Description */
+			description: string | null;
+			/** Is Public */
+			is_public: boolean;
+			/** Id */
+			id: number;
+		};
+		/** Token */
+		Token: {
+			/** Access Token */
+			access_token: string;
+			/** Token Type */
+			token_type: string;
+		};
+		/** UserRegister */
+		UserRegister: {
+			/** Username */
+			username: string;
+			/** Password */
+			password: string;
+		};
+		/** ValidationError */
+		ValidationError: {
+			/** Location */
+			loc: (string | number)[];
+			/** Message */
+			msg: string;
+			/** Error Type */
+			type: string;
+		};
+	};
+	responses: never;
+	parameters: never;
+	requestBodies: never;
+	headers: never;
+	pathItems: never;
 }
 export type $defs = Record<string, never>;
 export interface operations {
-    health_check_api_health_check_get: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": unknown;
-                };
-            };
-        };
-    };
-    get_projects_api_projects__get: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ProjectSchema"][];
-                };
-            };
-        };
-    };
-    create_project_api_projects__post: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["NewProjectSchema"];
-            };
-        };
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ProjectSchema"];
-                };
-            };
-            /** @description Validation Error */
-            422: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["HTTPValidationError"];
-                };
-            };
-        };
-    };
-    get_project_by_id_api_projects__project_id__get: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                project_id: number;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ProjectSchema"];
-                };
-            };
-            /** @description Validation Error */
-            422: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["HTTPValidationError"];
-                };
-            };
-        };
-    };
-    login_for_access_token_api_auth_token_post: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/x-www-form-urlencoded": components["schemas"]["Body_login_for_access_token_api_auth_token_post"];
-            };
-        };
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["Token"];
-                };
-            };
-            /** @description Validation Error */
-            422: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["HTTPValidationError"];
-                };
-            };
-        };
-    };
-    register_api_auth_register_post: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UserRegister"];
-            };
-        };
-        responses: {
-            /** @description Successful Response */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["Token"];
-                };
-            };
-            /** @description Validation Error */
-            422: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["HTTPValidationError"];
-                };
-            };
-        };
-    };
+	health_check_api_health_check_get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': unknown;
+				};
+			};
+		};
+	};
+	get_projects_api_projects__get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ProjectSchema'][];
+				};
+			};
+		};
+	};
+	create_project_api_projects__post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['NewProjectSchema'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ProjectSchema'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	get_project_by_id_api_projects__project_id__get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ProjectSchema'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	login_for_access_token_api_auth_token_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/x-www-form-urlencoded': components['schemas']['Body_login_for_access_token_api_auth_token_post'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['Token'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	register_api_auth_register_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['UserRegister'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['Token'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
 }
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
index 5000457..7c242f7 100644
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -1,36 +1,35 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
 		variants: {
 			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
 				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: 'default'
+		}
 	});
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
-		variant = "default",
+		variant = 'default',
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
@@ -39,7 +38,7 @@
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	bind:this={ref}
 	data-slot="badge"
 	{href}
diff --git a/frontend/src/lib/components/ui/badge/index.ts b/frontend/src/lib/components/ui/badge/index.ts
index 64e0aa9..f05fb87 100644
--- a/frontend/src/lib/components/ui/badge/index.ts
+++ b/frontend/src/lib/components/ui/badge/index.ts
@@ -1,2 +1,2 @@
-export { default as Badge } from "./badge.svelte";
-export { badgeVariants, type BadgeVariant } from "./badge.svelte";
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/frontend/src/lib/components/ui/separator/separator.svelte b/frontend/src/lib/components/ui/separator/separator.svelte
index 64e1133..e978b08 100644
--- a/frontend/src/lib/components/ui/separator/separator.svelte
+++ b/frontend/src/lib/components/ui/separator/separator.svelte
@@ -15,7 +15,7 @@
 
 <div
 	class={cn(
-		'shrink-0 bg-border',
+		'bg-border shrink-0',
 		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}
diff --git a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
index 8c28af3..bdd122b 100644
--- a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
+++ b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
@@ -7,10 +7,10 @@
 	import { Eye, Lock, Globe, Calendar, User } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 
-	const { 
-		project, 
-		viewMode = 'grid' 
-	}: { 
+	const {
+		project,
+		viewMode = 'grid'
+	}: {
 		project: components['schemas']['ProjectSchema'] & { id: number };
 		viewMode?: 'grid' | 'list';
 	} = $props();
@@ -30,18 +30,23 @@
 </script>
 
 {#if viewMode === 'grid'}
-	<Card.Root class="group hover:shadow-lg transition-all duration-200 cursor-pointer" onclick={handleViewProject}>
+	<Card.Root
+		class="group cursor-pointer transition-all duration-200 hover:shadow-lg"
+		onclick={handleViewProject}
+	>
 		<Card.Header class="pb-3">
 			<div class="flex items-start justify-between">
-				<Card.Title class="text-lg font-semibold line-clamp-2 group-hover:text-primary transition-colors">
+				<Card.Title
+					class="group-hover:text-primary line-clamp-2 text-lg font-semibold transition-colors"
+				>
 					{project.title}
 				</Card.Title>
 				<Badge variant={project.is_public ? 'secondary' : 'outline'} class="ml-2 shrink-0">
 					{#if project.is_public}
-						<Globe class="h-3 w-3 mr-1" />
+						<Globe class="mr-1 h-3 w-3" />
 						Public
 					{:else}
-						<Lock class="h-3 w-3 mr-1" />
+						<Lock class="mr-1 h-3 w-3" />
 						Private
 					{/if}
 				</Badge>
@@ -49,11 +54,11 @@
 		</Card.Header>
 
 		<Card.Content class="space-y-4">
-			<p class="text-sm text-muted-foreground line-clamp-3 min-h-[3rem]">
+			<p class="text-muted-foreground line-clamp-3 min-h-[3rem] text-sm">
 				{project.description || 'No description available.'}
 			</p>
-			
-			<div class="flex items-center justify-between text-xs text-muted-foreground">
+
+			<div class="text-muted-foreground flex items-center justify-between text-xs">
 				<div class="flex items-center gap-1">
 					<User class="h-3 w-3" />
 					<span>Project Owner</span>
@@ -66,44 +71,47 @@
 		</Card.Content>
 
 		<Card.Footer class="pt-4">
-			<Button 
-				variant="default" 
-				size="sm" 
-				class="w-full group-hover:shadow-md transition-shadow"
+			<Button
+				variant="default"
+				size="sm"
+				class="w-full transition-shadow group-hover:shadow-md"
 				onclick={(e) => {
 					e.stopPropagation();
 					handleViewProject();
 				}}
 			>
-				<Eye class="h-4 w-4 mr-2" />
+				<Eye class="mr-2 h-4 w-4" />
 				View Project
 			</Button>
 		</Card.Footer>
 	</Card.Root>
 {:else}
 	<!-- List View -->
-	<Card.Root class="group hover:shadow-md transition-all duration-200 cursor-pointer" onclick={handleViewProject}>
+	<Card.Root
+		class="group cursor-pointer transition-all duration-200 hover:shadow-md"
+		onclick={handleViewProject}
+	>
 		<Card.Content class="p-6">
 			<div class="flex items-center justify-between">
-				<div class="flex-1 min-w-0">
-					<div class="flex items-center gap-3 mb-2">
-						<h3 class="text-lg font-semibold truncate group-hover:text-primary transition-colors">
+				<div class="min-w-0 flex-1">
+					<div class="mb-2 flex items-center gap-3">
+						<h3 class="group-hover:text-primary truncate text-lg font-semibold transition-colors">
 							{project.title}
 						</h3>
 						<Badge variant={project.is_public ? 'secondary' : 'outline'}>
 							{#if project.is_public}
-								<Globe class="h-3 w-3 mr-1" />
+								<Globe class="mr-1 h-3 w-3" />
 								Public
 							{:else}
-								<Lock class="h-3 w-3 mr-1" />
+								<Lock class="mr-1 h-3 w-3" />
 								Private
 							{/if}
 						</Badge>
 					</div>
-					<p class="text-sm text-muted-foreground line-clamp-2 mb-3">
+					<p class="text-muted-foreground mb-3 line-clamp-2 text-sm">
 						{project.description || 'No description available.'}
 					</p>
-					<div class="flex items-center gap-4 text-xs text-muted-foreground">
+					<div class="text-muted-foreground flex items-center gap-4 text-xs">
 						<div class="flex items-center gap-1">
 							<User class="h-3 w-3" />
 							<span>Project Owner</span>
@@ -114,16 +122,16 @@
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center gap-2 ml-4">
-					<Button 
-						variant="default" 
+				<div class="ml-4 flex items-center gap-2">
+					<Button
+						variant="default"
 						size="sm"
 						onclick={(e) => {
 							e.stopPropagation();
 							handleViewProject();
 						}}
 					>
-						<Eye class="h-4 w-4 mr-2" />
+						<Eye class="mr-2 h-4 w-4" />
 						View
 					</Button>
 				</div>
diff --git a/frontend/src/routes/app/explore/+page.svelte b/frontend/src/routes/app/explore/+page.svelte
index 7211dde..dbc4ac3 100644
--- a/frontend/src/routes/app/explore/+page.svelte
+++ b/frontend/src/routes/app/explore/+page.svelte
@@ -28,42 +28,44 @@
 	const filteredProjects = $derived(() => {
 		if (!$projectsQuery.data) return [];
 		let filtered = $projectsQuery.data;
-		
+
 		if (searchTerm) {
-			filtered = filtered.filter((project: Project) => 
-				project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-				(project.description && project.description.toLowerCase().includes(searchTerm.toLowerCase()))
+			filtered = filtered.filter(
+				(project: Project) =>
+					project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+					(project.description &&
+						project.description.toLowerCase().includes(searchTerm.toLowerCase()))
 			);
 		}
-		
+
 		if (showPublicOnly) {
 			filtered = filtered.filter((project: Project) => project.is_public);
 		}
-		
+
 		return filtered;
 	});
 </script>
 
-<div class="container mx-auto px-4 py-6 space-y-6">
+<div class="container mx-auto space-y-6 px-4 py-6">
 	<!-- Header Section -->
 	<div class="flex flex-col gap-4">
-		<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+		<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
 			<div>
 				<h1 class="text-3xl font-bold tracking-tight">Explore Projects</h1>
 				<p class="text-muted-foreground mt-1">Discover amazing projects from the community</p>
 			</div>
 			<div class="flex items-center gap-2">
-				<Button 
-					variant={viewMode === 'grid' ? 'default' : 'outline'} 
+				<Button
+					variant={viewMode === 'grid' ? 'default' : 'outline'}
 					size="sm"
-					onclick={() => viewMode = 'grid'}
+					onclick={() => (viewMode = 'grid')}
 				>
 					<Grid3X3 class="h-4 w-4" />
 				</Button>
-				<Button 
-					variant={viewMode === 'list' ? 'default' : 'outline'} 
+				<Button
+					variant={viewMode === 'list' ? 'default' : 'outline'}
 					size="sm"
-					onclick={() => viewMode = 'list'}
+					onclick={() => (viewMode = 'list')}
 				>
 					<List class="h-4 w-4" />
 				</Button>
@@ -72,9 +74,9 @@
 
 		<!-- Search and Filter Section -->
 		<Card.Root class="p-4">
-			<div class="flex flex-col md:flex-row gap-4">
+			<div class="flex flex-col gap-4 md:flex-row">
 				<div class="relative flex-1">
-					<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+					<Search class="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
 					<Input
 						bind:value={searchTerm}
 						placeholder="Search projects by title or description..."
@@ -83,15 +85,11 @@
 				</div>
 				<div class="flex items-center gap-4">
 					<label class="flex items-center gap-2 text-sm">
-						<input 
-							type="checkbox" 
-							bind:checked={showPublicOnly}
-							class="rounded"
-						/>
+						<input type="checkbox" bind:checked={showPublicOnly} class="rounded" />
 						Public only
 					</label>
 					<Button variant="outline" size="sm">
-						<Filter class="h-4 w-4 mr-2" />
+						<Filter class="mr-2 h-4 w-4" />
 						Filters
 					</Button>
 				</div>
@@ -102,7 +100,11 @@
 	<!-- Results Section -->
 	<div class="space-y-4">
 		{#if $projectsQuery.isPending}
-			<div class={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'space-y-4'}>
+			<div
+				class={viewMode === 'grid'
+					? 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'
+					: 'space-y-4'}
+			>
 				{#each Array(12) as _}
 					<ProjectSkeleton />
 				{/each}
@@ -114,25 +116,35 @@
 		{:else}
 			<!-- Results Count -->
 			<div class="flex items-center justify-between">
-				<p class="text-sm text-muted-foreground">
+				<p class="text-muted-foreground text-sm">
 					Showing {filteredProjects().length} of {$projectsQuery.data.length} projects
 				</p>
 			</div>
 
 			{#if filteredProjects().length === 0}
 				<div class="flex flex-col items-center justify-center py-12 text-center">
-					<div class="rounded-full bg-muted p-3 mb-4">
-						<Search class="h-6 w-6 text-muted-foreground" />
+					<div class="bg-muted mb-4 rounded-full p-3">
+						<Search class="text-muted-foreground h-6 w-6" />
 					</div>
-					<h3 class="text-lg font-semibold mb-2">No projects found</h3>
+					<h3 class="mb-2 text-lg font-semibold">No projects found</h3>
 					<p class="text-muted-foreground mb-4">Try adjusting your search or filters</p>
-					<Button variant="outline" onclick={() => { searchTerm = ''; showPublicOnly = false; }}>
+					<Button
+						variant="outline"
+						onclick={() => {
+							searchTerm = '';
+							showPublicOnly = false;
+						}}
+					>
 						Clear filters
 					</Button>
 				</div>
 			{:else}
-				<div class={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'space-y-4'}>
-					{#each filteredProjects() as project(project.title)}
+				<div
+					class={viewMode === 'grid'
+						? 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'
+						: 'space-y-4'}
+				>
+					{#each filteredProjects() as project (project.title)}
 						<ProjectCard {project} {viewMode} />
 					{/each}
 				</div>
diff --git a/frontend/src/routes/app/profile/+page.svelte b/frontend/src/routes/app/profile/+page.svelte
index 94b53ba..a697260 100644
--- a/frontend/src/routes/app/profile/+page.svelte
+++ b/frontend/src/routes/app/profile/+page.svelte
@@ -8,13 +8,13 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import { Separator } from '$lib/components/ui/separator';
 	import { userState } from '@/api/user.svelte';
-	import { 
-		User, 
-		Mail, 
-		Calendar, 
-		Settings, 
-		Edit3, 
-		Save, 
+	import {
+		User,
+		Mail,
+		Calendar,
+		Settings,
+		Edit3,
+		Save,
 		X,
 		Camera,
 		Key,
@@ -26,7 +26,7 @@
 	let isEditing = $state(false);
 	let editedProfile = $state({
 		username: userState.user?.username || '',
-		email: userState.user?.email || '',
+		email: "",
 		bio: '',
 		location: '',
 		website: ''
@@ -36,7 +36,7 @@
 		isEditing = true;
 		editedProfile = {
 			username: userState.user?.username || '',
-			email: userState.user?.email || '',
+			email: "",
 			bio: '',
 			location: '',
 			website: ''
@@ -53,7 +53,7 @@
 		isEditing = false;
 		editedProfile = {
 			username: userState.user?.username || '',
-			email: userState.user?.email || '',
+			email: '',
 			bio: '',
 			location: '',
 			website: ''
@@ -69,60 +69,60 @@
 	}
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-4xl space-y-6">
+<div class="container mx-auto max-w-4xl space-y-6 px-4 py-6">
 	<!-- Header -->
-	<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+	<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
 		<div>
 			<h1 class="text-3xl font-bold tracking-tight">Profile</h1>
 			<p class="text-muted-foreground mt-1">Manage your account settings and preferences</p>
 		</div>
 		{#if !isEditing}
 			<Button onclick={handleEdit}>
-				<Edit3 class="h-4 w-4 mr-2" />
+				<Edit3 class="mr-2 h-4 w-4" />
 				Edit Profile
 			</Button>
 		{/if}
 	</div>
 
-	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 		<!-- Profile Card -->
 		<div class="lg:col-span-1">
 			<Card.Root>
 				<Card.Content class="p-6 text-center">
 					<div class="relative mb-4">
-						<Avatar.Root class="h-24 w-24 mx-auto">
-							<Avatar.Image 
-								src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face" 
-								alt="Profile" 
+						<Avatar.Root class="mx-auto h-24 w-24">
+							<Avatar.Image
+								src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face"
+								alt="Profile"
 							/>
 							<Avatar.Fallback class="text-lg">
 								{userState.user?.username?.[0]?.toUpperCase() || 'U'}
 							</Avatar.Fallback>
 						</Avatar.Root>
 						{#if isEditing}
-							<Button 
-								size="sm" 
-								variant="outline" 
-								class="absolute -bottom-2 -right-2 h-8 w-8 rounded-full p-0"
+							<Button
+								size="sm"
+								variant="outline"
+								class="absolute -right-2 -bottom-2 h-8 w-8 rounded-full p-0"
 							>
 								<Camera class="h-4 w-4" />
 							</Button>
 						{/if}
 					</div>
 
-					<h2 class="text-xl font-semibold mb-1">
+					<h2 class="mb-1 text-xl font-semibold">
 						{userState.user?.username || 'Username'}
 					</h2>
-					<p class="text-sm text-muted-foreground mb-4">
+					<p class="text-muted-foreground mb-4 text-sm">
 						{editedProfile.email || 'email@example.com'}
 					</p>
 
 					<Badge variant="secondary" class="mb-4">
-						<Shield class="h-3 w-3 mr-1" />
+						<Shield class="mr-1 h-3 w-3" />
 						Active User
 					</Badge>
 
-					<div class="text-xs text-muted-foreground flex items-center justify-center gap-1">
+					<div class="text-muted-foreground flex items-center justify-center gap-1 text-xs">
 						<Calendar class="h-3 w-3" />
 						<span>Joined {formatDate(new Date())}</span>
 					</div>
@@ -152,7 +152,7 @@
 		</div>
 
 		<!-- Main Content -->
-		<div class="lg:col-span-2 space-y-6">
+		<div class="space-y-6 lg:col-span-2">
 			<!-- Personal Information -->
 			<Card.Root>
 				<Card.Header class="flex flex-row items-center justify-between">
@@ -163,18 +163,18 @@
 					{#if isEditing}
 						<div class="flex gap-2">
 							<Button size="sm" onclick={handleSave}>
-								<Save class="h-4 w-4 mr-2" />
+								<Save class="mr-2 h-4 w-4" />
 								Save
 							</Button>
 							<Button size="sm" variant="outline" onclick={handleCancel}>
-								<X class="h-4 w-4 mr-2" />
+								<X class="mr-2 h-4 w-4" />
 								Cancel
 							</Button>
 						</div>
 					{/if}
 				</Card.Header>
 				<Card.Content class="space-y-4">
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 						<div class="space-y-2">
 							<Label for="username">Username</Label>
 							{#if isEditing}
@@ -184,8 +184,8 @@
 									placeholder="Enter username"
 								/>
 							{:else}
-								<div class="flex items-center gap-2 p-2 bg-muted rounded-md">
-									<User class="h-4 w-4 text-muted-foreground" />
+								<div class="bg-muted flex items-center gap-2 rounded-md p-2">
+									<User class="text-muted-foreground h-4 w-4" />
 									<span>{userState.user?.username || 'Not set'}</span>
 								</div>
 							{/if}
@@ -201,15 +201,15 @@
 									placeholder="Enter email"
 								/>
 							{:else}
-								<div class="flex items-center gap-2 p-2 bg-muted rounded-md">
-									<Mail class="h-4 w-4 text-muted-foreground" />
+								<div class="bg-muted flex items-center gap-2 rounded-md p-2">
+									<Mail class="text-muted-foreground h-4 w-4" />
 									<span>{editedProfile.email || 'Not set'}</span>
 								</div>
 							{/if}
 						</div>
 					</div>
 
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 						<div class="space-y-2">
 							<Label for="location">Location</Label>
 							{#if isEditing}
@@ -219,7 +219,7 @@
 									placeholder="Enter location"
 								/>
 							{:else}
-								<div class="p-2 bg-muted rounded-md">
+								<div class="bg-muted rounded-md p-2">
 									<span class="text-muted-foreground">{editedProfile.location || 'Not set'}</span>
 								</div>
 							{/if}
@@ -234,7 +234,7 @@
 									placeholder="https://example.com"
 								/>
 							{:else}
-								<div class="p-2 bg-muted rounded-md">
+								<div class="bg-muted rounded-md p-2">
 									<span class="text-muted-foreground">{editedProfile.website || 'Not set'}</span>
 								</div>
 							{/if}
@@ -251,7 +251,7 @@
 								class="min-h-[100px]"
 							/>
 						{:else}
-							<div class="p-2 bg-muted rounded-md min-h-[100px]">
+							<div class="bg-muted min-h-[100px] rounded-md p-2">
 								<span class="text-muted-foreground">
 									{editedProfile.bio || 'No bio available.'}
 								</span>
@@ -274,11 +274,9 @@
 								<Key class="h-4 w-4" />
 								Change Password
 							</Label>
-							<p class="text-sm text-muted-foreground">Update your account password</p>
+							<p class="text-muted-foreground text-sm">Update your account password</p>
 						</div>
-						<Button variant="outline" size="sm">
-							Change
-						</Button>
+						<Button variant="outline" size="sm">Change</Button>
 					</div>
 
 					<Separator />
@@ -289,7 +287,7 @@
 								<Bell class="h-4 w-4" />
 								Email Notifications
 							</Label>
-							<p class="text-sm text-muted-foreground">Receive notifications about your projects</p>
+							<p class="text-muted-foreground text-sm">Receive notifications about your projects</p>
 						</div>
 						<input type="checkbox" checked class="rounded" />
 					</div>
@@ -298,15 +296,15 @@
 
 					<div class="flex items-center justify-between">
 						<div class="space-y-1">
-							<Label class="flex items-center gap-2 text-destructive">
+							<Label class="text-destructive flex items-center gap-2">
 								<Settings class="h-4 w-4" />
 								Delete Account
 							</Label>
-							<p class="text-sm text-muted-foreground">Permanently delete your account and all data</p>
+							<p class="text-muted-foreground text-sm">
+								Permanently delete your account and all data
+							</p>
 						</div>
-						<Button variant="destructive" size="sm">
-							Delete
-						</Button>
+						<Button variant="destructive" size="sm">Delete</Button>
 					</div>
 				</Card.Content>
 			</Card.Root>
diff --git a/frontend/src/routes/app/projects/[slug]/+page.svelte b/frontend/src/routes/app/projects/[slug]/+page.svelte
index 13488ff..e4c0ea6 100644
--- a/frontend/src/routes/app/projects/[slug]/+page.svelte
+++ b/frontend/src/routes/app/projects/[slug]/+page.svelte
@@ -9,13 +9,13 @@
 	import { getProjectById } from '../(components)/dataLoaders';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { 
-		ArrowLeft, 
-		Globe, 
-		Lock, 
-		Calendar, 
-		User, 
-		Edit3, 
+	import {
+		ArrowLeft,
+		Globe,
+		Lock,
+		Calendar,
+		User,
+		Edit3,
 		Trash2,
 		Share2,
 		Bookmark,
@@ -48,11 +48,11 @@
 	}
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-6xl space-y-6">
+<div class="container mx-auto max-w-6xl space-y-6 px-4 py-6">
 	<!-- Back Navigation -->
 	<div class="flex items-center gap-4">
 		<Button variant="outline" size="sm" onclick={goBack}>
-			<ArrowLeft class="h-4 w-4 mr-2" />
+			<ArrowLeft class="mr-2 h-4 w-4" />
 			Back to Explore
 		</Button>
 	</div>
@@ -67,9 +67,9 @@
 		</div>
 	{:else}
 		{@const project = $projectQuery.data}
-		
+
 		<!-- Project Header -->
-		<div class="flex flex-col lg:flex-row gap-6">
+		<div class="flex flex-col gap-6 lg:flex-row">
 			<!-- Main Content -->
 			<div class="flex-1 space-y-6">
 				<Card.Root>
@@ -80,10 +80,10 @@
 									<h1 class="text-3xl font-bold tracking-tight">{project.title}</h1>
 									<Badge variant={project.is_public ? 'secondary' : 'outline'}>
 										{#if project.is_public}
-											<Globe class="h-3 w-3 mr-1" />
+											<Globe class="mr-1 h-3 w-3" />
 											Public
 										{:else}
-											<Lock class="h-3 w-3 mr-1" />
+											<Lock class="mr-1 h-3 w-3" />
 											Private
 										{/if}
 									</Badge>
@@ -92,15 +92,15 @@
 							</div>
 							<div class="flex items-center gap-2">
 								<Button size="sm">
-									<Bookmark class="h-4 w-4 mr-2" />
+									<Bookmark class="mr-2 h-4 w-4" />
 									Bookmark
 								</Button>
 								<Button size="sm" variant="outline">
-									<Share2 class="h-4 w-4 mr-2" />
+									<Share2 class="mr-2 h-4 w-4" />
 									Share
 								</Button>
 								<Button size="sm" variant="outline">
-									<Edit3 class="h-4 w-4 mr-2" />
+									<Edit3 class="mr-2 h-4 w-4" />
 									Edit
 								</Button>
 							</div>
@@ -109,7 +109,7 @@
 						<Separator />
 
 						<!-- Project Meta -->
-						<div class="flex items-center gap-6 text-sm text-muted-foreground">
+						<div class="text-muted-foreground flex items-center gap-6 text-sm">
 							<div class="flex items-center gap-1">
 								<User class="h-4 w-4" />
 								<span>Project Owner</span>
@@ -129,7 +129,7 @@
 						<div class="space-y-6">
 							<!-- Description -->
 							<div>
-								<h2 class="text-lg font-semibold mb-3">About this project</h2>
+								<h2 class="mb-3 text-lg font-semibold">About this project</h2>
 								<p class="text-muted-foreground leading-relaxed">
 									{project.description || 'No description provided for this project.'}
 								</p>
@@ -139,23 +139,23 @@
 
 							<!-- Project Stats -->
 							<div>
-								<h2 class="text-lg font-semibold mb-4">Project Statistics</h2>
-								<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-									<div class="text-center p-4 bg-muted rounded-lg">
+								<h2 class="mb-4 text-lg font-semibold">Project Statistics</h2>
+								<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">15</div>
-										<div class="text-sm text-muted-foreground">Files</div>
+										<div class="text-muted-foreground text-sm">Files</div>
 									</div>
-									<div class="text-center p-4 bg-muted rounded-lg">
+									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">3</div>
-										<div class="text-sm text-muted-foreground">Contributors</div>
+										<div class="text-muted-foreground text-sm">Contributors</div>
 									</div>
-									<div class="text-center p-4 bg-muted rounded-lg">
+									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">42</div>
-										<div class="text-sm text-muted-foreground">Commits</div>
+										<div class="text-muted-foreground text-sm">Commits</div>
 									</div>
-									<div class="text-center p-4 bg-muted rounded-lg">
+									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">7</div>
-										<div class="text-sm text-muted-foreground">Branches</div>
+										<div class="text-muted-foreground text-sm">Branches</div>
 									</div>
 								</div>
 							</div>
@@ -173,20 +173,26 @@
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-2">
-							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
-								<Code class="h-4 w-4 text-muted-foreground" />
+							<div
+								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
+							>
+								<Code class="text-muted-foreground h-4 w-4" />
 								<span class="font-medium">src/</span>
-								<span class="text-sm text-muted-foreground ml-auto">Source code</span>
+								<span class="text-muted-foreground ml-auto text-sm">Source code</span>
 							</div>
-							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
-								<FileText class="h-4 w-4 text-muted-foreground" />
+							<div
+								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
+							>
+								<FileText class="text-muted-foreground h-4 w-4" />
 								<span class="font-medium">README.md</span>
-								<span class="text-sm text-muted-foreground ml-auto">Project documentation</span>
+								<span class="text-muted-foreground ml-auto text-sm">Project documentation</span>
 							</div>
-							<div class="flex items-center gap-3 p-3 bg-muted rounded-lg hover:bg-muted/80 transition-colors cursor-pointer">
-								<Code class="h-4 w-4 text-muted-foreground" />
+							<div
+								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
+							>
+								<Code class="text-muted-foreground h-4 w-4" />
 								<span class="font-medium">package.json</span>
-								<span class="text-sm text-muted-foreground ml-auto">Dependencies</span>
+								<span class="text-muted-foreground ml-auto text-sm">Dependencies</span>
 							</div>
 						</div>
 					</Card.Content>
@@ -194,7 +200,7 @@
 			</div>
 
 			<!-- Sidebar -->
-			<div class="lg:w-80 space-y-6">
+			<div class="space-y-6 lg:w-80">
 				<!-- Quick Actions -->
 				<Card.Root>
 					<Card.Header>
@@ -202,15 +208,15 @@
 					</Card.Header>
 					<Card.Content class="space-y-2">
 						<Button variant="outline" size="sm" class="w-full justify-start">
-							<GitBranch class="h-4 w-4 mr-2" />
+							<GitBranch class="mr-2 h-4 w-4" />
 							Create Branch
 						</Button>
 						<Button variant="outline" size="sm" class="w-full justify-start">
-							<Code class="h-4 w-4 mr-2" />
+							<Code class="mr-2 h-4 w-4" />
 							Clone Repository
 						</Button>
 						<Button variant="outline" size="sm" class="w-full justify-start">
-							<FileText class="h-4 w-4 mr-2" />
+							<FileText class="mr-2 h-4 w-4" />
 							Download ZIP
 						</Button>
 					</Card.Content>
@@ -244,11 +250,13 @@
 					</Card.Header>
 					<Card.Content class="space-y-3">
 						<div class="flex items-center gap-3">
-							<div class="h-8 w-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground text-sm font-medium">
+							<div
+								class="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+							>
 								U
 							</div>
-							<div class="flex-1 min-w-0">
-								<div class="font-medium text-sm">Project Owner</div>
+							<div class="min-w-0 flex-1">
+								<div class="text-sm font-medium">Project Owner</div>
 								<div class="text-muted-foreground text-xs">Owner</div>
 							</div>
 						</div>

From 4ac930d417cf598527d16aedba2a69e351a99355 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Wed, 9 Jul 2025 23:47:53 +0300
Subject: [PATCH 3/9] =?UTF-8?q?=E2=9C=A8=20Implement=20user=20role=20selec?=
 =?UTF-8?q?tion=20and=20project=20creation=20enhancements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lib/api/v1.d.ts                  | 347 +++++++++++++++++-
 .../components/ui/checkbox/checkbox.svelte    |  36 ++
 .../src/lib/components/ui/checkbox/index.ts   |   6 +
 .../src/lib/components/ui/switch/index.ts     |   7 +
 .../lib/components/ui/switch/switch.svelte    |  29 ++
 frontend/src/routes/+layout.ts                |   1 +
 .../app/(components)/ChooseRoleDialog.svelte  | 126 +++++++
 .../(components)/CreateProjectDialog.svelte   |  21 +-
 .../app/(components)/dataLoaders.test.ts      |  98 -----
 .../routes/app/(components)/dataLoaders.ts    |  22 +-
 frontend/src/routes/app/+layout.ts            |  10 +
 frontend/src/routes/app/+page.svelte          |  14 +
 frontend/src/routes/app/profile/+page.svelte  |   4 +-
 .../src/routes/auth/register/+page.svelte     |   2 +-
 14 files changed, 614 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 frontend/src/lib/components/ui/checkbox/index.ts
 create mode 100644 frontend/src/lib/components/ui/switch/index.ts
 create mode 100644 frontend/src/lib/components/ui/switch/switch.svelte
 create mode 100644 frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
 delete mode 100644 frontend/src/routes/app/(components)/dataLoaders.test.ts
 create mode 100644 frontend/src/routes/app/+layout.ts

diff --git a/frontend/src/lib/api/v1.d.ts b/frontend/src/lib/api/v1.d.ts
index f090e54..cad8302 100644
--- a/frontend/src/lib/api/v1.d.ts
+++ b/frontend/src/lib/api/v1.d.ts
@@ -56,6 +56,74 @@ export interface paths {
 		patch?: never;
 		trace?: never;
 	};
+	'/api/projects/{project_id}/apply': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Apply To Project */
+		post: operations['apply_to_project_api_projects__project_id__apply_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/{project_id}/applications': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get Project Applications */
+		get: operations['get_project_applications_api_projects__project_id__applications_get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/{project_id}/new-applications': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get Project New Applications */
+		get: operations['get_project_new_applications_api_projects__project_id__new_applications_get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/{project_id}/applications/approve': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		/** Approve Application */
+		patch: operations['approve_application_api_projects__project_id__applications_approve_patch'];
+		trace?: never;
+	};
 	'/api/auth/token': {
 		parameters: {
 			query?: never;
@@ -90,10 +158,65 @@ export interface paths {
 		patch?: never;
 		trace?: never;
 	};
+	'/api/user/set-role': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Set User Role */
+		post: operations['set_user_role_api_user_set_role_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/user/get-me': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Get Me */
+		post: operations['get_me_api_user_get_me_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 }
 export type webhooks = Record<string, never>;
 export interface components {
 	schemas: {
+		/** ApplicationSchema */
+		ApplicationSchema: {
+			/** Project Id */
+			project_id: number;
+			/** User Id */
+			user_id: number;
+			/** Is Approved */
+			is_approved: boolean | null;
+			/**
+			 * Created At
+			 * Format: date-time
+			 */
+			created_at: string;
+		};
+		/** ApproveApplicationSchema */
+		ApproveApplicationSchema: {
+			/** Is Approved */
+			is_approved: boolean;
+			/** User Id */
+			user_id: number;
+		};
 		/** Body_login_for_access_token_api_auth_token_post */
 		Body_login_for_access_token_api_auth_token_post: {
 			/** Grant Type */
@@ -124,7 +247,18 @@ export interface components {
 			/** Description */
 			description: string | null;
 			/** Is Public */
-			is_public: boolean;
+			is_public: boolean | null;
+			/** Is Opensource */
+			is_opensource: boolean | null;
+			/** Is Dead */
+			is_dead: boolean | null;
+		};
+		/** ProjectMemberSchema */
+		ProjectMemberSchema: {
+			/** Project Id */
+			project_id: number;
+			/** User Id */
+			user_id: number;
 		};
 		/** ProjectSchema */
 		ProjectSchema: {
@@ -133,9 +267,24 @@ export interface components {
 			/** Description */
 			description: string | null;
 			/** Is Public */
-			is_public: boolean;
+			is_public: boolean | null;
+			/** Is Opensource */
+			is_opensource: boolean | null;
+			/** Is Dead */
+			is_dead: boolean | null;
 			/** Id */
 			id: number;
+			/**
+			 * Created At
+			 * Format: date-time
+			 */
+			created_at: string;
+			/** Ceo Id */
+			ceo_id: number | null;
+		};
+		/** SetUserRoleSchema */
+		SetUserRoleSchema: {
+			role: components['schemas']['UserRole'];
 		};
 		/** Token */
 		Token: {
@@ -144,6 +293,12 @@ export interface components {
 			/** Token Type */
 			token_type: string;
 		};
+		/** User */
+		User: {
+			/** Username */
+			username: string;
+			role: components['schemas']['UserRole'];
+		};
 		/** UserRegister */
 		UserRegister: {
 			/** Username */
@@ -151,6 +306,11 @@ export interface components {
 			/** Password */
 			password: string;
 		};
+		/**
+		 * UserRole
+		 * @enum {string}
+		 */
+		UserRole: 'VIEWER' | 'FOUNDER' | 'DEVELOPER' | 'INVESTOR';
 		/** ValidationError */
 		ValidationError: {
 			/** Location */
@@ -273,6 +433,134 @@ export interface operations {
 			};
 		};
 	};
+	apply_to_project_api_projects__project_id__apply_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ApplicationSchema'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	get_project_applications_api_projects__project_id__applications_get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ApplicationSchema'][];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	get_project_new_applications_api_projects__project_id__new_applications_get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ApplicationSchema'][];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	approve_application_api_projects__project_id__applications_approve_patch: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['ApproveApplicationSchema'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ProjectMemberSchema'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
 	login_for_access_token_api_auth_token_post: {
 		parameters: {
 			query?: never;
@@ -339,4 +627,59 @@ export interface operations {
 			};
 		};
 	};
+	set_user_role_api_user_set_role_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['SetUserRoleSchema'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': {
+						[key: string]: string;
+					};
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	get_me_api_user_get_me_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['User'];
+				};
+			};
+		};
+	};
 }
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..1622e05
--- /dev/null
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/checkbox/index.ts b/frontend/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..6d92d94
--- /dev/null
+++ b/frontend/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};
diff --git a/frontend/src/lib/components/ui/switch/index.ts b/frontend/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..f5533db
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..78477dd
--- /dev/null
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
index 593cfc8..201d9c9 100644
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@@ -1,4 +1,5 @@
 export const prerender = true;
+export const ssr = false;
 
 import { browser } from '$app/environment';
 import { QueryClient } from '@tanstack/svelte-query';
diff --git a/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
new file mode 100644
index 0000000..dddd749
--- /dev/null
+++ b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { Check, Eye, Rocket, Code, TrendingUp, LoaderCircle } from '@lucide/svelte';
+	import { Badge } from '@/components/ui/badge';
+	import { cn } from '$lib/utils';
+	import { setRole } from './dataLoaders';
+	import { createMutation } from '@tanstack/svelte-query';
+	import { invalidateAll } from '$app/navigation';
+	import { goto } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+	import { type components } from '$lib/api/v1';
+
+	type UserRole = components['schemas']['UserRole'];
+	const roles = [
+		{
+			value: 'VIEWER' as UserRole,
+			label: 'Viewer',
+			description: 'Browse and explore content',
+			icon: Eye,
+			color: 'bg-blue-50 border-blue-200 hover:bg-blue-100',
+			iconColor: 'text-blue-600'
+		},
+		{
+			value: 'FOUNDER' as UserRole,
+			label: 'Founder',
+			description: 'Build and manage your startup',
+			icon: Rocket,
+			color: 'bg-purple-50 border-purple-200 hover:bg-purple-100',
+			iconColor: 'text-purple-600'
+		},
+		{
+			value: 'DEVELOPER' as UserRole,
+			label: 'Developer',
+			description: 'Create and contribute to projects',
+			icon: Code,
+			color: 'bg-green-50 border-green-200 hover:bg-green-100',
+			iconColor: 'text-green-600'
+		},
+		{
+			value: 'INVESTOR' as UserRole,
+			label: 'Investor',
+			description: 'Discover investment opportunities',
+			icon: TrendingUp,
+			color: 'bg-orange-50 border-orange-200 hover:bg-orange-100',
+			iconColor: 'text-orange-600'
+		}
+	];
+
+	let { open = $bindable(false) }: { open: boolean } = $props();
+	let selectedRole: UserRole | null = $state(null);
+
+	const setRoleMutation = createMutation({
+		mutationFn: async (role: UserRole) => await setRole(role),
+		onSuccess: () => {
+			toast.success('Role set successfully! Redirecting...');
+			// invalidateAll();
+			goto('/app/explore');
+		},
+		onError: (error) => {
+			toast.error(`Failed to set role: ${error.message}`);
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="sm:max-w-md" interactOutsideBehavior="ignore">
+		<Dialog.Header class="text-center">
+			<Dialog.Title class="text-2xl font-semibold">Choose Your Role</Dialog.Title>
+			<Dialog.Description class="text-muted-foreground">
+				Select the role that best describes you to personalize your experience
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="grid gap-3 py-4">
+			{#each roles as role (role.value)}
+				{@const isSelected = selectedRole === role.value}
+				{@const Icon = role.icon}
+				<button
+					onclick={() => (selectedRole = role.value)}
+					class={cn(
+						'relative flex items-center gap-4 rounded-lg border-2 p-4 text-left transition-all duration-200',
+						isSelected ? 'border-primary bg-primary/5 ring-primary/20 ring-2' : role.color
+					)}
+				>
+					<div class={cn('rounded-lg p-2', isSelected ? 'bg-primary/10' : 'bg-white')}>
+						<Icon class={cn('h-5 w-5', isSelected ? 'text-primary' : role.iconColor)} />
+					</div>
+
+					<div class="flex-1">
+						<div class="flex items-center gap-2">
+							<h3 class="text-foreground font-medium">{role.label}</h3>
+							{#if isSelected}
+								<Badge variant="default" class="h-5 px-2">
+									<Check class="h-3 w-3" />
+								</Badge>
+							{/if}
+						</div>
+						<p class="text-muted-foreground mt-1 text-sm">{role.description}</p>
+					</div>
+				</button>
+			{/each}
+		</div>
+
+		<div class="flex gap-3 pt-4">
+			<Button
+				onclick={() => {
+					if (!selectedRole) {
+						toast.error('Please select a role to continue.');
+						return;
+					}
+					$setRoleMutation.mutate(selectedRole);
+				}}
+				disabled={!selectedRole}
+				class="flex-1"
+			>
+				{#if $setRoleMutation.isPending}
+					<LoaderCircle class="animate-spin" />
+					Loading...
+				{:else}
+					Continue
+				{/if}
+			</Button>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
index b3b63fe..c53406a 100644
--- a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
+++ b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
@@ -4,6 +4,7 @@
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Textarea } from '@/components/ui/textarea';
+	import { Switch } from '$lib/components/ui/switch/index.js';
 	import { createMutation, useQueryClient } from '@tanstack/svelte-query';
 	import { toast } from 'svelte-sonner';
 	import { createProject } from './dataLoaders';
@@ -11,6 +12,8 @@
 
 	let name = $state('');
 	let description = $state('');
+	let isOpensource = $state(false);
+	let isDead = $state(false);
 
 	let { open = $bindable(false) }: { open: boolean } = $props();
 	const id = $props.id();
@@ -18,14 +21,16 @@
 	const queryClient = useQueryClient();
 
 	const createProjectMutation = createMutation({
-		mutationFn: async ({ title, description }: { title: string; description: string }) =>
-			await createProject(title, description),
+		mutationFn: async ({ title, description, isOpensource, isDead }: { title: string; description: string; isOpensource: boolean; isDead: boolean }) =>
+			await createProject(title, description, isOpensource, isDead),
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ['projects'] });
 			toast.success('Project created successfully');
 			open = false;
 			name = '';
 			description = '';
+			isOpensource = false;
+			isDead = false;
 		},
 		onError: (error) => {
 			toast.error(`Failed to create project: ${error.message}`);
@@ -53,12 +58,22 @@
 					placeholder="Enter a brief description of the project"
 				/>
 			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label for="isOpensource-{id}" class="text-right">Open Source</Label>
+				<Switch bind:checked={isOpensource} id="isOpensource-{id}" class="col-span-3" />
+			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label for="isDead-{id}" class="text-right">Startup Graveyard</Label>
+				<div class="col-span-3">
+					<Switch bind:checked={isDead} id="isDead-{id}" />
+					<p class="text-sm text-muted-foreground mt-1">Mark if this project is no longer active. It will be listed in the startup graveyard section.</p>
+				</div>
+			</div>
 		</div>
 		<Dialog.Footer>
 			<Button
 				type="submit"
 				disabled={!name || !description || $createProjectMutation.isPending}
-				onclick={() => $createProjectMutation.mutate({ title: name, description })}
 			>
 				{#if $createProjectMutation.isPending}
 					<LoaderCircle class="animate-spin" />
diff --git a/frontend/src/routes/app/(components)/dataLoaders.test.ts b/frontend/src/routes/app/(components)/dataLoaders.test.ts
deleted file mode 100644
index 29a6c6b..0000000
--- a/frontend/src/routes/app/(components)/dataLoaders.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { createProject } from './dataLoaders';
-import { client } from '@/api/client';
-
-// Mock the API client
-vi.mock('@/api/client', () => ({
-	client: {
-		POST: vi.fn()
-	}
-}));
-
-describe('Project Data Loaders', () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-	});
-
-	describe('createProject', () => {
-		it('should create project successfully', async () => {
-			const mockProject = {
-				id: 1,
-				title: 'Test Project',
-				description: 'Test Description',
-				is_public: true,
-				created_at: '2023-01-01T00:00:00Z',
-				updated_at: '2023-01-01T00:00:00Z'
-			};
-
-			vi.mocked(client.POST).mockResolvedValueOnce({
-				data: mockProject,
-				error: null
-			});
-
-			const result = await createProject('Test Project', 'Test Description');
-
-			expect(client.POST).toHaveBeenCalledWith('/api/projects/', {
-				body: {
-					title: 'Test Project',
-					description: 'Test Description',
-					is_public: true
-				}
-			});
-
-			expect(result).toEqual(mockProject);
-		});
-
-		it('should throw error when API returns error', async () => {
-			const mockError = { detail: 'Project creation failed' };
-
-			vi.mocked(client.POST).mockResolvedValueOnce({
-				data: null,
-				error: mockError
-			});
-
-			await expect(createProject('Test Project', 'Test Description')).rejects.toThrow(
-				JSON.stringify(mockError)
-			);
-		});
-
-		it('should throw error when no data is returned', async () => {
-			vi.mocked(client.POST).mockResolvedValueOnce({
-				data: null,
-				error: null
-			});
-
-			await expect(createProject('Test Project', 'Test Description')).rejects.toThrow(
-				'Failed to create project'
-			);
-		});
-
-		it('should handle empty title and description', async () => {
-			const mockProject = {
-				id: 2,
-				title: '',
-				description: '',
-				is_public: true,
-				created_at: '2023-01-01T00:00:00Z',
-				updated_at: '2023-01-01T00:00:00Z'
-			};
-
-			vi.mocked(client.POST).mockResolvedValueOnce({
-				data: mockProject,
-				error: null
-			});
-
-			const result = await createProject('', '');
-
-			expect(client.POST).toHaveBeenCalledWith('/api/projects/', {
-				body: {
-					title: '',
-					description: '',
-					is_public: true
-				}
-			});
-
-			expect(result).toEqual(mockProject);
-		});
-	});
-});
diff --git a/frontend/src/routes/app/(components)/dataLoaders.ts b/frontend/src/routes/app/(components)/dataLoaders.ts
index 3577674..782edf1 100644
--- a/frontend/src/routes/app/(components)/dataLoaders.ts
+++ b/frontend/src/routes/app/(components)/dataLoaders.ts
@@ -1,11 +1,14 @@
-import { client } from '@/api/client';
+import { client } from '$lib/api/client';
+import type { components } from '@/api/v1';
 
-export const createProject = async (title: string, description: string) => {
+export const createProject = async (title: string, description: string, isOpensource: boolean, isDead: boolean) => {
 	const { data, error } = await client.POST('/api/projects/', {
 		body: {
 			title,
 			description,
-			is_public: true // Assuming default is public
+			is_public: true,
+			is_opensource: isOpensource,
+			is_dead: isDead
 		}
 	});
 
@@ -16,3 +19,16 @@ export const createProject = async (title: string, description: string) => {
 
 	return data;
 };
+
+export const setRole = async (role: components['schemas']['UserRole']) => {
+	const { data, error } = await client.POST('/api/user/set-role', {
+		body: {
+			role
+		}
+	});
+	if (error || !data) {
+		console.error('Error setting user role:', error);
+		throw new Error(JSON.stringify(error ?? 'Failed to set user role'));
+	}
+	return data;
+};
diff --git a/frontend/src/routes/app/+layout.ts b/frontend/src/routes/app/+layout.ts
new file mode 100644
index 0000000..85c7dad
--- /dev/null
+++ b/frontend/src/routes/app/+layout.ts
@@ -0,0 +1,10 @@
+import { client } from '$lib/api/client';
+
+export const load = async () => {
+	const { data, error } = await client.POST('/api/user/get-me');
+	if (error) {
+		console.error('Failed to load user data:', error);
+		return { user: null };
+	}
+	return { user: data };
+};
diff --git a/frontend/src/routes/app/+page.svelte b/frontend/src/routes/app/+page.svelte
index a0616b6..d28f6fe 100644
--- a/frontend/src/routes/app/+page.svelte
+++ b/frontend/src/routes/app/+page.svelte
@@ -1,8 +1,22 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
+	import ChooseRoleDialog from './(components)/ChooseRoleDialog.svelte';
+
+	const { data } = $props();
+	let isChooseRoleDialogOpen = $state(false);
 
 	onMount(() => {
+		if (!data.user) {
+			goto('/auth/login');
+			return;
+		}
+		if (data.user.role === "VIEWER") {
+			isChooseRoleDialogOpen = true;
+			return;
+		}
 		goto('/app/explore');
 	});
 </script>
+
+<ChooseRoleDialog bind:open={isChooseRoleDialogOpen} />
diff --git a/frontend/src/routes/app/profile/+page.svelte b/frontend/src/routes/app/profile/+page.svelte
index a697260..9474015 100644
--- a/frontend/src/routes/app/profile/+page.svelte
+++ b/frontend/src/routes/app/profile/+page.svelte
@@ -26,7 +26,7 @@
 	let isEditing = $state(false);
 	let editedProfile = $state({
 		username: userState.user?.username || '',
-		email: "",
+		email: '',
 		bio: '',
 		location: '',
 		website: ''
@@ -36,7 +36,7 @@
 		isEditing = true;
 		editedProfile = {
 			username: userState.user?.username || '',
-			email: "",
+			email: '',
 			bio: '',
 			location: '',
 			website: ''
diff --git a/frontend/src/routes/auth/register/+page.svelte b/frontend/src/routes/auth/register/+page.svelte
index bd10f89..7ed296f 100644
--- a/frontend/src/routes/auth/register/+page.svelte
+++ b/frontend/src/routes/auth/register/+page.svelte
@@ -21,7 +21,7 @@
 	const registerMutation = createMutation({
 		mutationFn: async () => await register(username, password),
 		onSuccess: (data) => {
-			toast.success('Registration successful! Redirecting to login...');
+			toast.success('Registration successful! Redirecting...');
 			userState.set_token(data.access_token);
 			goto('/app');
 		},

From 01aa2c228497612f328ff7c00b54cd635e1fb54d Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Wed, 9 Jul 2025 23:49:39 +0300
Subject: [PATCH 4/9] Reformat

---
 .../components/ui/checkbox/checkbox.svelte    | 10 ++++----
 .../src/lib/components/ui/checkbox/index.ts   |  4 ++--
 .../src/lib/components/ui/switch/index.ts     |  4 ++--
 .../lib/components/ui/switch/switch.svelte    |  8 +++----
 .../(components)/CreateProjectDialog.svelte   | 23 +++++++++++++------
 .../routes/app/(components)/dataLoaders.ts    |  7 +++++-
 frontend/src/routes/app/+page.svelte          |  2 +-
 7 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 1622e05..fc8614a 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:checked
diff --git a/frontend/src/lib/components/ui/checkbox/index.ts b/frontend/src/lib/components/ui/checkbox/index.ts
index 6d92d94..5c27671 100644
--- a/frontend/src/lib/components/ui/checkbox/index.ts
+++ b/frontend/src/lib/components/ui/checkbox/index.ts
@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//
-	Root as Checkbox,
+	Root as Checkbox
 };
diff --git a/frontend/src/lib/components/ui/switch/index.ts b/frontend/src/lib/components/ui/switch/index.ts
index f5533db..129f8f5 100644
--- a/frontend/src/lib/components/ui/switch/index.ts
+++ b/frontend/src/lib/components/ui/switch/index.ts
@@ -1,7 +1,7 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte';
 
 export {
 	Root,
 	//
-	Root as Switch,
+	Root as Switch
 };
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
index 78477dd..ce291f3 100644
--- a/frontend/src/lib/components/ui/switch/switch.svelte
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>
diff --git a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
index c53406a..2b79615 100644
--- a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
+++ b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
@@ -21,8 +21,17 @@
 	const queryClient = useQueryClient();
 
 	const createProjectMutation = createMutation({
-		mutationFn: async ({ title, description, isOpensource, isDead }: { title: string; description: string; isOpensource: boolean; isDead: boolean }) =>
-			await createProject(title, description, isOpensource, isDead),
+		mutationFn: async ({
+			title,
+			description,
+			isOpensource,
+			isDead
+		}: {
+			title: string;
+			description: string;
+			isOpensource: boolean;
+			isDead: boolean;
+		}) => await createProject(title, description, isOpensource, isDead),
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ['projects'] });
 			toast.success('Project created successfully');
@@ -66,15 +75,15 @@
 				<Label for="isDead-{id}" class="text-right">Startup Graveyard</Label>
 				<div class="col-span-3">
 					<Switch bind:checked={isDead} id="isDead-{id}" />
-					<p class="text-sm text-muted-foreground mt-1">Mark if this project is no longer active. It will be listed in the startup graveyard section.</p>
+					<p class="text-muted-foreground mt-1 text-sm">
+						Mark if this project is no longer active. It will be listed in the startup graveyard
+						section.
+					</p>
 				</div>
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button
-				type="submit"
-				disabled={!name || !description || $createProjectMutation.isPending}
-			>
+			<Button type="submit" disabled={!name || !description || $createProjectMutation.isPending}>
 				{#if $createProjectMutation.isPending}
 					<LoaderCircle class="animate-spin" />
 					Loading...
diff --git a/frontend/src/routes/app/(components)/dataLoaders.ts b/frontend/src/routes/app/(components)/dataLoaders.ts
index 782edf1..d7ca1f5 100644
--- a/frontend/src/routes/app/(components)/dataLoaders.ts
+++ b/frontend/src/routes/app/(components)/dataLoaders.ts
@@ -1,7 +1,12 @@
 import { client } from '$lib/api/client';
 import type { components } from '@/api/v1';
 
-export const createProject = async (title: string, description: string, isOpensource: boolean, isDead: boolean) => {
+export const createProject = async (
+	title: string,
+	description: string,
+	isOpensource: boolean,
+	isDead: boolean
+) => {
 	const { data, error } = await client.POST('/api/projects/', {
 		body: {
 			title,
diff --git a/frontend/src/routes/app/+page.svelte b/frontend/src/routes/app/+page.svelte
index d28f6fe..5a9ec37 100644
--- a/frontend/src/routes/app/+page.svelte
+++ b/frontend/src/routes/app/+page.svelte
@@ -11,7 +11,7 @@
 			goto('/auth/login');
 			return;
 		}
-		if (data.user.role === "VIEWER") {
+		if (data.user.role === 'VIEWER') {
 			isChooseRoleDialogOpen = true;
 			return;
 		}

From 516c743d9d8e57817a1090293e34e8e30f57acb6 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Wed, 9 Jul 2025 23:53:45 +0300
Subject: [PATCH 5/9] Lint

---
 frontend/src/routes/app/(components)/ChooseRoleDialog.svelte | 1 -
 .../src/routes/app/explore/(components)/ProjectCard.svelte   | 1 -
 frontend/src/routes/app/explore/+page.svelte                 | 2 +-
 frontend/src/routes/app/projects/[slug]/+page.svelte         | 5 -----
 frontend/src/routes/app/projects/[slug]/+page.ts             | 2 +-
 5 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
index dddd749..a152966 100644
--- a/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
+++ b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
@@ -6,7 +6,6 @@
 	import { cn } from '$lib/utils';
 	import { setRole } from './dataLoaders';
 	import { createMutation } from '@tanstack/svelte-query';
-	import { invalidateAll } from '$app/navigation';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 	import { type components } from '$lib/api/v1';
diff --git a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
index bdd122b..48f11bc 100644
--- a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
+++ b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
-	import * as Avatar from '$lib/components/ui/avatar';
 	import { type components } from '@/api/v1';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Eye, Lock, Globe, Calendar, User } from '@lucide/svelte';
diff --git a/frontend/src/routes/app/explore/+page.svelte b/frontend/src/routes/app/explore/+page.svelte
index dbc4ac3..a5e1cf5 100644
--- a/frontend/src/routes/app/explore/+page.svelte
+++ b/frontend/src/routes/app/explore/+page.svelte
@@ -105,7 +105,7 @@
 					? 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'
 					: 'space-y-4'}
 			>
-				{#each Array(12) as _}
+				{#each Array(12) as _ (_)}
 					<ProjectSkeleton />
 				{/each}
 			</div>
diff --git a/frontend/src/routes/app/projects/[slug]/+page.svelte b/frontend/src/routes/app/projects/[slug]/+page.svelte
index e4c0ea6..c66279e 100644
--- a/frontend/src/routes/app/projects/[slug]/+page.svelte
+++ b/frontend/src/routes/app/projects/[slug]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { type components } from '@/api/v1';
 	import { createQuery } from '@tanstack/svelte-query';
 	import * as Card from '$lib/components/ui/card';
 	import { Badge } from '$lib/components/ui/badge';
@@ -7,7 +6,6 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
 	import { getProjectById } from '../(components)/dataLoaders';
-	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import {
 		ArrowLeft,
@@ -16,7 +14,6 @@
 		Calendar,
 		User,
 		Edit3,
-		Trash2,
 		Share2,
 		Bookmark,
 		GitBranch,
@@ -24,8 +21,6 @@
 		FileText
 	} from '@lucide/svelte';
 
-	type Project = components['schemas']['ProjectSchema'] & { id: number };
-
 	let { data } = $props();
 	const projectId = data.projectId;
 
diff --git a/frontend/src/routes/app/projects/[slug]/+page.ts b/frontend/src/routes/app/projects/[slug]/+page.ts
index 42502ea..722f283 100644
--- a/frontend/src/routes/app/projects/[slug]/+page.ts
+++ b/frontend/src/routes/app/projects/[slug]/+page.ts
@@ -1,7 +1,7 @@
 import type { PageLoad } from './$types';
 import { getProjectById } from '../(components)/dataLoaders';
 
-export const load: PageLoad = async ({ params, parent, fetch }) => {
+export const load: PageLoad = async ({ params, parent }) => {
 	const { queryClient } = await parent();
 	const projectId = parseInt(params.slug);
 

From b2a15256e2b25975bdb03968e7d1494c2b3498e2 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 10 Jul 2025 00:05:07 +0300
Subject: [PATCH 6/9] Fix build

---
 frontend/src/routes/app/projects/[slug]/+page.ts | 2 ++
 frontend/svelte.config.js                        | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/app/projects/[slug]/+page.ts b/frontend/src/routes/app/projects/[slug]/+page.ts
index 722f283..c007c9b 100644
--- a/frontend/src/routes/app/projects/[slug]/+page.ts
+++ b/frontend/src/routes/app/projects/[slug]/+page.ts
@@ -1,3 +1,5 @@
+export const prerender = false;
+
 import type { PageLoad } from './$types';
 import { getProjectById } from '../(components)/dataLoaders';
 
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 36ab569..91ee357 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -11,7 +11,9 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter(),
+		adapter: adapter({
+			fallback: 'app.html',
+		}),
 		alias: {
 			'@/*': './src/lib/*'
 		}

From fafcc50689ddc4dda8db1c2822f9381857fc6d3b Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 10 Jul 2025 00:05:59 +0300
Subject: [PATCH 7/9] reformat

---
 frontend/svelte.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 91ee357..179e13d 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -12,7 +12,7 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter({
-			fallback: 'app.html',
+			fallback: 'app.html'
 		}),
 		alias: {
 			'@/*': './src/lib/*'

From fe4baa92e46a77624434e584b6e645fd646166f9 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 10 Jul 2025 00:31:25 +0300
Subject: [PATCH 8/9] reformat

---
 frontend/src/lib/assets/placeholder.svg |   1 +
 frontend/src/routes/+layout.svelte      |   2 +
 frontend/src/routes/+page.svelte        | 462 ++++++++++++++++++++----
 3 files changed, 395 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/lib/assets/placeholder.svg

diff --git a/frontend/src/lib/assets/placeholder.svg b/frontend/src/lib/assets/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/frontend/src/lib/assets/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 89f3a28..2a8246b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -2,10 +2,12 @@
 	import '../app.css';
 	import { QueryClientProvider } from '@tanstack/svelte-query';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
+	import { ModeWatcher } from 'mode-watcher';
 
 	let { data, children } = $props();
 </script>
 
+<ModeWatcher defaultMode={'dark'} />
 <Toaster />
 <QueryClientProvider client={data.queryClient}>
 	{@render children()}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 93797b4..5c7fa5b 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,77 +1,399 @@
 <script lang="ts">
 	import { Button } from '@/components/ui/button';
-	import { Skeleton } from '@/components/ui/skeleton';
 	import * as Card from '@/components/ui/card';
-	import { Label } from '@/components/ui/label';
-	import { Input } from '@/components/ui/input';
-	import * as Avatar from '@/components/ui/avatar';
+	import { Badge } from '@/components/ui/badge';
+	import placeholder from '@/assets/placeholder.svg';
+	import {
+		Lightbulb,
+		Code,
+		Users,
+		TrendingUp,
+		Skull,
+		Eye,
+		Rocket,
+		DollarSign,
+		ArrowRight,
+		CheckCircle,
+		Star,
+		Github
+	} from '@lucide/svelte';
 </script>
 
-<h1 class="mb-6 text-center text-2xl font-bold">Welcome to ProjectOR</h1>
-<div class="flex flex-col items-center justify-center gap-4">
-	<Button href="/auth/login">Go to Login</Button>
-	<Button href="/auth/register">Go to Register</Button>
-	<Button href="/app">Go to App</Button>
-</div>
+<div class="flex min-h-screen flex-col">
+	<header class="flex h-16 items-center border-b px-4 lg:px-6">
+		<a class="flex items-center justify-center" href="/">
+			<Rocket class="text-primary h-6 w-6" />
+			<span class="ml-2 text-xl font-bold">ProjectOR</span>
+		</a>
+		<nav class="ml-auto flex gap-4 sm:gap-6">
+			<a class="hover:text-primary text-sm font-medium transition-colors" href="#features">
+				Features
+			</a>
+			<a class="hover:text-primary text-sm font-medium transition-colors" href="#roles">
+				For Teams
+			</a>
+			<a class="hover:text-primary text-sm font-medium transition-colors" href="#graveyard">
+				Learn
+			</a>
+		</nav>
+		<div class="ml-6 flex gap-2">
+			<Button variant="ghost" size="sm">
+				<a href="/app">Sign In</a>
+			</Button>
+			<Button size="sm">
+				<a href="/app">Get Started</a>
+			</Button>
+		</div>
+	</header>
 
-<h1 class="mt-32 text-center text-xl">Implemented components</h1>
-<div class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-	<Button>Button</Button>
-	<Button variant="outline">Outline Button</Button>
-	<Button disabled>Disabled Button</Button>
-	<Button size="sm">Small Button</Button>
-	<Button size="lg">Large Button</Button>
-	<Button variant="ghost">Ghost Button</Button>
-	<Button variant="destructive">Destructive Button</Button>
-</div>
-<div class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>Card Title</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<p>This is a simple card component.</p>
-		</Card.Content>
-	</Card.Root>
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>Card with Skeleton</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<Skeleton class="h-10 w-full" />
-			<Skeleton class="mt-2 h-6 w-3/4" />
-		</Card.Content>
-	</Card.Root>
-</div>
-<div class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-	<Label>Email</Label>
-	<Input type="email" placeholder="Enter your email" />
-	<Label>Password</Label>
-	<Input type="password" placeholder="Enter your password" />
-	<Button>Submit</Button>
-	<Button variant="outline">Outline Submit</Button>
-	<Button disabled>Disabled Submit</Button>
-</div>
-<div class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-	<Avatar.Root>
-		<Avatar.Image
-			src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-Ybci_L25OcWJhFyrcmoR4q_vsqoAtT_Qug&s"
-			alt="User Avatar"
-		/>
-		<Avatar.Fallback>U</Avatar.Fallback>
-	</Avatar.Root>
-	<Avatar.Root>
-		<Avatar.Image
-			src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-Ybci_L25OcWJhFyrcmoR4q_vsqoAtT_Qug&s"
-			alt="User Avatar"
-		/>
-		<Avatar.Fallback>U</Avatar.Fallback>
-	</Avatar.Root>
-	<Avatar.Root>
-		<Avatar.Image
-			src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-Ybci_L25OcWJhFyrcmoR4q_vsqoAtT_Qug&s"
-			alt="User Avatar"
-		/>
-		<Avatar.Fallback>U</Avatar.Fallback>
-	</Avatar.Root>
+	<main class="flex-1">
+		<section
+			class="from-primary/5 via-background to-secondary/5 w-full bg-gradient-to-br py-12 md:py-24 lg:py-32 xl:py-48"
+		>
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+					<div class="flex flex-col justify-center space-y-4">
+						<div class="space-y-2">
+							<Badge variant="secondary" class="w-fit">🚀 Where Ideas Meet Execution</Badge>
+							<h1 class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+								Connect. Build. Launch.
+							</h1>
+							<p class="text-muted-foreground max-w-[600px] md:text-xl">
+								The ultimate platform connecting creators, developers, and investors. Turn your
+								startup ideas into reality with the right team and funding.
+							</p>
+						</div>
+						<div class="flex flex-col gap-2 min-[400px]:flex-row">
+							<Button href="/app" size="lg">
+								Start Building
+								<ArrowRight class="ml-2 h-4 w-4" />
+							</Button>
+							<Button variant="outline" size="lg">Watch Demo</Button>
+						</div>
+						<div class="text-muted-foreground flex items-center gap-4 text-sm">
+							<div class="flex items-center gap-1">
+								<CheckCircle class="h-4 w-4 text-green-500" />
+								Free to start
+							</div>
+							<div class="flex items-center gap-1">
+								<CheckCircle class="h-4 w-4 text-green-500" />
+								No credit card required
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center justify-center">
+						<div class="relative">
+							<img
+								src={placeholder}
+								width="600"
+								height="400"
+								alt="Platform Dashboard"
+								class="aspect-video overflow-hidden rounded-xl object-cover shadow-2xl"
+							/>
+							<div
+								class="from-background/20 absolute inset-0 rounded-xl bg-gradient-to-t to-transparent"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section id="features" class="w-full py-12 md:py-24 lg:py-32">
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="flex flex-col items-center justify-center space-y-4 text-center">
+					<div class="space-y-2">
+						<Badge variant="secondary">Platform Features</Badge>
+						<h2 class="text-3xl font-bold tracking-tighter sm:text-5xl">
+							Everything you need to launch
+						</h2>
+						<p
+							class="text-muted-foreground max-w-[900px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"
+						>
+							From idea conception to successful launch, our platform provides all the tools and
+							connections you need.
+						</p>
+					</div>
+				</div>
+				<div class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-3 lg:gap-12">
+					<Card.Root class="relative overflow-hidden">
+						<Card.Header>
+							<Lightbulb class="h-10 w-10 text-yellow-500" />
+							<Card.Title>Idea Hub</Card.Title>
+							<Card.Description>
+								Post your startup ideas and get feedback from the community. Browse innovative
+								concepts looking for co-founders.
+							</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<ul class="space-y-2 text-sm">
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Idea validation tools
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Community feedback
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Market research insights
+								</li>
+							</ul>
+						</Card.Content>
+					</Card.Root>
+
+					<Card.Root class="relative overflow-hidden">
+						<Card.Header>
+							<Code class="h-10 w-10 text-blue-500" />
+							<Card.Title>Developer Hub</Card.Title>
+							<Card.Description>
+								Discover exciting projects to join. Connect with founders and build the next big
+								thing together.
+							</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<ul class="space-y-2 text-sm">
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Project matching
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Skill-based filtering
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Collaboration tools
+								</li>
+							</ul>
+						</Card.Content>
+					</Card.Root>
+
+					<Card.Root class="relative overflow-hidden">
+						<Card.Header>
+							<Users class="h-10 w-10 text-green-500" />
+							<Card.Title>Team Collaboration</Card.Title>
+							<Card.Description>
+								Built-in tools for seamless team communication, project management, and progress
+								tracking.
+							</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<ul class="space-y-2 text-sm">
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Real-time messaging
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Task management
+								</li>
+								<li class="flex items-center gap-2">
+									<CheckCircle class="h-4 w-4 text-green-500" />
+									Progress analytics
+								</li>
+							</ul>
+						</Card.Content>
+					</Card.Root>
+				</div>
+			</div>
+		</section>
+
+		<section id="roles" class="bg-muted/50 w-full py-12 md:py-24 lg:py-32">
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="flex flex-col items-center justify-center space-y-4 text-center">
+					<div class="space-y-2">
+						<Badge variant="secondary">For Everyone</Badge>
+						<h2 class="text-3xl font-bold tracking-tighter sm:text-5xl">
+							Built for every role in the startup ecosystem
+						</h2>
+					</div>
+				</div>
+				<div class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
+					<div class="grid gap-6 sm:grid-cols-2">
+						<Card.Root class="text-center">
+							<Card.Header>
+								<Eye class="mx-auto h-8 w-8 text-gray-500" />
+								<Card.Title class="text-lg">Viewers</Card.Title>
+							</Card.Header>
+							<Card.Content>
+								<p class="text-muted-foreground text-sm">
+									Explore ideas, follow projects, and stay updated on the latest innovations.
+								</p>
+							</Card.Content>
+						</Card.Root>
+
+						<Card.Root class="text-center">
+							<Card.Header>
+								<Code class="mx-auto h-8 w-8 text-blue-500" />
+								<Card.Title class="text-lg">Developers</Card.Title>
+							</Card.Header>
+							<Card.Content>
+								<p class="text-muted-foreground text-sm">
+									Find exciting projects, showcase your skills, and join innovative teams.
+								</p>
+							</Card.Content>
+						</Card.Root>
+
+						<Card.Root class="text-center">
+							<Card.Header>
+								<Lightbulb class="mx-auto h-8 w-8 text-yellow-500" />
+								<Card.Title class="text-lg">Founders</Card.Title>
+							</Card.Header>
+							<Card.Content>
+								<p class="text-muted-foreground text-sm">
+									Share your vision, build your team, and turn ideas into successful startups.
+								</p>
+							</Card.Content>
+						</Card.Root>
+
+						<Card.Root class="text-center">
+							<Card.Header>
+								<DollarSign class="mx-auto h-8 w-8 text-green-500" />
+								<Card.Title class="text-lg">Investors</Card.Title>
+							</Card.Header>
+							<Card.Content>
+								<p class="text-muted-foreground text-sm">
+									Discover promising startups, connect with founders, and make strategic
+									investments.
+								</p>
+							</Card.Content>
+						</Card.Root>
+					</div>
+					<div class="flex items-center justify-center">
+						<img
+							src={placeholder}
+							width="500"
+							height="400"
+							alt="Team Collaboration"
+							class="aspect-square overflow-hidden rounded-xl object-cover"
+						/>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section id="graveyard" class="w-full py-12 md:py-24 lg:py-32">
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+					<div class="flex flex-col justify-center space-y-4">
+						<div class="space-y-2">
+							<Badge variant="secondary" class="w-fit">
+								<Skull class="mr-1 h-4 w-4" />
+								Learn from Failure
+							</Badge>
+							<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl xl:text-5xl/none">
+								The Startup Graveyard
+							</h2>
+							<p class="text-muted-foreground max-w-[600px] md:text-xl">
+								Learn from failed ventures. Our unique graveyard section documents startup failures
+								with detailed analysis, helping you avoid common pitfalls and make better decisions.
+							</p>
+						</div>
+						<div class="grid gap-4 sm:grid-cols-2">
+							<div class="flex items-start gap-3">
+								<TrendingUp class="mt-0.5 h-5 w-5 text-red-500" />
+								<div>
+									<h3 class="font-semibold">Failure Analysis</h3>
+									<p class="text-muted-foreground text-sm">
+										Detailed breakdowns of what went wrong
+									</p>
+								</div>
+							</div>
+							<div class="flex items-start gap-3">
+								<Star class="mt-0.5 h-5 w-5 text-yellow-500" />
+								<div>
+									<h3 class="font-semibold">Key Learnings</h3>
+									<p class="text-muted-foreground text-sm">
+										Actionable insights for future projects
+									</p>
+								</div>
+							</div>
+						</div>
+						<Button variant="outline" class="w-fit bg-transparent">Explore Graveyard</Button>
+					</div>
+					<div class="flex items-center justify-center">
+						<img
+							src={placeholder}
+							width="600"
+							height="400"
+							alt="Startup Graveyard Analytics"
+							class="aspect-video overflow-hidden rounded-xl object-cover shadow-lg"
+						/>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section class="bg-muted/50 w-full py-12 md:py-24 lg:py-32">
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+					<div class="flex flex-col items-center space-y-2 text-center">
+						<div class="text-3xl font-bold">10K+</div>
+						<div class="text-muted-foreground text-sm">Active Users</div>
+					</div>
+					<div class="flex flex-col items-center space-y-2 text-center">
+						<div class="text-3xl font-bold">500+</div>
+						<div class="text-muted-foreground text-sm">Projects Launched</div>
+					</div>
+					<div class="flex flex-col items-center space-y-2 text-center">
+						<div class="text-3xl font-bold">$2M+</div>
+						<div class="text-muted-foreground text-sm">Funding Raised</div>
+					</div>
+					<div class="flex flex-col items-center space-y-2 text-center">
+						<div class="text-3xl font-bold">95%</div>
+						<div class="text-muted-foreground text-sm">Success Rate</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section class="bg-primary text-primary-foreground w-full py-12 md:py-24 lg:py-32">
+			<div class="container mr-auto ml-auto px-4 md:px-6">
+				<div class="flex flex-col items-center justify-center space-y-4 text-center">
+					<div class="space-y-2">
+						<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
+							Ready to turn your idea into reality?
+						</h2>
+						<p
+							class="text-primary-foreground/80 mx-auto max-w-[600px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"
+						>
+							Join thousands of creators, developers, and investors building the future together.
+						</p>
+					</div>
+					<div class="flex flex-col gap-2 min-[400px]:flex-row">
+						<Button size="lg" variant="secondary" href="/app">
+							Get Started Free
+							<ArrowRight class="ml-2 h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
+
+	<footer
+		class="flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6"
+	>
+		<div class="flex items-center gap-2">
+			<Rocket class="text-primary h-5 w-5" />
+			<span class="font-semibold">ProjectOR</span>
+		</div>
+		<p class="text-muted-foreground text-xs sm:ml-4">© 2025 ProjectOR. All rights reserved.</p>
+		<nav class="flex gap-4 sm:ml-auto sm:gap-6">
+			<a class="text-xs underline-offset-4 hover:underline"> Terms of Service </a>
+			<a class="text-xs underline-offset-4 hover:underline"> Privacy Policy </a>
+			<a class="text-xs underline-offset-4 hover:underline"> Contact </a>
+		</nav>
+		<div class="flex gap-2">
+			<Button
+				variant="ghost"
+				size="sm"
+				href="https://github.com/IU-Capstone-Project-2025/ProjectOR"
+			>
+				<Github class="h-4 w-4" />
+			</Button>
+		</div>
+	</footer>
 </div>

From 081c96f18aacb529154b98222304290e08be5c28 Mon Sep 17 00:00:00 2001
From: morisummer <timofeevnikita111@gmail.com>
Date: Thu, 10 Jul 2025 00:32:18 +0300
Subject: [PATCH 9/9] reformat

---
 frontend/src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 2a8246b..3cc88dd 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 	let { data, children } = $props();
 </script>
 
-<ModeWatcher defaultMode={'dark'} />
+<ModeWatcher defaultMode="dark" />
 <Toaster />
 <QueryClientProvider client={data.queryClient}>
 	{@render children()}