Created a Database Supabase, Created a responsive Navbar design, Crea…

…ted a authentication pages such as login and signup, added google auth
Priyanshu9898 · Dec 23, 2024 · 3192e01 · 3192e01
1 parent c4690fc
commit 3192e01
Show file tree

Hide file tree

Showing 8 changed files with 408 additions and 3 deletions.
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex w-full h-[90vh] flex-1 items-center justify-center mt-[-20px]">
+      {children}
+    </div>
+  );
+};
+
+export default AuthLayout;
diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}
diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Inter } from "next/font/google";
+import { ClerkProvider } from "@clerk/nextjs";
+import Navbar from "@/components/Navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,8 +17,23 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${inter.className}`}>{children}</body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body className={`${inter.className}`}>
+          <main className="container min-h-screen">
+            <Navbar />
+            <div className="mt-20">{children}</div>
+          </main>
+
+          {/* {"Footer is here"} */}
+          <div className="footer section mx-auto bg-gray-600">
+            <footer className="py-4 text-center font-bold text-blue-50">
+              <p>© 2025 Wealth Manager </p>
+              <p>Made with 💗 by Priyanshu Malaviya </p>
+            </footer>
+          </div>
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { SignedIn, SignInButton, SignedOut, UserButton } from "@clerk/nextjs";
+import { Button } from "./ui/button";
+import Link from "next/link";
+import { LayoutDashboard, PenBox } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <>
+      <div className="container mx-auto px-2 md:px-10 z-50 fixed top-0 bg-white/80 backdrop-blur-md border-b">
+        <nav className="container flex justify-between items-center py-4 ">
+          {/* Logo here */}
+          <Link href="/">
+            <div className="text-2xl xl:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sky-500 to-blue-600">
+              Wealth Manager
+            </div>
+          </Link>
+
+          {/* Nav items here */}
+          <div>
+            <SignedIn>
+              <div className="w-full flex items-center justify-between gap-x-4">
+                <Link href="/transaction/create">
+                  <Button type="button">
+                    <PenBox className="" />
+                    <span className="hidden md:flex">Add Transaction</span>
+                  </Button>
+                </Link>
+
+                <Link href="/dashboard">
+                  <Button
+                    type="button"
+                    variant={"outline"}
+                    className="text-gray-600 hover:text-blue-600"
+                  >
+                    <LayoutDashboard className="" />
+                    <span className="hidden md:flex">Dashboard</span>
+                  </Button>
+                </Link>
+
+                <UserButton
+                  appearance={{
+                    elements: {
+                      avatarBox: "h-10 w-10",
+                    },
+                  }}
+                />
+              </div>
+            </SignedIn>
+            <SignedOut>
+              <SignInButton forceRedirectUrl={"/dashboard"}>
+                <Button type="button" variant={"outline"}>
+                  Login
+                </Button>
+              </SignInButton>
+            </SignedOut>
+          </div>
+        </nav>
+      </div>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,28 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isProtected = createRouteMatcher([
+  "/dashboard(.*)",
+  "/account(.*)",
+  "/transaction(.*)",
+]);
+
+export default clerkMiddleware(async (auth, req) => {
+  const { userId } = await auth();
+
+  if (!userId && isProtected(req)) {
+    const { redirectToSignIn } = await auth();
+
+    return redirectToSignIn();
+  }
+
+  return null;
+});
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes
+    "/(api|trpc)(.*)",
+  ],
+};