feat: initial v1 commit

2026-06-06 01:06:54 +00:00 · 2024-04-27 10:26:28 +00:00
parent 7914d79aa3
commit 075f2e094e
39 changed files with 4875 additions and 2 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/README.md
+++ b/README.md
@@ -1,2 +1,24 @@
-# stack
-Sr Izan's next.js website stack
+# Sr Izan Stack
+
+Sr Izan Stack is a next.js template which runs on modern technologies, with a focus on developer experience and ease-of-use.
+
+## The stack
+
+- Framework: [Next.js](https://nextjs.org/)
+- Language: [TypeScript](https://www.typescriptlang.org/)
+- Styling: [Tailwind CSS](https://tailwindcss.com/)
+- UI Library: [shadcn/ui](https://ui.shadcn.com)
+- Authentication: [Lucia](https://lucia-auth.com)
+- Deployment: [Vercel](https://vercel.com)
+- Database: [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) with [Prisma](https://www.prisma.io/)
+
+## Why (insert tool here)?
+
+- **Next.js**: I like next.js app router because it has a very good developer experience and it's very easy to use.
+- **TypeScript**: Don't even need to explain why
+- **Tailwind CSS**: I like the utility-first approach and the speed of development it provides
+- **shadcn/ui**: Copy-pasting components is so fire (also is Radix UI)
+- **Lucia**: The DevEX is amazing and it's very easy to use
+- **Vercel**: Next.js and Vercel are like bread and butter, but it's a bit slow with the free tier.
+- **MongoDB Atlas**: It has a very generous free tier, and I'm choosing NoSQL because Postgres hates me.
+- **Prisma**: Even though there are solid competitors like Drizzle, Prisma is easy to use, understand, and fast enough for my use case.
--- a/components.json
+++ b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -0,0 +1,12 @@
+volumes:
+  psql:
+services:
+  psql:
+    image: postgres
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: dfsjhkdswkjntelsmldbfvsgknl5t
+    volumes:
+      - psql:/var/lib/postgresql/data
+    ports:
+      - 5555:5432
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    webpack: (config) => {
+		config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
+		return config;
+	}
+};
+
+export default nextConfig;
--- a/package.json
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "srizan-stack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev --name"
+  },
+  "dependencies": {
+    "@lucia-auth/adapter-prisma": "^4.0.1",
+    "@prisma/client": "^5.12.1",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucia": "^3.1.1",
+    "lucide-react": "^0.368.0",
+    "next": "^14.2.3",
+    "next-themes": "^0.3.0",
+    "oslo": "^1.2.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.0",
+    "postcss": "^8",
+    "prisma": "^5.12.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/prisma/migrations/20240426160043_init/migration.sql
+++ b/prisma/migrations/20240426160043_init/migration.sql
@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "hashed_password" TEXT NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -0,0 +1,28 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id       String    @id @default(cuid())
+  username String @unique
+  hashed_password String
+  sessions Session[]
+}
+
+model Session {
+  id        String   @id @default(cuid())
+  userId    String
+  expiresAt DateTime
+  user      User     @relation(references: [id], fields: [userId], onDelete: Cascade)
+}
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
--- a/src/app/auth/signIn/page.tsx
+++ b/src/app/auth/signIn/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import Link from "next/link";
+import { useFormState } from "react-dom";
+import { login } from "@/lib/auth/actions";
+import SubmitButton from "@/components/app/SubmitButton/SubmitButton";
+
+export default function Page() {
+	const [, formAction] = useFormState(login, null);
+
+  return (
+    <div className="flex items-center p-4 lg:p-8">
+      <div className="w-full max-w-md m-auto space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold pb-1">Log In</h1>
+        </div>
+        <form action={formAction}>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Username</Label>
+              <Input name="username" id="username" required type="text" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input name="password" id="password" required type="password" />
+            </div>
+            <SubmitButton buttonText="Log In" className="w-full" />
+            <div className="text-center text-sm">
+              No account?
+              <Link className="underline pl-1" href="/auth/signUp">
+                Create one!
+              </Link>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/src/app/auth/signUp/page.tsx
+++ b/src/app/auth/signUp/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import Link from "next/link"
+import { signup } from "@/lib/auth/actions";
+import SubmitButton from "@/components/app/SubmitButton/SubmitButton";
+import { useFormState } from "react-dom";
+import { toast } from "sonner";
+import { useEffect } from "react";
+
+export default function Page() {
+  const [signupData, signupAction] = useFormState(signup, null)
+  useEffect(() => {
+    if (signupData?.error) {
+      toast.error(signupData.error)
+    }
+  }, [signupData])
+  return (
+    <div className="flex items-center p-6 lg:p-8">
+      <div className="w-full max-w-md m-auto space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold pb-1">Sign Up</h1>
+        </div>
+        <form action={signupAction}>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input name="username" required type="text" id="username" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input name="password" required type="password" id="password" />
+          </div>
+          <SubmitButton buttonText="Create account" className="w-full" />
+          <div className="text-center text-sm">
+            Already have an account?
+            <Link className="underline pl-1" href="/auth/signIn">
+              Login
+            </Link>
+          </div>
+        </div>
+        </form>
+      </div>
+    </div>
+  )
+}
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 220 23.077% 94.902%; /* base */
+      --foreground: 233.793 16.022% 35.490%; /* text */
+
+      --muted: 222.857 15.909% 82.745%; /* surface0 */
+      --muted-foreground: 233.333 12.796% 41.373%; /* subtext1 */
+
+      --popover: 220 23.077% 94.902%; /* base */
+      --popover-foreground: 233.793 16.022% 35.490%; /* text */
+
+      --card: 220 23.077% 94.902%; /* base */
+      --card-foreground: 233.793 16.022% 35.490%; /* text */
+
+      --border: 225 13.559% 76.863%; /* surface1 */
+      --input: 225 13.559% 76.863%; /* surface1 */
+
+      --primary: 219.907 91.489% 53.922%; /* blue */
+      --primary-foreground: 220 23.077% 94.902%; /* base */
+
+      --secondary: 222.857 15.909% 82.745%; /* surface0 */
+      --secondary-foreground: 233.793 16.022% 35.490%; /* text */
+
+      --accent: 222.857 15.909% 82.745%; /* surface0 */
+      --accent-foreground: 233.793 16.022% 35.490%; /* text */
+
+      --destructive: 347.077 86.667% 44.118%; /* red */
+      --destructive-foreground: 220 21.951% 91.961%; /* mantle */
+
+      --ring: 233.793 16.022% 35.490%; /* text */
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 240 21.053% 14.902%; /* base */
+      --foreground: 226.154 63.934% 88.039%; /* text */
+
+      --muted: 236.842 16.239% 22.941%; /* surface0 */
+      --muted-foreground: 226.667 35.294% 80.000%; /* subtext1 */
+
+      --popover: 240 21.053% 14.902%; /* base */
+      --popover-foreground: 226.154 63.934% 88.039%; /* text */
+
+      --card: 240 21.053% 14.902%; /* base */
+      --card-foreground: 226.154 63.934% 88.039%; /* text */
+
+      --border: 234.286 13.208% 31.176%; /* surface1 */
+      --input: 234.286 13.208% 31.176%; /* surface1 */
+
+      --primary: 217.168 91.870% 75.882%; /* blue */
+      --primary-foreground: 240 21.053% 14.902%; /* base */
+
+      --secondary: 236.842 16.239% 22.941%; /* surface0 */
+      --secondary-foreground: 226.154 63.934% 88.039%; /* text */
+
+      --accent: 236.842 16.239% 22.941%; /* surface0 */
+      --accent-foreground: 226.154 63.934% 88.039%; /* text */
+
+      --destructive: 343.269 81.250% 74.902%; /* red */
+      --destructive-foreground: 240 21.311% 11.961%; /* mantle */
+
+      --ring: 226.154 63.934% 88.039%; /* text */
+
+      --radius: 0.5rem;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/app/NavBar/NavBar";
+import { SessionProvider } from "@/lib/providers/SessionProvider";
+import { validateRequest } from "@/lib/auth";
+import { Toaster } from "@/components/ui/sonner"
+import { ThemeProvider } from "@/lib/providers/ThemeProvider";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "stack",
+  description: "The tech stack for your next(.js) project.",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const sessionData = await validateRequest()
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <SessionProvider value={sessionData}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+          <Navbar />
+          {children}
+          <Toaster />
+          </ThemeProvider>
+        </SessionProvider>
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,112 @@
+// https://v0.dev/r/DxCSk58T8pM
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <>
+      <main className="flex-1">
+          <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
+            <div className="container px-4 md:px-6">
+              <div className="flex flex-col items-center space-y-4 text-center">
+                <div className="space-y-2">
+                  <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
+                    The modern tech stack for your next(.js) project
+                  </h1>
+                  <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
+                    stack is a comprehensive tech stack that includes everything you need to build and deploy your next
+                    web application.
+                  </p>
+                </div>
+                <div className="space-x-4">
+                  <Link href="https://github.com/SrIzan10/stack">
+                    <Button>Start right NOW!</Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </section>
+          <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900" id="features">
+            <div className="container px-4 md:px-6">
+              <div className="flex flex-col items-center justify-center space-y-4 text-center">
+                <div className="space-y-2">
+                  <div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
+                    Key Features
+                  </div>
+                  <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
+                    Everything you need to build and deploy
+                  </h2>
+                  <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
+                    Stack is a comprehensive tech stack that includes everything you need to build and deploy your next
+                    web application.
+                  </p>
+                </div>
+              </div>
+              <div className="mx-auto max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
+                <div className="flex flex-col justify-center items-center text-center space-y-4">
+                  <ul className="grid gap-6">
+                    <li>
+                      <div className="grid gap-1">
+                        <h3 className="text-xl font-bold">Next.js</h3>
+                        <p className="text-gray-500 dark:text-gray-400">
+                          Build server-rendered React applications with Next.js.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                        <h3 className="text-xl font-bold">Prisma</h3>
+                        <p className="text-gray-500 dark:text-gray-400">
+                          Access your database with Prisma, the best way to work with databases in Ethan&apos;s opinion
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                        <h3 className="text-xl font-bold">Tailwind CSS</h3>
+                        <p className="text-gray-500 dark:text-gray-400">
+                          Style your application with Tailwind CSS, the utility-first CSS framework.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                        <h3 className="text-xl font-bold">shadcn/ui</h3>
+                        <p className="text-gray-500 dark:text-gray-400">
+                          Develop your application with Vite, the next-generation frontend tooling.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                        <h3 className="text-xl font-bold">Vercel</h3>
+                        <p className="text-gray-500 dark:text-gray-400">
+                          Deploy your application to the cloud with Vercel, the serverless platform.
+                        </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                          <h3 className="text-xl font-bold">Cloudflare Pages</h3>
+                          <p className="text-gray-500 dark:text-gray-400">
+                            Take advantage of the speed of Cloudflare to host your serverless websites.
+                          </p>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="grid gap-1">
+                          <h3 className="text-xl font-bold">Lucia</h3>
+                          <p className="text-gray-500 dark:text-gray-400">
+                            Manage authentication with Lucia auth, the best selfhosted authentication library.
+                          </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </>
+  );
+}
--- a/src/app/protected/page.tsx
+++ b/src/app/protected/page.tsx
@@ -0,0 +1,14 @@
+import { validateRequest } from "@/lib/auth";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+    const { user } = await validateRequest()
+    if (!user) return redirect('/auth/signIn')
+    return (
+        <div>
+            <h1 className="text-3xl font-bold text-center">Welcome {user?.username}!</h1>
+            <p>You are actually on a protected route!</p>
+            <p>Your ID is: {user.id}</p>
+        </div>
+    )
+}
--- a/src/components/app/MobileNavbarLinks/MobileNavbarLinks.tsx
+++ b/src/components/app/MobileNavbarLinks/MobileNavbarLinks.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import Link from "next/link";
+import { links } from "../NavBar/NavBar";
+
+export default function MobileNavbarLinks() {
+  return (
+    <div className="flex md:hidden">
+        <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+            <Button>Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>stack</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                {links.map((link) => (
+                    <Link key={link.href} href={link.href}>
+                        <DropdownMenuItem>{link.name}</DropdownMenuItem>
+                    </Link>
+                ))}
+            </DropdownMenuGroup>
+        </DropdownMenuContent>
+        </DropdownMenu>
+    </div>
+  );
+}
--- a/src/components/app/NavBar/NavBar.tsx
+++ b/src/components/app/NavBar/NavBar.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/igzEEdGqAvH
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { logout } from "@/lib/auth/actions"
+import { useSession } from "@/lib/providers/SessionProvider"
+import Link from "next/link"
+import { useState } from "react"
+import { useFormState } from "react-dom"
+import MobileNavbarLinks from "../MobileNavbarLinks/MobileNavbarLinks"
+import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"
+
+export const links = [
+  { href: '/', name: 'Home' },
+  { href: 'https://github.com/SrIzan10/stack', name: 'Github' },
+  { href: '/protected', name: 'Protected route' }
+]
+
+function NavbarLinks() {
+  return (
+    <>
+      {links.map((link) => (
+        <Link key={link.href} href={link.href}>
+          <Button variant={'link'}>{link.name}</Button>
+        </Link>
+      ))}
+    </>
+  );
+}
+
+export default function Navbar() {
+  const { user } = useSession();
+  const [, logoutAction] = useFormState(logout, null)
+  return (
+    <>
+      <nav className="flex items-center h-16 px-4 border-b gap-3 shrink-0">
+        <Link href="/" className="hidden md:flex">
+          <Button>stack</Button>
+        </Link>
+        <MobileNavbarLinks />
+        <div className="hidden md:flex">
+          <NavbarLinks />
+        </div>
+        <div className="flex-1" />
+        <ThemeSwitcher />
+        {user ? (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild className="cursor-pointer">
+                <Avatar>
+                  <AvatarImage src={"https://srizan.dev/pfp.webp"} alt="@srizan" />
+                  <AvatarFallback>SI</AvatarFallback>
+                </Avatar>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem className="cursor-pointer" onClick={() => {
+                    logoutAction()
+                  }}>
+                    Sign out
+                  </DropdownMenuItem>
+                  </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        ) : (
+          <Link href="/auth/signIn">
+            <Button variant="outline">Sign in</Button>
+          </Link>
+        )}
+      </nav>
+    </>
+  );
+}
--- a/src/components/app/SubmitButton/SubmitButton.tsx
+++ b/src/components/app/SubmitButton/SubmitButton.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { Button, ButtonProps, buttonVariants } from "@/components/ui/button"
+import { VariantProps } from "class-variance-authority"
+import { useFormStatus } from "react-dom"
+
+export default function SubmitButton(props: Props) {
+    const { pending } = useFormStatus()
+    return (
+        <Button type="submit" loading={pending} {...props}>
+            {props.buttonText}
+        </Button>
+    )
+}
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    buttonText: string;
+}
--- a/src/components/app/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/src/components/app/ThemeSwitcher/ThemeSwitcher.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeSwitcher() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { LoaderCircle } from "lucide-react"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        defaultOutlineHover:
+          "border border-input bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        disabled={loading}
+        ref={ref}
+        {...props}
+      >
+        {loading && <LoaderCircle className={cn('h-4 w-4 animate-spin', props.children && 'mr-2')} />}
+        {props.children}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/src/lib/auth/actions.ts
+++ b/src/lib/auth/actions.ts
@@ -0,0 +1,125 @@
+"use server"
+
+import { cookies } from "next/headers";
+import { lucia, validateRequest } from ".";
+import { redirect } from "next/navigation";
+import prisma from "../db";
+import { Argon2id } from "oslo/password";
+import { generateId } from "lucia";
+
+export async function logout() {
+    const { session } = await validateRequest();
+	await lucia.invalidateSession(session!.id);
+	const sessionCookie = lucia.createBlankSessionCookie();
+	cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+	return redirect("/auth/signIn");
+}
+
+export async function login(prev: any, data: FormData) {
+	const username = data.get("username");
+	if (
+		typeof username !== "string" ||
+		username.length < 3 ||
+		username.length > 31 ||
+		!/^[a-z0-9_-]+$/.test(username)
+	) {
+		return {
+			error: "Invalid username",
+			success: false,
+		};
+	}
+	const password = data.get("password");
+	if (typeof password !== "string" || password.length < 6 || password.length > 255) {
+		return {
+			error: "Invalid password",
+			success: false,
+		};
+	}
+
+	const existingUser = await prisma.user.findUnique({
+        where: {
+            username: username
+        }
+    })
+	if (!existingUser) {
+		// NOTE:
+		// Returning immediately allows malicious actors to figure out valid usernames from response times,
+		// allowing them to only focus on guessing passwords in brute-force attacks.
+		// As a preventive measure, you may want to hash passwords even for invalid usernames.
+		// However, valid usernames can be already be revealed with the signup page among other methods.
+		// It will also be much more resource intensive.
+		// Since protecting against this is non-trivial,
+		// it is crucial your implementation is protected against brute-force attacks with login throttling etc.
+		// If usernames are public, you may outright tell the user that the username is invalid.
+		return {
+			error: "Incorrect username or password",
+			success: false,
+		};
+	}
+
+	const validPassword = await new Argon2id().verify(existingUser.hashed_password, password);
+	if (!validPassword) {
+		return {
+			error: "Incorrect username or password",
+			success: false,
+		};
+	}
+
+	const session = await lucia.createSession(existingUser.id, {});
+	const sessionCookie = lucia.createSessionCookie(session.id);
+	cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+	return redirect("/");
+}
+
+export async function signup(prev: any, formData: FormData): Promise<ActionResult> {
+	"use server";
+	const username = formData.get("username");
+    console.log(username)
+	// username must be between 4 ~ 31 characters, and only consists of lowercase letters, 0-9, -, and _
+	// keep in mind some database (e.g. mysql) are case insensitive
+	if (
+		typeof username !== "string" ||
+		username.length < 3 ||
+		username.length > 31 ||
+		!/^[a-z0-9_-]+$/.test(username)
+	) {
+		return {
+			error: "Invalid username",
+			success: false,
+		};
+	}
+	if (await prisma.user.findUnique({ where: { username: username } })) {
+		return {
+			error: "Username is already taken",
+			success: false,
+		};
+	}
+	const password = formData.get("password");
+	if (typeof password !== "string" || password.length < 6 || password.length > 255) {
+		return {
+			error: "Invalid password",
+			success: false,
+		};
+	}
+
+	const hashedPassword = await new Argon2id().hash(password);
+	const userId = generateId(15);
+
+	await prisma.user.create({
+        data: {
+            id: userId,
+            username: username,
+            hashed_password: hashedPassword
+	    }
+    });
+
+	const session = await lucia.createSession(userId, {});
+	const sessionCookie = lucia.createSessionCookie(session.id);
+	cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+	return redirect("/");
+}
+
+interface ActionResult {
+    error: string | null;
+    success: boolean | null;
+}
--- a/src/lib/auth/index.ts
+++ b/src/lib/auth/index.ts
@@ -0,0 +1,71 @@
+import { PrismaAdapter } from "@lucia-auth/adapter-prisma";
+import { Lucia, Session, User } from "lucia";
+import prisma from "../db";
+import { cache } from "react";
+import { cookies } from "next/headers";
+
+const adapter = new PrismaAdapter(prisma.session, prisma.user);
+
+export const lucia = new Lucia(adapter, {
+	sessionCookie: {
+		// this sets cookies with super long expiration
+		// since Next.js doesn't allow Lucia to extend cookie expiration when rendering pages
+		expires: false,
+		attributes: {
+			// set to `true` when using HTTPS
+			secure: process.env.NODE_ENV === "production"
+		}
+	},
+	getUserAttributes: (attributes) => {
+		return {
+			username: attributes.username
+		};
+	}
+});
+export const validateRequest = cache(async () => {
+	const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null
+  
+	if (!sessionId)
+	  return {
+		user: null,
+		session: null,
+	  }
+  
+	const { user, session } = await lucia.validateSession(sessionId)
+	try {
+	  if (session && session.fresh) {
+		const sessionCookie = lucia.createSessionCookie(session.id)
+		cookies().set(
+		  sessionCookie.name,
+		  sessionCookie.value,
+		  sessionCookie.attributes
+		)
+	  }
+	  if (!session) {
+		const sessionCookie = lucia.createBlankSessionCookie()
+		cookies().set(
+		  sessionCookie.name,
+		  sessionCookie.value,
+		  sessionCookie.attributes
+		)
+	  }
+	} catch {
+	  // Next.js throws error attempting to set cookies when rendering page
+	}
+	return {
+	  user,
+	  session,
+	}
+  })  
+
+
+declare module "lucia" {
+	interface Register {
+		Lucia: typeof lucia;
+		DatabaseUserAttributes: DatabaseUserAttributes;
+	}
+}
+
+interface DatabaseUserAttributes {
+	username: string;
+}
--- a/src/lib/db/index.ts
+++ b/src/lib/db/index.ts
@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+  return new PrismaClient()
+}
+
+declare global {
+  var prismaGlobal: undefined | ReturnType<typeof prismaClientSingleton>
+}
+
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
+
+export default prisma
+
+if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma
--- a/src/lib/providers/SessionProvider.tsx
+++ b/src/lib/providers/SessionProvider.tsx
@@ -0,0 +1,36 @@
+// source: https://github.com/ugurkellecioglu/next-14-lucia-auth-postgresql-drizzle-typescript-example/blob/lucia-client-side/providers/Session.provider.tsx
+
+"use client"
+import { Session, User } from "lucia"
+import { createContext, useContext } from "react"
+
+interface SessionProviderProps {
+  user: User | null
+  session: Session | null
+}
+
+const SessionContext = createContext<SessionProviderProps>(
+  {} as SessionProviderProps
+)
+
+export const SessionProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode
+  value: SessionProviderProps
+}) => {
+  return (
+    <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
+  )
+}
+
+export const useSession = () => {
+  const sessionContext = useContext(SessionContext)
+
+  if (!sessionContext) {
+    throw new Error("useSession must be used within a SessionProvider")
+  }
+
+  return sessionContext
+}
--- a/src/lib/providers/ThemeProvider.tsx
+++ b/src/lib/providers/ThemeProvider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,80 @@
+import type { Config } from "tailwindcss"
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>