Build a Finance SaaS Platform -1 ( Initial )

2024-08-21

Word count: 642 | Reading time≈ 4 min

Create New NEXTJS Project

1	npx create-next-app@latest finance-demo

Install shadcn-ui

1	npx shadcn-ui@latest init

Install Button

Follow instruction of shadcn doc

1	npx shadcn-ui@latest add button

Register Clerk

1	npm install @clerk/nextjs

follow instruction of Clerk to setup

Setup .env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
CLERK_SECRET_KEY=...

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Change home page

change page.tsx to app/(dashboard):

export default function Home() {
  return (
    <p>
      this is an authenticated route
    </p>
  );
}

Change Layout:

change app/layout.tsx:

import type { Metadata } from "next";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";

export const metadata: Metadata = {
  title: "Finance Demo",
  description: "Finance Dashboard",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

Add app/(auth)/sign-in/[[...sign-in]]/page.tsx:

import Image from "next/image";
import { Loader2 } from "lucide-react";
import { SignIn, ClerkLoaded,ClerkLoading } from "@clerk/nextjs";

export default function Page() {
  return(
    <div className="min-h-screen grid grid-cols-1 lg:grid-cols-2">
      <div className="h-full lg:flex flex-col items-center justify-center px-4">
        <div className="text-center space-y-4 pt-16">
          <h1 className="font-bold text-3xl text-[#2E2A47]">
            Welcome Back!
          </h1>
          <p className="text-base text-[#7E8CA0]">
            Log in or Create account to get back to your dashboad!
          </p>
        </div>
        <div className="flex items-center justify-center mt-8">
          <ClerkLoaded>
            <SignIn path="/sign-in" />
          </ClerkLoaded>
          <ClerkLoading>
            <Loader2 className="animate-spin text-muted-foreground" />
          </ClerkLoading>
        </div>
      </div>
      <div className="h-full bg-blue-600 hidden lg:flex items-center justify-center">
        <Image src="/vim-logo.svg" height={100} width={100} alt="Logo" />
      </div>
    </div>
  )
}

Add app/(auth)/sign-up/[[...sign-up]]/page.tsx

import Image from "next/image";
import { Loader2 } from "lucide-react";
import { SignUp, ClerkLoaded,ClerkLoading } from "@clerk/nextjs";

export default function Page() {
  return(
    <div className="min-h-screen grid grid-cols-1 lg:grid-cols-2">
      <div className="h-full lg:flex flex-col items-center justify-center px-4">
        <div className="text-center space-y-4 pt-16">
          <h1 className="font-bold text-3xl text-[#2E2A47]">
            Welcome Back!
          </h1>
          <p className="text-base text-[#7E8CA0]">
            Log in or Create account to get back to your dashboad!
          </p>
        </div>
        <div className="flex items-center justify-center mt-8">
          <ClerkLoaded>
            <SignUp path="/sign-up" />
          </ClerkLoaded>
          <ClerkLoading>
            <Loader2 className="animate-spin text-muted-foreground" />
          </ClerkLoading>
        </div>
      </div>
      <div className="h-full bg-blue-600 hidden lg:flex items-center justify-center">
        <Image src="/vim-logo.svg" height={100} width={100} alt="Logo" />
      </div>
    </div>
  )
}