From e3847b2a3de49b75c495bf9e7a4b28009cb8d6d9 Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Sat, 10 Feb 2024 11:35:57 +0100
Subject: [PATCH 1/6] Project interface and status enum

---
 src/types/supabase.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 00e6588..0ac6f36 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -165,3 +165,25 @@ export interface Leader {
 	teachPoints: number;
 	id: string;
 }
+
+export enum Status {
+	PENDING = "pending",
+	ACCEPTED = "accepted",
+}
+
+export interface Project {
+	id: string;
+	username: string;
+	title: string;
+	description: string;
+	cover_image: string;
+	status: Status.PENDING | Status.ACCEPTED;
+	language: string;
+	website: string;
+	repo: string;
+}
+
+
+
+
+

From c9aaa26cc0712d487ba2461667f0ba35d7e402be Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Thu, 15 Feb 2024 06:41:22 +0100
Subject: [PATCH 2/6] Add project routes + project interface + project pages

---
 src/lib/components/ProjectCard.svelte   |  0
 src/lib/components/layout/nav.svelte    | 10 +++
 src/routes/projects/+page.svelte        | 97 +++++++++++++++++++++++++
 src/routes/projects/review/+page.svelte |  9 +++
 src/routes/projects/submit/+page.svelte | 64 ++++++++++++++++
 5 files changed, 180 insertions(+)
 create mode 100644 src/lib/components/ProjectCard.svelte
 create mode 100644 src/routes/projects/+page.svelte
 create mode 100644 src/routes/projects/review/+page.svelte
 create mode 100644 src/routes/projects/submit/+page.svelte

diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/layout/nav.svelte b/src/lib/components/layout/nav.svelte
index 7c75dcb..0123ee7 100644
--- a/src/lib/components/layout/nav.svelte
+++ b/src/lib/components/layout/nav.svelte
@@ -20,6 +20,10 @@
 		{
 			path: '/code-of-conduct',
 			name: 'Code of Conduct'
+		},
+		{
+			path: '/projects',
+			name: 'Projects'
 		}
 	];
 
@@ -93,6 +97,12 @@
 							>Code of Conduct</a
 						>
 					</li>
+					<li class="mb-6">
+						<a
+							href="/projects"
+							class=" text-lg font-normal font-body hover:text-white hover:underline">Projects</a
+						>
+					</li>
 					<li class="mb-6">
 						<a
 							href="https://github.com/Learn-Build-Teach"
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..7ae5130
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	// Fetching projects with status "accepted" from the database, after admin review.
+</script>
+
+<article class="flex flex-col gap-y-8 align-start justify-start">
+	<h1 class="text-5xl text-center">
+		Here are the amazing projects built by the community members!
+	</h1>
+
+	<!-- Creating a button to add your own project -->
+	<a href="/projects/submit" class="mx-auto">
+		<button
+			class="rounded-md border border-white py-2 px-3 hover:font-bold hover:border-secondary transition-all ease-out duration-500"
+			><span class="text-xl font-bold mr-1">+</span>Add your own project</button
+		></a
+	>
+
+	<!-- Creating a grid to display the projects that need to be reviewd-->
+	<section class="grid max-sm:grid-cols-1 max-md:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
+		<div
+			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
+			<div class="w-full h-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project Image"
+					class="object-cover"
+				/>
+			</div>
+			<div
+				class="py-4 px-3 flex flex-col align-start justify-start bg-primary gap-y-2 rounded-b-md"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
+				<div class="flex align-center justify-between">
+					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
+					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+			<div class="w-full h-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project Image"
+					class="object-cover"
+				/>
+			</div>
+			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
+				<h1 class="font-bold text-xl">Project Name</h1>
+				<p class="font-light text-gray-100">Author</p>
+				<p>Project Description</p>
+				<div class="flex align-center justify-between">
+					<a href="#">Project</a>
+					<a href="#">Source code</a>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+			<div class="w-full h-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project Image"
+					class="object-cover"
+				/>
+			</div>
+			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
+				<h1 class="font-bold text-xl">Project Name</h1>
+				<p class="font-light text-gray-100">Author</p>
+				<p>Project Description</p>
+				<div class="flex align-center justify-between">
+					<a href="#">Project</a>
+					<a href="#">Source code</a>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+			<div class="w-full h-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project Image"
+					class="object-cover"
+				/>
+			</div>
+			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
+				<h1 class="font-bold text-xl">Project Name</h1>
+				<p class="font-light text-gray-100">Author</p>
+				<p>Project Description</p>
+				<div class="flex align-center justify-between">
+					<a href="#">Project</a>
+					<a href="#">Source code</a>
+				</div>
+			</div>
+		</div>
+	</section>
+</article>
diff --git a/src/routes/projects/review/+page.svelte b/src/routes/projects/review/+page.svelte
new file mode 100644
index 0000000..0e372dc
--- /dev/null
+++ b/src/routes/projects/review/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	// Will be a protected route for admin only.
+	// Fetching projects with status "pending" from the database.
+	// If project rejected, it will be deleted from the database.
+</script>
+
+<main>
+	<h1>Projects submitted by members that need review:</h1>
+</main>
diff --git a/src/routes/projects/submit/+page.svelte b/src/routes/projects/submit/+page.svelte
new file mode 100644
index 0000000..5a0dccb
--- /dev/null
+++ b/src/routes/projects/submit/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	// Projects submitted here will have a default status of "pending" to be reviewed by admin
+</script>
+
+<main class="flex flex-col align-center justify-center  h-screen">
+	<div class="text-left mb-6 w-[50%] mx-auto">
+		<h1 class="text-4xl font-bold">Submit your project.</h1>
+		<p class="text-slate-300">Note: will be reviewed before being published on the website.</p>
+	</div>
+	<form method="POST" class="w-[50%] mx-auto">
+		<div class="flex flex-col align-center mb-6 gap-y-1">
+			<label for="title" class="font-bold text-slate-300">Title:</label>
+			<input
+				name="title"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="Title"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="cover_image" class="font-bold text-slate-300">Cover Image:</label>
+			<input name="cover_image" type="file" />
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="description" class="font-bold text-slate-300">Description:</label>
+			<textarea
+				name="description"
+				class="py-2 px-3 rounded-md opacity-90 w-[90%]"
+				placeholder="Description"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="author" class="font-bold text-slate-300">Discord username: (Optional)</label>
+			<input
+				name="author"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="Discord username"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="site_url" class="font-bold text-slate-300">Site URL:</label>
+			<input
+				name="site_url"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="https://example.com"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="repo_url" class="font-bold text-slate-300">Repository URL:</label>
+			<input
+				name="repo_url"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="https://github.com/username/myrepo"
+			/>
+		</div>
+		<button
+			class="rounded-md bg-primary text-white border border-primary hover:bg-secondary hover:font-bold mt-4 py-2 px-3 w-[40%] transition-all ease-out duration-500"
+			>Submit</button
+		>
+	</form>
+</main>

From 2cd0408742fdc4f20cec30a8c346d1f2eaf69687 Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:23:51 +0100
Subject: [PATCH 3/6] Change layout of project page + create project card list
 page

---
 src/lib/components/ProjectCardList.svelte |  2 +
 src/routes/projects/+page.svelte          | 56 ++++++++++++++---------
 2 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/ProjectCardList.svelte

diff --git a/src/lib/components/ProjectCardList.svelte b/src/lib/components/ProjectCardList.svelte
new file mode 100644
index 0000000..0fbba99
--- /dev/null
+++ b/src/lib/components/ProjectCardList.svelte
@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 7ae5130..578b755 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -28,7 +28,7 @@
 				/>
 			</div>
 			<div
-				class="py-4 px-3 flex flex-col align-start justify-start bg-primary gap-y-2 rounded-b-md"
+				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
 			>
 				<h1 class="font-bold text-xl">Easy CSV</h1>
 				<p class="font-light text-slate-300">Christophe Anfry</p>
@@ -39,7 +39,9 @@
 				</div>
 			</div>
 		</div>
-		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+		<div
+			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
 			<div class="w-full h-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
@@ -47,17 +49,21 @@
 					class="object-cover"
 				/>
 			</div>
-			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
-				<h1 class="font-bold text-xl">Project Name</h1>
-				<p class="font-light text-gray-100">Author</p>
-				<p>Project Description</p>
+			<div
+				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
 				<div class="flex align-center justify-between">
-					<a href="#">Project</a>
-					<a href="#">Source code</a>
+					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
+					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
 				</div>
 			</div>
 		</div>
-		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+		<div
+			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
 			<div class="w-full h-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
@@ -65,17 +71,21 @@
 					class="object-cover"
 				/>
 			</div>
-			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
-				<h1 class="font-bold text-xl">Project Name</h1>
-				<p class="font-light text-gray-100">Author</p>
-				<p>Project Description</p>
+			<div
+				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
 				<div class="flex align-center justify-between">
-					<a href="#">Project</a>
-					<a href="#">Source code</a>
+					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
+					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
 				</div>
 			</div>
 		</div>
-		<div class="flex flex-col align-start justify-start border border-white rounded-md">
+		<div
+			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
 			<div class="w-full h-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
@@ -83,13 +93,15 @@
 					class="object-cover"
 				/>
 			</div>
-			<div class="py-4 px-3 flex flex-col align-start justify-start gap-y-2">
-				<h1 class="font-bold text-xl">Project Name</h1>
-				<p class="font-light text-gray-100">Author</p>
-				<p>Project Description</p>
+			<div
+				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
 				<div class="flex align-center justify-between">
-					<a href="#">Project</a>
-					<a href="#">Source code</a>
+					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
+					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
 				</div>
 			</div>
 		</div>

From 401bb7aa645555cd61a457232741134abd83f6df Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:18:36 +0100
Subject: [PATCH 4/6] Add review page + comment on admin page

---
 src/routes/admin/+page.svelte           |  7 ++-
 src/routes/projects/review/+page.svelte | 84 ++++++++++++++++++++++++-
 src/routes/projects/submit/+page.svelte |  2 +-
 3 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index bcf6951..4a4e2a7 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -22,7 +22,8 @@
 	<button
 		class="bg-white text-primary rounded py-2 px-4 text-lg font-bold w-full"
 		on:click={handleLoadMore}
-    >
-        Load More
-    </button>
+	>
+		Load More
+	</button>
+	<!-- Need to add here link to go to the review project page /projects/review -->
 </article>
diff --git a/src/routes/projects/review/+page.svelte b/src/routes/projects/review/+page.svelte
index 0e372dc..2e3d715 100644
--- a/src/routes/projects/review/+page.svelte
+++ b/src/routes/projects/review/+page.svelte
@@ -4,6 +4,86 @@
 	// If project rejected, it will be deleted from the database.
 </script>
 
-<main>
-	<h1>Projects submitted by members that need review:</h1>
+<main class="container md:mx-auto mt-8 px-4 flex flex-col gap-y-12 items-start justify-start">
+	<h1 class="text-4xl">Projects submitted by members that need review:</h1>
+	<div class="flex items-center justify-start gap-x-8 w-full">
+		<div class="h-full w-48 block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project image"
+				class="object-cover h-full"
+			/>
+		</div>
+		<div class="flex-1">
+			<h2 class="text-2xl font-bold">Easy CSV</h2>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-300">Author</p>
+			<div class="flex items-center justify-start gap-x-4">
+				<!-- Approve will update the status of the project to "approved" -->
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<!-- Reject will delete project from the database -->
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div class="flex items-center justify-start gap-x-8 w-full">
+		<div class="h-full w-48 block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project image"
+				class="object-cover h-full"
+			/>
+		</div>
+		<div class="flex-1">
+			<h2 class="text-2xl font-bold">Easy CSV</h2>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-300">Author</p>
+			<div class="flex items-center justify-start gap-x-4">
+				<!-- Approve will update the status of the project to "approved" -->
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<!-- Reject will delete project from the database -->
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div class="flex items-center justify-start gap-x-8 w-full">
+		<div class="h-full w-48 block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project image"
+				class="object-cover h-full"
+			/>
+		</div>
+		<div class="flex-1">
+			<h2 class="text-2xl font-bold">Easy CSV</h2>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-300">Author</p>
+			<div class="flex items-center justify-start gap-x-4">
+				<!-- Approve will update the status of the project to "approved" -->
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<!-- Reject will delete project from the database -->
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div class="flex items-center justify-start gap-x-8 w-full">
+		<div class="h-full w-48 block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project image"
+				class="object-cover h-full"
+			/>
+		</div>
+		<div class="flex-1">
+			<h2 class="text-2xl font-bold">Easy CSV</h2>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-300">Author</p>
+			<div class="flex items-center justify-start gap-x-4">
+				<!-- Approve will update the status of the project to "approved" -->
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<!-- Reject will delete project from the database -->
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
 </main>
diff --git a/src/routes/projects/submit/+page.svelte b/src/routes/projects/submit/+page.svelte
index 5a0dccb..aef3ae4 100644
--- a/src/routes/projects/submit/+page.svelte
+++ b/src/routes/projects/submit/+page.svelte
@@ -2,7 +2,7 @@
 	// Projects submitted here will have a default status of "pending" to be reviewed by admin
 </script>
 
-<main class="flex flex-col align-center justify-center  h-screen">
+<main class="flex flex-col align-center justify-center h-screen">
 	<div class="text-left mb-6 w-[50%] mx-auto">
 		<h1 class="text-4xl font-bold">Submit your project.</h1>
 		<p class="text-slate-300">Note: will be reviewed before being published on the website.</p>

From 9b415db41c3e32b115da1590c82e6b91975352ce Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Sun, 25 Feb 2024 14:25:11 +0100
Subject: [PATCH 5/6] project card layouts + add language in forms and cards

---
 src/routes/projects/+page.svelte        | 102 +++++++++++-----
 src/routes/projects/review/+page.svelte | 154 +++++++++++++++++-------
 src/routes/projects/submit/+page.svelte |  13 +-
 3 files changed, 195 insertions(+), 74 deletions(-)

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 578b755..f3a064b 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -16,92 +16,136 @@
 	>
 
 	<!-- Creating a grid to display the projects that need to be reviewd-->
-	<section class="grid max-sm:grid-cols-1 max-md:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
+	<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
 		<div
-			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
 		>
-			<div class="w-full h-full rounded-t-md block">
+			<div class="w-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-					alt="Project Image"
+					alt="Project cover"
 					class="object-cover"
 				/>
 			</div>
 			<div
-				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
 			>
 				<h1 class="font-bold text-xl">Easy CSV</h1>
 				<p class="font-light text-slate-300">Christophe Anfry</p>
 				<p>A web application that display your csv data into a table.</p>
-				<div class="flex align-center justify-between">
-					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
-					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
 				</div>
 			</div>
 		</div>
 		<div
-			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
 		>
-			<div class="w-full h-full rounded-t-md block">
+			<div class="w-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-					alt="Project Image"
+					alt="Project cover"
 					class="object-cover"
 				/>
 			</div>
 			<div
-				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
 			>
 				<h1 class="font-bold text-xl">Easy CSV</h1>
 				<p class="font-light text-slate-300">Christophe Anfry</p>
 				<p>A web application that display your csv data into a table.</p>
-				<div class="flex align-center justify-between">
-					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
-					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
 				</div>
 			</div>
 		</div>
 		<div
-			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
 		>
-			<div class="w-full h-full rounded-t-md block">
+			<div class="w-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-					alt="Project Image"
+					alt="Project cover"
 					class="object-cover"
 				/>
 			</div>
 			<div
-				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
 			>
 				<h1 class="font-bold text-xl">Easy CSV</h1>
 				<p class="font-light text-slate-300">Christophe Anfry</p>
 				<p>A web application that display your csv data into a table.</p>
-				<div class="flex align-center justify-between">
-					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
-					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
 				</div>
 			</div>
 		</div>
 		<div
-			class="flex flex-col align-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
 		>
-			<div class="w-full h-full rounded-t-md block">
+			<div class="w-full rounded-t-md block">
 				<img
 					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-					alt="Project Image"
+					alt="Project cover"
 					class="object-cover"
 				/>
 			</div>
 			<div
-				class="py-4 px-3 flex flex-col align-start justify-start gap-y-2 bg-primary rounded-b-md h-full"
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
 			>
 				<h1 class="font-bold text-xl">Easy CSV</h1>
 				<p class="font-light text-slate-300">Christophe Anfry</p>
 				<p>A web application that display your csv data into a table.</p>
-				<div class="flex align-center justify-between">
-					<a href="#" class="hover:text-secondary text-slate-300">Project ></a>
-					<a href="#" class="hover:text-secondary text-slate-300">Source code ></a>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
 				</div>
 			</div>
 		</div>
diff --git a/src/routes/projects/review/+page.svelte b/src/routes/projects/review/+page.svelte
index 2e3d715..6d1e709 100644
--- a/src/routes/projects/review/+page.svelte
+++ b/src/routes/projects/review/+page.svelte
@@ -4,86 +4,154 @@
 	// If project rejected, it will be deleted from the database.
 </script>
 
-<main class="container md:mx-auto mt-8 px-4 flex flex-col gap-y-12 items-start justify-start">
-	<h1 class="text-4xl">Projects submitted by members that need review:</h1>
-	<div class="flex items-center justify-start gap-x-8 w-full">
-		<div class="h-full w-48 block">
+<h1 class="text-3xl">Projects submitted</h1>
+<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
 			<img
 				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-				alt="Project image"
-				class="object-cover h-full"
+				alt="Project cover"
+				class="object-cover"
 			/>
 		</div>
-		<div class="flex-1">
-			<h2 class="text-2xl font-bold">Easy CSV</h2>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
 			<p>A web application that display your csv data into a table.</p>
-			<p class="text-slate-300">Author</p>
-			<div class="flex items-center justify-start gap-x-4">
-				<!-- Approve will update the status of the project to "approved" -->
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
 				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
-				<!-- Reject will delete project from the database -->
 				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
 			</div>
 		</div>
 	</div>
-	<div class="flex items-center justify-start gap-x-8 w-full">
-		<div class="h-full w-48 block">
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
 			<img
 				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-				alt="Project image"
-				class="object-cover h-full"
+				alt="Project cover"
+				class="object-cover"
 			/>
 		</div>
-		<div class="flex-1">
-			<h2 class="text-2xl font-bold">Easy CSV</h2>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
 			<p>A web application that display your csv data into a table.</p>
-			<p class="text-slate-300">Author</p>
-			<div class="flex items-center justify-start gap-x-4">
-				<!-- Approve will update the status of the project to "approved" -->
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
 				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
-				<!-- Reject will delete project from the database -->
 				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
 			</div>
 		</div>
 	</div>
-	<div class="flex items-center justify-start gap-x-8 w-full">
-		<div class="h-full w-48 block">
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
 			<img
 				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-				alt="Project image"
-				class="object-cover h-full"
+				alt="Project cover"
+				class="object-cover"
 			/>
 		</div>
-		<div class="flex-1">
-			<h2 class="text-2xl font-bold">Easy CSV</h2>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
 			<p>A web application that display your csv data into a table.</p>
-			<p class="text-slate-300">Author</p>
-			<div class="flex items-center justify-start gap-x-4">
-				<!-- Approve will update the status of the project to "approved" -->
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
 				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
-				<!-- Reject will delete project from the database -->
 				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
 			</div>
 		</div>
 	</div>
-	<div class="flex items-center justify-start gap-x-8 w-full">
-		<div class="h-full w-48 block">
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
 			<img
 				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
-				alt="Project image"
-				class="object-cover h-full"
+				alt="Project cover"
+				class="object-cover"
 			/>
 		</div>
-		<div class="flex-1">
-			<h2 class="text-2xl font-bold">Easy CSV</h2>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
 			<p>A web application that display your csv data into a table.</p>
-			<p class="text-slate-300">Author</p>
-			<div class="flex items-center justify-start gap-x-4">
-				<!-- Approve will update the status of the project to "approved" -->
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
 				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
-				<!-- Reject will delete project from the database -->
 				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
 			</div>
 		</div>
 	</div>
-</main>
+</section>
diff --git a/src/routes/projects/submit/+page.svelte b/src/routes/projects/submit/+page.svelte
index aef3ae4..4e0dece 100644
--- a/src/routes/projects/submit/+page.svelte
+++ b/src/routes/projects/submit/+page.svelte
@@ -4,7 +4,7 @@
 
 <main class="flex flex-col align-center justify-center h-screen">
 	<div class="text-left mb-6 w-[50%] mx-auto">
-		<h1 class="text-4xl font-bold">Submit your project.</h1>
+		<h1 class="text-4xl font-bold leading-none mb-2">Submit your project.</h1>
 		<p class="text-slate-300">Note: will be reviewed before being published on the website.</p>
 	</div>
 	<form method="POST" class="w-[50%] mx-auto">
@@ -19,7 +19,7 @@
 		</div>
 		<div class="flex flex-col align-start mb-6 gap-y-1">
 			<label for="cover_image" class="font-bold text-slate-300">Cover Image:</label>
-			<input name="cover_image" type="file" />
+			<input name="cover_image" type="file" class="cursor-pointer" />
 		</div>
 		<div class="flex flex-col align-start mb-6 gap-y-1">
 			<label for="description" class="font-bold text-slate-300">Description:</label>
@@ -38,6 +38,15 @@
 				placeholder="Discord username"
 			/>
 		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="language" class="font-bold text-slate-300">Programming language used:</label>
+			<input
+				name="language"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="i.e. JavaScript, Python, etc."
+			/>
+		</div>
 		<div class="flex flex-col align-start mb-6 gap-y-1">
 			<label for="site_url" class="font-bold text-slate-300">Site URL:</label>
 			<input

From df6f40f1b1678451052357afab56bda80909e220 Mon Sep 17 00:00:00 2001
From: Christophe anfry <66621302+Canfry@users.noreply.github.com>
Date: Thu, 14 Mar 2024 07:44:26 +0100
Subject: [PATCH 6/6] Add review page

---
 src/routes/projects/review/+page.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/routes/projects/review/+page.svelte b/src/routes/projects/review/+page.svelte
index 6d1e709..266a639 100644
--- a/src/routes/projects/review/+page.svelte
+++ b/src/routes/projects/review/+page.svelte
@@ -21,7 +21,12 @@
 		>
 			<h1 class="font-bold text-xl">Easy CSV</h1>
 			<p class="font-light text-slate-300">Christophe Anfry</p>
-			<p>A web application that display your csv data into a table.</p>
+			<p>
+				A web application that display your csv data into a table.A web application that display
+				your csv data into a table.A web application that display your csv data into a table.A web
+				application that display your csv data into a table.A web application that display your csv
+				data into a table.
+			</p>
 			<p class="text-slate-400 italic font-bold">Typescript</p>
 			<div class="flex items-center justify-between w-full">
 				<a