From 0b83077e792531697123a4364a133347d3b7f20c Mon Sep 17 00:00:00 2001
From: Arjuna <arjunaragilputera@gmail.com>
Date: Tue, 3 Feb 2026 22:13:39 +0700
Subject: [PATCH 1/3] feat: create project logic

---
 Internal/adapters/repository/postgres.go    |  1 +
 Internal/adapters/repository/projectRepo.go | 20 +++++++++
 Internal/api/Routes/routev1.go              |  2 +
 Internal/api/handlers/projectHandler.go     | 47 +++++++++++++++++++++
 Internal/api/handlers/userHandler.go        | 16 +++----
 Internal/api/middleware/auth.go             |  1 +
 Internal/core/domain/projectdb.go           | 11 +++++
 Internal/core/services/projectService.go    | 33 +++++++++++++++
 cmd/server/main.go                          |  5 +++
 9 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 Internal/adapters/repository/projectRepo.go
 create mode 100644 Internal/api/handlers/projectHandler.go
 create mode 100644 Internal/core/domain/projectdb.go
 create mode 100644 Internal/core/services/projectService.go

diff --git a/Internal/adapters/repository/postgres.go b/Internal/adapters/repository/postgres.go
index e1974f5..cbf2b20 100644
--- a/Internal/adapters/repository/postgres.go
+++ b/Internal/adapters/repository/postgres.go
@@ -41,6 +41,7 @@ func (db *DBContainer) Migrate() error {
 	err := db.Gorm.AutoMigrate(
 		&domain.User{},
 		&domain.Invitation{},
+		&domain.Project{},
 	)
 	if err != nil {
 		log.Fatalf("Failed to migrate users: %v", err)
diff --git a/Internal/adapters/repository/projectRepo.go b/Internal/adapters/repository/projectRepo.go
new file mode 100644
index 0000000..7794ad9
--- /dev/null
+++ b/Internal/adapters/repository/projectRepo.go
@@ -0,0 +1,20 @@
+package repository
+
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+)
+
+type ProjectRepo struct {
+	DB *DBContainer
+}
+
+func NewProjectRepo(db *DBContainer) *ProjectRepo {
+	return &ProjectRepo{DB: db}
+}
+
+func (pr *ProjectRepo) CreateProject(project *domain.Project) (*domain.Project, error) {
+	if err := pr.DB.Gorm.Create(project).Error; err != nil {
+		return nil, err
+	}
+	return project, nil
+}
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
index 2a50cb8..3c33d41 100644
--- a/Internal/api/Routes/routev1.go
+++ b/Internal/api/Routes/routev1.go
@@ -12,6 +12,7 @@ type Deps struct {
 	User     *handlers.UserHandler
 	Auth     *handlers.AuthHandler
 	System   *handlers.SystemHandler
+	Project  *handlers.ProjectHandler
 	UserRepo *repository.UserRepository
 	Config   *config.Config
 }
@@ -45,6 +46,7 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 				admin.POST("/invite", deps.Auth.CreateInviteHandler)
 				admin.GET("/alluser", deps.User.AllUserHandler)
 				admin.PUT("/updaterole", deps.User.UpdateRoleHandler)
+				admin.POST("/createproject", deps.Project.CreateProjectHandler)
 			}
 		}
 	}
diff --git a/Internal/api/handlers/projectHandler.go b/Internal/api/handlers/projectHandler.go
new file mode 100644
index 0000000..d415c60
--- /dev/null
+++ b/Internal/api/handlers/projectHandler.go
@@ -0,0 +1,47 @@
+package handlers
+
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/services"
+	"github.com/gin-gonic/gin"
+)
+
+type ProjectHandler struct {
+	ProjectService *services.ProjectService
+}
+
+func NewProjectHandler(projectService *services.ProjectService) *ProjectHandler {
+	return &ProjectHandler{ProjectService: projectService}
+}
+
+func (ph *ProjectHandler) CreateProjectHandler(c *gin.Context) {
+	var input services.CreateInput
+	//userRole, _ := c.Get("userRole")
+	//if userRole != "admin" {
+	//	c.JSON(401, gin.H{
+	//		"message": "You are not authorized to perform this action",
+	//		"data":    nil,
+	//	})
+	//	return
+	//}
+	err := c.ShouldBindJSON(&input)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid input",
+			"data":    err.Error(),
+		})
+		return
+	}
+
+	project, err := ph.ProjectService.CreateProject(&input)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to create project",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "successfully created project",
+		"data":    project,
+	})
+}
diff --git a/Internal/api/handlers/userHandler.go b/Internal/api/handlers/userHandler.go
index 26fb067..679ebf8 100644
--- a/Internal/api/handlers/userHandler.go
+++ b/Internal/api/handlers/userHandler.go
@@ -60,14 +60,14 @@ func (uh *UserHandler) AllUserHandler(c *gin.Context) {
 
 func (uh *UserHandler) UpdateRoleHandler(c *gin.Context) {
 	var input services.RoleInput
-	//userRole, _ := c.Get("userRole")
-	//if userRole != "admin" {
-	//	c.JSON(400, gin.H{
-	//		"message": "Not allowed to update role",
-	//		"data":    false,
-	//	})
-	//	return
-	//}
+	userRole, _ := c.Get("userRole")
+	if userRole != "admin" {
+		c.JSON(400, gin.H{
+			"message": "Not allowed to update role",
+			"data":    false,
+		})
+		return
+	}
 	if err := c.ShouldBindJSON(&input); err != nil {
 		c.JSON(400, gin.H{
 			"message": "input not valid",
diff --git a/Internal/api/middleware/auth.go b/Internal/api/middleware/auth.go
index d9a6038..c987b22 100644
--- a/Internal/api/middleware/auth.go
+++ b/Internal/api/middleware/auth.go
@@ -15,6 +15,7 @@ func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin
 	return func(c *gin.Context) {
 		if cfg.AuthMode == "false" {
 			c.Set("userID", 1)
+			c.Set("userRole", "admin")
 			c.Next()
 			return
 		}
diff --git a/Internal/core/domain/projectdb.go b/Internal/core/domain/projectdb.go
new file mode 100644
index 0000000..031512a
--- /dev/null
+++ b/Internal/core/domain/projectdb.go
@@ -0,0 +1,11 @@
+package domain
+
+import "time"
+
+type Project struct {
+	ID        uint      `gorm:"primary_key;auto_increment" json:"id"`
+	Name      string    `gorm:"size:255;not null" json:"name"`
+	Desc      string    `gorm:"size:255;" json:"desc"`
+	AdminID   uint      `json:"admin_id"`
+	CreatedAt time.Time `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
+}
diff --git a/Internal/core/services/projectService.go b/Internal/core/services/projectService.go
new file mode 100644
index 0000000..c5b07b7
--- /dev/null
+++ b/Internal/core/services/projectService.go
@@ -0,0 +1,33 @@
+package services
+
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/adapters/repository"
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+)
+
+type ProjectService struct {
+	ProjectRepo *repository.ProjectRepo
+}
+
+func NewProjectService(projectRepo *repository.ProjectRepo) *ProjectService {
+	return &ProjectService{ProjectRepo: projectRepo}
+}
+
+type CreateInput struct {
+	Name    string `json:"name"`
+	Desc    string `json:"desc"`
+	AdminID uint   `json:"admin_id"`
+}
+
+func (ps *ProjectService) CreateProject(input *CreateInput) (*domain.Project, error) {
+	projectInfo := domain.Project{
+		Name:    input.Name,
+		Desc:    input.Desc,
+		AdminID: input.AdminID,
+	}
+	project, err := ps.ProjectRepo.CreateProject(&projectInfo)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
diff --git a/cmd/server/main.go b/cmd/server/main.go
index e5025f8..c8ad29d 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -60,10 +60,15 @@ func SetupApp(db *repository.DBContainer, cfg *config.Config) Routes.Deps {
 	authService := services.NewAuthService(authRepo, systemRepo)
 	authHandler := handlers.NewAuthHandler(authService)
 
+	projectRepo := repository.NewProjectRepo(db)
+	projectService := services.NewProjectService(projectRepo)
+	projectHandler := handlers.NewProjectHandler(projectService)
+
 	return Routes.Deps{
 		User:     userHandler,
 		Auth:     authHandler,
 		System:   systemHandler,
+		Project:  projectHandler,
 		UserRepo: userRepo,
 		Config:   cfg,
 	}

From 760ba90e4d92b55fbbecb45841f75c6896518d93 Mon Sep 17 00:00:00 2001
From: Arjuna <arjunaragilputera@gmail.com>
Date: Wed, 4 Feb 2026 14:28:24 +0700
Subject: [PATCH 2/3] feat: creating project from fe logic implemented

---
 Internal/api/handlers/projectHandler.go       |  16 +--
 Lb-web/src/components/ui/textarea.tsx         |  24 ++++
 .../features/Login/context/AuthContext.tsx    |  14 ++-
 .../project/components/CreateProjectModal.tsx | 109 ++++++++++++++++++
 .../project/services/projectService.ts        |  23 ++++
 Lb-web/src/pages/Home.tsx                     |  37 +++++-
 6 files changed, 208 insertions(+), 15 deletions(-)
 create mode 100644 Lb-web/src/components/ui/textarea.tsx
 create mode 100644 Lb-web/src/features/project/components/CreateProjectModal.tsx
 create mode 100644 Lb-web/src/features/project/services/projectService.ts

diff --git a/Internal/api/handlers/projectHandler.go b/Internal/api/handlers/projectHandler.go
index d415c60..72a3cbd 100644
--- a/Internal/api/handlers/projectHandler.go
+++ b/Internal/api/handlers/projectHandler.go
@@ -15,14 +15,14 @@ func NewProjectHandler(projectService *services.ProjectService) *ProjectHandler
 
 func (ph *ProjectHandler) CreateProjectHandler(c *gin.Context) {
 	var input services.CreateInput
-	//userRole, _ := c.Get("userRole")
-	//if userRole != "admin" {
-	//	c.JSON(401, gin.H{
-	//		"message": "You are not authorized to perform this action",
-	//		"data":    nil,
-	//	})
-	//	return
-	//}
+	userRole, _ := c.Get("userRole")
+	if userRole != "admin" {
+		c.JSON(401, gin.H{
+			"message": "You are not authorized to perform this action",
+			"data":    nil,
+		})
+		return
+	}
 	err := c.ShouldBindJSON(&input)
 	if err != nil {
 		c.JSON(400, gin.H{
diff --git a/Lb-web/src/components/ui/textarea.tsx b/Lb-web/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..87c2072
--- /dev/null
+++ b/Lb-web/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/Lb-web/src/features/Login/context/AuthContext.tsx b/Lb-web/src/features/Login/context/AuthContext.tsx
index f083f77..cc84aca 100644
--- a/Lb-web/src/features/Login/context/AuthContext.tsx
+++ b/Lb-web/src/features/Login/context/AuthContext.tsx
@@ -1,8 +1,16 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 import api from "@/services/api";
 
+interface User {
+    id: number;
+    username: string;
+    email: string;
+    role: string;
+}
+
 interface AuthContextType {
     isAuthenticated: boolean | null;
+    user: User | null;
     role: string | null;
     loading: boolean;
     login: () => void; // call this after successful login to update state
@@ -13,6 +21,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
     const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+    const [user, setUser] = useState<User | null>(null);
     const [role, setRole] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
 
@@ -20,9 +29,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         try {
             const response = await api.get('/protected/user/me');
             setIsAuthenticated(true);
+            setUser(response.data.data);
             setRole(response.data.data.role);
         } catch {
             setIsAuthenticated(false);
+            setUser(null);
             setRole(null);
         } finally {
             setLoading(false);
@@ -45,12 +56,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             console.error("Logout failed", error);
         } finally {
             setIsAuthenticated(false);
+            setUser(null);
             setRole(null);
         }
     };
 
     return (
-        <AuthContext.Provider value={{ isAuthenticated, role, loading, login, logout }}>
+        <AuthContext.Provider value={{ isAuthenticated, user, role, loading, login, logout }}>
             {children}
         </AuthContext.Provider>
     );
diff --git a/Lb-web/src/features/project/components/CreateProjectModal.tsx b/Lb-web/src/features/project/components/CreateProjectModal.tsx
new file mode 100644
index 0000000..87ecd94
--- /dev/null
+++ b/Lb-web/src/features/project/components/CreateProjectModal.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useAuth } from "@/features/Login/context/AuthContext";
+import { projectService } from "@/features/project/services/projectService";
+import { Loader2 } from "lucide-react";
+
+interface CreateProjectModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+}
+
+export function CreateProjectModal({ isOpen, onClose, onSuccess }: CreateProjectModalProps) {
+    const { user } = useAuth();
+    const [name, setName] = useState("");
+    const [desc, setDesc] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        if (!user) {
+            setError("User not found");
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            await projectService.createProject({
+                name,
+                desc,
+                admin_id: user.id
+            });
+            onSuccess();
+            onClose();
+            // Reset form
+            setName("");
+            setDesc("");
+        } catch (err: any) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            setError((err as any).response?.data?.message || "Failed to create project");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Create New Project</DialogTitle>
+                    <DialogDescription>
+                        Enter the details for your new project. Click create when you're done.
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={handleSubmit}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="name" className="text-right">
+                                Name
+                            </Label>
+                            <Input
+                                id="name"
+                                value={name}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                                className="col-span-3"
+                                placeholder="My Awesome Project"
+                                required
+                            />
+                        </div>
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="desc" className="text-right">
+                                Description
+                            </Label>
+                            <Textarea
+                                id="desc"
+                                value={desc}
+                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDesc(e.target.value)}
+                                className="col-span-3"
+                                placeholder="A brief description..."
+                            />
+                        </div>
+                        {error && (
+                            <div className="text-red-500 text-sm text-center">
+                                {error}
+                            </div>
+                        )}
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={isLoading}>
+                            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            Create Project
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/Lb-web/src/features/project/services/projectService.ts b/Lb-web/src/features/project/services/projectService.ts
new file mode 100644
index 0000000..1d48aa1
--- /dev/null
+++ b/Lb-web/src/features/project/services/projectService.ts
@@ -0,0 +1,23 @@
+import api from "@/services/api";
+
+interface CreateProjectInput {
+    name: string;
+    desc: string;
+    admin_id: number;
+}
+
+interface Project {
+    id: number;
+    name: string;
+    desc: string;
+    admin_id: number;
+    created_at: string;
+    updated_at: string;
+}
+
+export const projectService = {
+    createProject: async (data: CreateProjectInput): Promise<Project> => {
+        const response = await api.post('/protected/admin/createproject', data);
+        return response.data.data;
+    }
+};
diff --git a/Lb-web/src/pages/Home.tsx b/Lb-web/src/pages/Home.tsx
index a6d446c..d3e1856 100644
--- a/Lb-web/src/pages/Home.tsx
+++ b/Lb-web/src/pages/Home.tsx
@@ -3,15 +3,25 @@ import { User, Settings, Plus, LogOut } from "lucide-react";
 import { Link } from "react-router";
 import { useState } from "react";
 import { useAuth } from "@/features/Login/context/AuthContext";
+import { CreateProjectModal } from "@/features/project/components/CreateProjectModal";
 
 export default function Home() {
-    const { logout } = useAuth();
+    const { logout, role } = useAuth();
     const [isProfileOpen, setIsProfileOpen] = useState(false);
 
+    const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(false);
+
+    const isAdmin = role === 'admin';
+
     const handleLogout = async () => {
         await logout();
     };
 
+    const handleCreateSuccess = () => {
+        // Optionally refresh project list or show success message
+        console.log("Project created!");
+    };
+
     return (
         <div className="flex flex-col h-screen bg-slate-50 relative overflow-hidden">
             {/* Subtle Grid & Gradient Background */}
@@ -76,14 +86,29 @@ export default function Home() {
                             <Plus className="h-8 w-8 text-sky-600" />
                         </div>
                         <h2 className="text-2xl font-semibold text-sky-900 mb-2">There is no Project yet</h2>
-                        <p className="text-sky-600 mb-6">Create your first project to get started with Localbase.</p>
-                        <Button className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg">
-                            <Plus className="mr-2 h-4 w-4" />
-                            Create now
-                        </Button>
+                        <p className="text-sky-600 mb-6">
+                            {isAdmin
+                                ? "Create your first project to get started with Localbase."
+                                : "Please wait for admin to invite you."}
+                        </p>
+                        {isAdmin && (
+                            <Button
+                                className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
+                                onClick={() => setIsCreateProjectOpen(true)}
+                            >
+                                <Plus className="mr-2 h-4 w-4" />
+                                Create now
+                            </Button>
+                        )}
                     </div>
                 </div>
             </main>
+
+            <CreateProjectModal
+                isOpen={isCreateProjectOpen}
+                onClose={() => setIsCreateProjectOpen(false)}
+                onSuccess={handleCreateSuccess}
+            />
         </div>
     );
 }

From 2f5936525052d487f6c286b4446d20b110c09a22 Mon Sep 17 00:00:00 2001
From: Arjuna <arjunaragilputera@gmail.com>
Date: Wed, 4 Feb 2026 17:46:23 +0700
Subject: [PATCH 3/3] feat: fetch and display all projects for admin

---
 Internal/adapters/repository/projectRepo.go   |   7 ++
 Internal/api/Routes/routev1.go                |   4 +
 Internal/api/handlers/projectHandler.go       |  16 +++
 Internal/api/middleware/auth.go               |   2 +-
 Internal/core/services/projectService.go      |  14 +++
 .../project/services/projectService.ts        |   4 +
 Lb-web/src/pages/Home.tsx                     | 100 ++++++++++++++----
 7 files changed, 127 insertions(+), 20 deletions(-)

diff --git a/Internal/adapters/repository/projectRepo.go b/Internal/adapters/repository/projectRepo.go
index 7794ad9..a06199f 100644
--- a/Internal/adapters/repository/projectRepo.go
+++ b/Internal/adapters/repository/projectRepo.go
@@ -18,3 +18,10 @@ func (pr *ProjectRepo) CreateProject(project *domain.Project) (*domain.Project,
 	}
 	return project, nil
 }
+
+func (pr *ProjectRepo) FetchProjects(projects []domain.Project) ([]domain.Project, error) {
+	if err := pr.DB.Gorm.Find(&projects).Error; err != nil {
+		return nil, err
+	}
+	return projects, nil
+}
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
index 3c33d41..1fc52f9 100644
--- a/Internal/api/Routes/routev1.go
+++ b/Internal/api/Routes/routev1.go
@@ -48,6 +48,10 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 				admin.PUT("/updaterole", deps.User.UpdateRoleHandler)
 				admin.POST("/createproject", deps.Project.CreateProjectHandler)
 			}
+			project := protected.Group("/project")
+			{
+				project.GET("/projects", deps.Project.GetAllProjectHandler)
+			}
 		}
 	}
 }
diff --git a/Internal/api/handlers/projectHandler.go b/Internal/api/handlers/projectHandler.go
index 72a3cbd..d4d37ec 100644
--- a/Internal/api/handlers/projectHandler.go
+++ b/Internal/api/handlers/projectHandler.go
@@ -45,3 +45,19 @@ func (ph *ProjectHandler) CreateProjectHandler(c *gin.Context) {
 		"data":    project,
 	})
 }
+
+func (ph *ProjectHandler) GetAllProjectHandler(c *gin.Context) {
+	userRole := c.GetString("userRole")
+	projects, err := ph.ProjectService.GetProjects(userRole)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to get projects",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "got all projects",
+		"data":    projects,
+	})
+}
diff --git a/Internal/api/middleware/auth.go b/Internal/api/middleware/auth.go
index c987b22..6fb6683 100644
--- a/Internal/api/middleware/auth.go
+++ b/Internal/api/middleware/auth.go
@@ -14,7 +14,7 @@ import (
 func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		if cfg.AuthMode == "false" {
-			c.Set("userID", 1)
+			c.Set("userID", uint(1))
 			c.Set("userRole", "admin")
 			c.Next()
 			return
diff --git a/Internal/core/services/projectService.go b/Internal/core/services/projectService.go
index c5b07b7..b9ce760 100644
--- a/Internal/core/services/projectService.go
+++ b/Internal/core/services/projectService.go
@@ -1,6 +1,8 @@
 package services
 
 import (
+	"errors"
+
 	"github.com/Arjuna-Ragil/Localbase/Internal/adapters/repository"
 	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
 )
@@ -31,3 +33,15 @@ func (ps *ProjectService) CreateProject(input *CreateInput) (*domain.Project, er
 	}
 	return project, nil
 }
+
+func (ps *ProjectService) GetProjects(Role string) ([]domain.Project, error) {
+	if Role != "admin" {
+		return nil, errors.New("permission denied")
+	}
+	var projects []domain.Project
+	project, err := ps.ProjectRepo.FetchProjects(projects)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
diff --git a/Lb-web/src/features/project/services/projectService.ts b/Lb-web/src/features/project/services/projectService.ts
index 1d48aa1..c5e8613 100644
--- a/Lb-web/src/features/project/services/projectService.ts
+++ b/Lb-web/src/features/project/services/projectService.ts
@@ -19,5 +19,9 @@ export const projectService = {
     createProject: async (data: CreateProjectInput): Promise<Project> => {
         const response = await api.post('/protected/admin/createproject', data);
         return response.data.data;
+    },
+    getProjects: async (): Promise<Project[]> => {
+        const response = await api.get('/protected/project/projects');
+        return response.data.data;
     }
 };
diff --git a/Lb-web/src/pages/Home.tsx b/Lb-web/src/pages/Home.tsx
index d3e1856..8e5e840 100644
--- a/Lb-web/src/pages/Home.tsx
+++ b/Lb-web/src/pages/Home.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { User, Settings, Plus, LogOut } from "lucide-react";
 import { Link } from "react-router";
-import { useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useAuth } from "@/features/Login/context/AuthContext";
 import { CreateProjectModal } from "@/features/project/components/CreateProjectModal";
+import { projectService } from "@/features/project/services/projectService";
 
 export default function Home() {
     const { logout, role } = useAuth();
@@ -11,14 +12,36 @@ export default function Home() {
 
     const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(false);
 
+    const [projects, setProjects] = useState<{ id: number; name: string; desc: string; created_at: string }[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
     const isAdmin = role === 'admin';
 
+    const fetchProjects = useCallback(async () => {
+        if (!isAdmin) return;
+        setIsLoading(true);
+        try {
+            const data = await projectService.getProjects();
+            setProjects(data);
+        } catch (error) {
+            console.error("Failed to fetch projects", error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [isAdmin]);
+
+    useEffect(() => {
+        if (isAdmin) {
+            fetchProjects();
+        }
+    }, [isAdmin, fetchProjects]);
+
     const handleLogout = async () => {
         await logout();
     };
 
     const handleCreateSuccess = () => {
-        // Optionally refresh project list or show success message
+        fetchProjects();
         console.log("Project created!");
     };
 
@@ -79,29 +102,68 @@ export default function Home() {
             </header>
 
             {/* Main Content */}
-            <main className="flex-1 flex flex-col items-center justify-center p-6 z-10">
-                <div className="text-center space-y-6 max-w-md">
-                    <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100">
-                        <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <Plus className="h-8 w-8 text-sky-600" />
-                        </div>
-                        <h2 className="text-2xl font-semibold text-sky-900 mb-2">There is no Project yet</h2>
-                        <p className="text-sky-600 mb-6">
-                            {isAdmin
-                                ? "Create your first project to get started with Localbase."
-                                : "Please wait for admin to invite you."}
-                        </p>
-                        {isAdmin && (
+            <main className="flex-1 flex flex-col p-6 z-10 overflow-y-auto">
+                {isLoading ? (
+                    <div className="flex-1 flex flex-col items-center justify-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-600"></div>
+                    </div>
+                ) : isAdmin && projects.length > 0 ? (
+                    <div className="max-w-7xl mx-auto w-full">
+                        <div className="flex justify-between items-center mb-8">
+                            <h2 className="text-3xl font-bold text-sky-900">Your Projects</h2>
                             <Button
-                                className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
+                                className="bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
                                 onClick={() => setIsCreateProjectOpen(true)}
                             >
                                 <Plus className="mr-2 h-4 w-4" />
-                                Create now
+                                New Project
                             </Button>
-                        )}
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {projects.map((project: { id: number; name: string; desc: string; created_at: string }) => (
+                                <div key={project.id} className="bg-white/60 backdrop-blur-sm p-6 rounded-2xl shadow-sm border border-sky-100 hover:shadow-md transition-all cursor-pointer group">
+                                    <div className="h-12 w-12 bg-sky-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
+                                        <div className="text-sky-600 font-bold text-xl">
+                                            {project.name.charAt(0).toUpperCase()}
+                                        </div>
+                                    </div>
+                                    <h3 className="text-xl font-semibold text-sky-900 mb-2 truncate">{project.name}</h3>
+                                    <p className="text-sky-600/80 mb-4 line-clamp-2 h-12 text-sm">
+                                        {project.desc || "No description provided."}
+                                    </p>
+                                    <div className="text-xs text-sky-400 font-medium">
+                                        Created {new Date(project.created_at).toLocaleDateString()}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
                     </div>
-                </div>
+                ) : (
+                    <div className="flex-1 flex flex-col items-center justify-center">
+                        <div className="text-center space-y-6 max-w-md">
+                            <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100">
+                                <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <Plus className="h-8 w-8 text-sky-600" />
+                                </div>
+                                <h2 className="text-2xl font-semibold text-sky-900 mb-2">There is no Project yet</h2>
+                                <p className="text-sky-600 mb-6">
+                                    {isAdmin
+                                        ? "Create your first project to get started with Localbase."
+                                        : "Please wait for admin to invite you."}
+                                </p>
+                                {isAdmin && (
+                                    <Button
+                                        className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
+                                        onClick={() => setIsCreateProjectOpen(true)}
+                                    >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Create now
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
             </main>
 
             <CreateProjectModal