Add emails package

apps/web/package.json

@@ -26,7 +26,6 @@
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
-    "@react-email/components": "^0.0.21",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-table": "^8.19.3",
@@ -51,6 +50,7 @@
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "db": "workspace:*",
+    "email": "workspace:*",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.31.2",
     "drizzle-zod": "^0.5.1",
@@ -75,7 +75,6 @@
     "react-confetti": "^6.1.0",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-email": "^2.1.5",
     "react-fast-marquee": "^1.6.5",
     "react-hook-form": "7.52.1",
     "react-loader-spinner": "^6.1.6",

apps/web/src/app/api/registration/create/route.ts → apps/web/src/app/api/registration/create/route.tsx

@@ -7,6 +7,8 @@ import { RegisterFormValidator } from "@/validators/shared/RegisterForm";
 import c from "config";
 import { z } from "zod";
 import { getUser, getUserByTag } from "db/functions";
+import { plunk, render } from "email/sender";
+import { RegistrationSuccessEmail } from "email/templates/registration";
 
 export async function POST(req: Request) {
 	const rawBody = await req.json();
@@ -91,9 +93,9 @@ export async function POST(req: Request) {
 			skills: body.skills.map((v) => v.text.toLowerCase()),
 			profilePhoto: user.imageUrl,
 			isFullyRegistered: true,
-			phoneNumber:body.phoneNumber,
+			phoneNumber: body.phoneNumber,
 			isSearchable: body.profileIsSearchable,
-			countryOfResidence:body.countryOfResidence,
+			countryOfResidence: body.countryOfResidence,
 		});
 
 		await tx.insert(userHackerData).values({
@@ -116,10 +118,20 @@ export async function POST(req: Request) {
 		});
 	});
 
-	// sendEmail({
-	// 	to: body.email,
-	// 	subject: `You are now registered for ${c.hackathonName} ${c.itteration}!`,
-	// });
+	const regSucEmailBody = await render(
+		<RegistrationSuccessEmail
+			email={body.email}
+			firstName={body.firstName}
+			lastName={body.lastName}
+			hackertag={body.hackerTag}
+		/>,
+	);
+
+	plunk.emails.send({
+		to: body.email,
+		subject: `You're registered for ${c.hackathonName} ${c.itteration}!`,
+		body: regSucEmailBody,
+	});
 
 	return NextResponse.json({
 		success: true,

apps/web/src/app/contact/page.tsx

@@ -1,24 +1,18 @@
 import Navbar from "@/components/shared/Navbar";
-import { Oswald } from "next/font/google";
 import c from "config";
 import { Instagram, Facebook, Twitter, Github } from "lucide-react";
 import Link from "next/link";
 
-const oswald = Oswald({
-	variable: "--font-oswald",
-	subsets: ["latin"],
-});
-
 export default function Page() {
 	return (
 		<>
 			<Navbar className="border-b-0 bg-[#818F44]" />
 			<main
-				className={`bg-[#818F44] ${oswald.variable} flex min-h-screen items-center justify-center pt-16`}
+				className={`bg-[#818F44]flex min-h-screen items-center justify-center pt-16`}
 			>
 				<div className="mx-auto grid w-full max-w-6xl grid-cols-6 gap-4">
 					<div className="col-span-4 flex flex-col items-center justify-center gap-y-4">
-						<h1 className="font-oswald text-8xl font-black text-[#3E5A31]">
+						<h1 className="text-8xl font-black text-[#3E5A31]">
 							Contact Us
 						</h1>
 						<p className="max-w-[500px] text-center font-mono">

apps/web/src/app/page.tsx

@@ -7,17 +7,11 @@ import Partners from "@/components/landing/Partners";
 import Footer from "@/components/landing/Footer";
 import MLHBadge from "@/components/landing/MLHBadge";
 
-import { Oswald } from "next/font/google";
 import WorkWithUs from "@/components/landing/WorkWithUs";
 
-const oswald = Oswald({
-	variable: "--font-oswald",
-	subsets: ["latin"],
-});
-
 export default function Home() {
 	return (
-		<div className={`${oswald.variable} w-full overflow-x-hidden`}>
+		<div className={`w-full overflow-x-hidden`}>
 			<Navbar />
 			<MLHBadge />
 			<main className="overflow-x-hidden">

apps/web/src/components/landing/Partners.tsx

@@ -30,20 +30,6 @@ export default async function Partners() {
 					}
 				</h3>
 			</div>
-			{/* Example Code of what our previous partner section looked like */}
-			{/* <h1 className="z-20 text-4xl sm:text-5xl md:text-6xl font-bold font-oswald italic text-[#FEF2E6] text-center pt-7 sm:pb-8">
-        A Huge Thanks To Our Rowdyhacks Partners!
-      </h1>
-
-      <div className="z-20 flex justify-center items-center w-full h-full pt-12">
-        <PartnerCard partner={marathon} is_title={true}/>
-      </div>
-
-      <div className="z-20 grid place-items-center justify-center grid-flow-row grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-10 lg:gap-12 w-[98%] pt-8 sm:pt-10 md:pt-[3.5rem] lg:pt-[4rem] pb-2 sm:pb-8 lg:pb-12 overflow-y-hidden overflow-x-visible no-scrollbar">
-        {partnerData.partners.map((partner: Partner) => (
-          <PartnerCard key={partner.name} partner={partner} is_title={false} />
-        ))}
-      </div> */}
 		</section>
 	);
 }

apps/web/src/components/landing/TeamMember.tsx

@@ -9,13 +9,8 @@ import {
 	CardHeader,
 	CardTitle,
 } from "../shadcn/ui/card";
-import { Oswald } from "next/font/google";
 import Image from "next/image";
 import { useState } from "react";
-const oswald = Oswald({
-	variable: "--font-oswald",
-	subsets: ["latin"],
-});
 
 // Using the raw svg tag is inefficient. Will need to change later
 function LinkedIn({ fillColor }: { fillColor: string }) {
@@ -75,7 +70,7 @@ export default function TeamMember({ person }: { person: Person }) {
 
 	return (
 		<Card
-			className={`flex w-full items-center justify-center ${oswald.className} border-transparent bg-transparent text-[#FEF2E6] shadow-none duration-300 hover:scale-[1.15]`}
+			className={`flex w-full items-center justify-center border-transparent bg-transparent text-[#FEF2E6] shadow-none duration-300 hover:scale-[1.15]`}
 		>
 			<div className="text-[#FEF2E6]">
 				<CardHeader className="items-center">

apps/web/src/components/registration/RegisterForm.tsx

@@ -92,8 +92,8 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 			shirtSize: "" as any,
 			schoolID: "",
 			university: "",
-			phoneNumber:"",
-			countryOfResidence:"",
+			phoneNumber: "",
+			countryOfResidence: "",
 		},
 	});
 
@@ -116,10 +116,9 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 		}
 	}, [universityValue]);
 
-
-	useEffect(()=>{
-		console.log(countryValue)
-	},[countryValue])
+	useEffect(() => {
+		console.log(countryValue);
+	}, [countryValue]);
 
 	async function onSubmit(data: z.infer<typeof RegisterFormValidator>) {
 		console.log(data);
@@ -180,7 +179,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 			setIsLoading(false);
 			alert(
 				`Something went wrong while attempting to register. Please try again. If this is a continuing issue, please reach out to us at ${c.issueEmail}.`,
-			)
+			);
 			return console.log(
 				`Recieved a unexpected response from the server. Please try again. If this is a continuing issue, please reach out to us at ${c.issueEmail}.`,
 			);

apps/web/src/components/shared/Navbar.tsx

@@ -5,15 +5,9 @@ import { Button } from "../shadcn/ui/button";
 import ProfileButton from "./ProfileButton";
 import { auth, currentUser } from "@clerk/nextjs";
 import NavBarLinksGrouper from "./NavBarLinksGrouper";
-import { Oswald } from "next/font/google";
 import { cn } from "@/lib/utils/client/cn";
 import { getUser } from "db/functions";
 
-const oswald = Oswald({
-	variable: "--font-oswald",
-	subsets: ["latin"],
-});
-
 interface NavbarProps {
 	className?: string;
 }
@@ -26,7 +20,7 @@ export default async function Navbar({ className }: NavbarProps) {
 		<div className="z-50 w-screen">
 			<div
 				className={cn(
-					`relative top-0 z-50 h-16 w-screen border-b border-b-border bg-nav ${oswald.variable}`,
+					`relative top-0 z-50 h-16 w-screen border-b border-b-border bg-nav`,
 					className,
 				)}
 			>
@@ -43,7 +37,7 @@ export default async function Navbar({ className }: NavbarProps) {
 								height={32}
 							/>
 							{/* <div className="bg-muted-foreground h-[45%] rotate-[25deg] w-[2px]" /> */}
-							<h2 className="font-oswald text-lg font-bold text-[#A7866A] dark:text-[#FEF2E6]">
+							<h2 className="text-lg font-bold text-[#A7866A] dark:text-[#FEF2E6]">
 								{c.hackathonName}
 							</h2>
 						</Link>

apps/web/src/env.ts

@@ -13,6 +13,7 @@ export const env = createEnv({
 		NODE_ENV: z
 			.enum(["development", "test", "production"])
 			.default("development"),
+		PLUNK_API_KEY: z.string().min(1),
 	},
 	client: {
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),