feat: landing page with latest projects car.

.husky/pre-commit

@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-cd core && npm run format && npm run build
-cd "../docker-builder "npm run format && npm run build
-cd "../proxy-server" && npm run format
+cd core && pnpm run format && pnpm run build
+cd "../docker-builder "pnpm run format && pnpm run build
+cd "../proxy-server" && pnpm run format
 cd .. && git add .

Makefile

@@ -17,7 +17,7 @@ pm2Logs:
 	pm2 logs deployt-docker-orch
 
 startPm2:
-	cd docker-orch && pm2 start npm --name "deployt-docker-orch" -- start
+	cd docker-orch && pm2 start pnpm --name "deployt-docker-orch" -- start
 
 start:
 	make delPm2 && \

core/Dockerfile

@@ -1,19 +1,21 @@
-FROM node:18-alpine
+FROM node:22-alpine
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN npm ci
+RUN npm install -g pnpm
+
+RUN pnpm install
 
 COPY prisma ./prisma
 
-RUN npx prisma generate
+RUN pnpm dlx prisma generate
 
 COPY . .
 
-RUN npm run build
+RUN pnpm run build
 
 EXPOSE 3000
 
-CMD ["npm", "start"]
+CMD ["pnpm", "start"]

core/actions/db/project.ts

@@ -3,6 +3,63 @@
 import { prisma } from "@/db";
 import { getServerSession } from "next-auth";
 import { getUserIdByEmail } from "./user";
+import { PROJECT_STATUS } from "@/types/project";
+import { NEXT_PUBLIC_WEB_SERVER } from "@/lib/envVars";
+import { getEvent, publishEvent } from "@/lib/redis";
+
+export async function getPublicProjects() {
+  const res = await getEvent("public_projects");
+  console.log(res);
+  if (res) {
+    const publicProjects = JSON.parse(res) as {
+      name: string;
+      createdAt: Date;
+      url: string;
+    }[];
+    console.log("Using cached public projects");
+    return publicProjects.map((project) => ({
+      ...project,
+      createdAt: new Date(project.createdAt),
+    }));
+  }
+
+  console.log("Fetching public projects");
+  const projects = await prisma.project.findMany({
+    where: {
+      private: false,
+      is_deleted: false,
+      showOnHome: true,
+      status: PROJECT_STATUS.BUILD_SUCCESS,
+    },
+    select: {
+      name: true,
+      createdAt: true,
+      slug: true,
+    },
+    take: 5,
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+  const publicProjects = projects.map((project) => ({
+    name: project.name,
+    createdAt: project.createdAt,
+    url: project.slug + "." + NEXT_PUBLIC_WEB_SERVER,
+  }));
+
+  try {
+    await publishEvent(
+      "public_projects",
+      JSON.stringify(publicProjects),
+      60 * 60,
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    console.log(error);
+  }
+
+  return publicProjects;
+}
 
 export async function getProjectStatus(projectId: string) {
   try {

core/actions/db/user.ts

@@ -43,6 +43,7 @@ export async function getProjects() {
       updatedAt: true,
       slug: true,
       status: true,
+      showOnHome: true,
     },
   });
 
@@ -73,6 +74,7 @@ export async function getProjectDetails(projectId: string) {
       private: true,
       views: true,
       status: true,
+      showOnHome: true,
     },
   });
   if (!project) return null;
@@ -104,6 +106,7 @@ export async function updateProject(
     name: string;
     slug: string;
     private: boolean;
+    showOnHome: boolean;
   },
 ) {
   const session = await getServerSession();
@@ -121,6 +124,7 @@ export async function updateProject(
       name: values.name,
       slug: values.slug,
       private: values.private,
+      showOnHome: values.showOnHome,
     },
   });
 

core/actions/gh/delete.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { prisma } from "@/db";
-import redis from "@/lib/redis";
+import { leftPushEvent } from "@/lib/redis";
 import { PROJECT_STATUS } from "@/types/project";
 import { getServerSession } from "next-auth";
 
@@ -40,14 +40,7 @@ export async function deleteProject(projectId: string) {
     };
   }
 
-  if (!redis) {
-    return {
-      success: false,
-      message: "Project not deleted",
-    };
-  }
-
-  await redis.lpush(
+  await leftPushEvent(
     "project_queue",
     JSON.stringify({
       projectId,

core/actions/gh/import.ts

@@ -4,8 +4,8 @@ import { ImportProjectType, PROJECT_STATUS } from "@/types/project";
 import { prisma } from "@/db";
 import { getServerSession } from "next-auth";
 import { generateSlug } from "@/lib/project";
-import redis from "@/lib/redis";
 import { getAccessTokenByEmail } from "@/db/user";
+import { leftPushEvent } from "@/lib/redis";
 
 export async function importProject(importProject: ImportProjectType) {
   const session = await getServerSession();
@@ -61,12 +61,8 @@ export async function importProject(importProject: ImportProjectType) {
     }),
   );
 
-  if (redis) {
-    console.log({
-      ...importProject,
-      GITHUB_TOKEN: accessToken,
-    });
-    await redis.lpush(
+  try {
+    await leftPushEvent(
       "project_queue",
       JSON.stringify({
         ...importProject,
@@ -85,10 +81,24 @@ export async function importProject(importProject: ImportProjectType) {
         status: PROJECT_STATUS.BUILD_IN_QUEUE,
       },
     });
+    return {
+      success: true,
+      id: newProject.id,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (err: any) {
+    console.log(err);
+    await prisma.project.update({
+      where: {
+        id: newProject.id,
+      },
+      data: {
+        status: PROJECT_STATUS.BUILD_FAILED,
+      },
+    });
+    return {
+      success: false,
+      message: "Failed to import project",
+    };
   }
-
-  return {
-    success: true,
-    id: newProject.id,
-  };
 }

core/app/dashboard/page.tsx

@@ -8,7 +8,7 @@ export default async function Dashboard() {
   const session = await getServerSession();
   if (!session)
     return (
-      <div className="flex h-screen w-screen items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
         <ProtectRouteUI />
       </div>
     );
@@ -20,7 +20,7 @@ export default async function Dashboard() {
   } catch (e: any) {
     if (e.message === "User not found") {
       return (
-        <div className="flex h-screen w-screen items-center justify-center">
+        <div className="flex h-full w-full items-center justify-center">
           <ProtectRouteUI />
         </div>
       );

core/app/import/page.tsx

@@ -35,7 +35,7 @@ export default function Import() {
 
   if (!repoOwner || !repoName) {
     return (
-      <div className="flex h-screen flex-col items-center justify-center bg-background text-foreground">
+      <div className="flex h-full flex-col items-center justify-center overflow-y-auto bg-background text-foreground">
         <Alert variant="destructive" className="max-w-[300px]">
           <AlertCircle className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>

core/app/layout.tsx

@@ -6,8 +6,32 @@ import AppWrapper from "../providers/app-wrapper";
 import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Deployit",
+  description: "A deploy tool for React developers!",
+  keywords: ["React", "Next.js", "Deploy", "Deployment", "Devpulkit.in"],
+  authors: [{ name: "Pulkit", url: "https://devpulkit.in" }],
+  openGraph: {
+    title: "Deployit",
+    description: "A deploy tool for React developers!",
+    url: "https://deploy.live",
+    siteName: "Deployit",
+    images: [
+      {
+        url: "https://deployit.live/icon.png",
+        width: 800,
+        height: 600,
+        alt: "Deployit",
+      },
+    ],
+    locale: "in_IN",
+    type: "website",
+  },
+  twitter: {
+    site: "@devpulkitt",
+    title: "Deployit",
+    description: "A brief description of your app.",
+    images: ["https://deployit.live/icon.png"],
+  },
 };
 
 export default function RootLayout({
@@ -17,10 +41,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body>
+      <body className="flex h-screen flex-col overflow-hidden">
         <AppWrapper>
           <Navbar />
-          {children}
+          <div className="h-full w-full overflow-y-auto">{children}</div>
           <Toaster />
         </AppWrapper>
       </body>

core/app/new/page.tsx

@@ -2,10 +2,10 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { useSession } from "next-auth/react";
-import { getRepos } from "@/actions/gh/repos";
 import { Repo } from "@/types/gh";
 import ProtectClientRoute from "@/components/ProtectRoute/ProtectClientRoute";
 import Onboarding from "@/components/OnBoarding";
+import { getRepos } from "@/actions/gh/repos";
 
 export default function New() {
   const { data: session } = useSession();
@@ -35,7 +35,7 @@ export default function New() {
   if (protectRoute) return protectRoute;
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
+    <div className="flex h-full w-full items-center justify-center overflow-y-auto">
       <Onboarding
         repos={repos}
         loading={loading}

core/app/page.tsx

@@ -1,5 +1,8 @@
-import { redirect } from "next/navigation";
+import { getPublicProjects } from "@/actions/db/project";
+import LandingPage from "@/components/LandingPage";
 
-export default async function Page() {
-  return redirect("/dashboard");
+export default async function page() {
+  const publicProjects = await getPublicProjects();
+
+  return <LandingPage publicProjects={publicProjects} />;
 }

core/app/project/[projectId]/layout.tsx

@@ -21,11 +21,10 @@ export default async function ProjectDetailsLayout({
   }
 
   return (
-    <div className="container mx-auto mt-20 p-6">
+    <div className="mx-auto h-full p-6 py-10 pb-40">
       <header className="mb-8">
         <h1 className="mb-4 text-3xl font-bold">Project Details</h1>
         <ProjectTabs projectId={params.projectId} />{" "}
-        {/* Use the client component */}
       </header>
       {children}
     </div>

core/components/Dashboard/Project.tsx

@@ -20,6 +20,7 @@ import { NEXT_PUBLIC_WEB_SERVER } from "@/lib/envVars";
 import { Input } from "../ui/input";
 import { useToast } from "@/hooks/use-toast";
 import ProjectStatus from "@/components/ProjectDetails/ProjectStatus";
+import HomeIcon from "@/components/ProjectDetails/HomeIcon";
 
 export function Project({
   project,
@@ -30,7 +31,7 @@ export function Project({
 }) {
   const { toast } = useToast();
 
-  const projectUrl = `https://${project.slug}.${NEXT_PUBLIC_WEB_SERVER}`;
+  const projectUrl = `${project.slug}.${NEXT_PUBLIC_WEB_SERVER}`;
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
     toast({
@@ -51,6 +52,7 @@ export function Project({
             {project.name}
           </CardTitle>
           <ProjectStatus id={project.id} />
+          {project.showOnHome && <HomeIcon />}
         </div>
         <div className="flex space-x-2">
           <TooltipProvider>

core/components/Dashboard/Projects.tsx

@@ -49,7 +49,7 @@ export default function DashboardClient({
   };
 
   return (
-    <div className="mt-14 flex h-full w-full flex-col overflow-hidden p-4 sm:p-6 md:p-8">
+    <div className="flex flex-col p-4 sm:p-6 md:p-10">
       <div className="mb-8 flex flex-col space-y-4 md:flex-row md:items-center md:space-x-4 md:space-y-0">
         <div className="relative flex-grow">
           <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 transform text-muted-foreground" />