Feat: Project management system (#1132)

Avdhesh-Varshney · web-flow · commit e5eb42545965 · 2025-03-20T12:53:26.000+05:30
* create /user-written projects route

* setup: manage projects dashboard

* create /get-written-count of projects

* integrate: frontend to fetch contributor projects

* render all published projects with stats

* render all drafted projects

* create /delete project route

* typo fixes

* functional delete btn

* setup projects-pagination system

* setup user redirection on projects

* debug: update repo &amp; live urls
diff --git a/backend/Controllers/project.controller.js b/backend/Controllers/project.controller.js
@@ -39,7 +39,7 @@ export const createProject = async (req, res) => {
     let project_id = id || title.replace(/[^a-zA-Z0-9]/g, ' ').replace(/\s+/g, '-').trim() + nanoid();
 
     if (id) {
-        Project.findOneAndUpdate({ project_id }, { title, des, banner, content, tags, draft: draft ? draft : false })
+        Project.findOneAndUpdate({ project_id }, { title, des, banner, projectUrl, repository, content, tags, draft: draft ? draft : false })
             .then(project => {
                 return res.status(200).json({ id: project_id });
             })
@@ -203,4 +203,73 @@ export const getProject = async (req, res) => {
         .catch(err => {
             return res.status(500).json({ error: err.message });
         })
+}
+
+export const userWrittenProjects = async (req, res) => {
+
+    let user_id = req.user;
+
+    let { page, draft, query, deletedDocCount } = req.body;
+
+    let maxLimit = 5;
+    let skipDocs = (page - 1) * maxLimit;
+
+    if (deletedDocCount) {
+        skipDocs -= deletedDocCount;
+    }
+
+    Project.find({ author: user_id, draft, title: new RegExp(query, 'i') })
+        .skip(skipDocs)
+        .limit(maxLimit)
+        .sort({ publishedAt: -1 })
+        .select("title banner publishedAt project_id activity des draft -_id")
+        .then(projects => {
+            return res.status(200).json({ projects });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
+}
+
+export const userWrittenProjectsCount = async (req, res) => {
+
+    let user_id = req.user;
+
+    let { draft, query } = req.body;
+
+    Project.countDocuments({ author: user_id, draft, title: new RegExp(query, 'i') })
+        .then(count => {
+            return res.status(200).json({ totalDocs: count });
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
+}
+
+export const deleteProject = async (req, res) => {
+
+    let user_id = req.user;
+
+    let { project_id } = req.body;
+
+    Project.findOneAndDelete({ project_id })
+        .then(project => {
+
+            Notification.deleteMany({ project: project._id })
+                .then(data => console.log("Nofiication deleted"));
+
+            Comment.deleteMany({ project: project._id })
+                .then(data => console.log("Comments deleted"));
+
+            User.findOneAndUpdate({ _id: user_id }, { $pull: { project: project._id }, $inc: { "account_info.total_posts": -1 } })
+                .then(user => {
+                    return res.status(200).json({ message: "Project deleted successfully" });
+                })
+                .catch(err => {
+                    return res.status(500).json({ error: err.message });
+                })
+        })
+        .catch(err => {
+            return res.status(500).json({ error: err.message });
+        })
 }
diff --git a/backend/Routes/api/project.routes.js b/backend/Routes/api/project.routes.js
@@ -1,5 +1,5 @@
 import express from "express";
-import { allLatestProjectsCount, createProject, getProject, getAllProjects, searchProjects, searchProjectsCount, trendingProjects } from "../../Controllers/project.controller.js";
+import { allLatestProjectsCount, createProject, getProject, getAllProjects, searchProjects, searchProjectsCount, trendingProjects, userWrittenProjects, userWrittenProjectsCount, deleteProject } from "../../Controllers/project.controller.js";
 import { authenticateUser } from "../../Middlewares/auth.middleware.js";
 
 const projectRoutes = express.Router();
@@ -11,5 +11,8 @@ projectRoutes.post("/search", searchProjects);
 projectRoutes.post("/all-latest-count", allLatestProjectsCount);
 projectRoutes.post("/search-count", searchProjectsCount);
 projectRoutes.post("/get", getProject);
+projectRoutes.post("/user-written", authenticateUser, userWrittenProjects);
+projectRoutes.post("/user-written-count", authenticateUser, userWrittenProjectsCount);
+projectRoutes.post("/delete", authenticateUser, deleteProject);
 
 export default projectRoutes;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -13,6 +13,7 @@ import SideNav from "./components/SideNavBar";
 import ChangePassword from "./pages/ChangePassword";
 import EditProfile from "./pages/EditProfile";
 import Notifications from "./pages/Notifications";
+import ManageProjects from "./pages/ManageProjects";
 
 export const UserContext = createContext({});
 
@@ -33,6 +34,7 @@ function App() {
         <Route path="/" element={<Navbar />}>
           <Route index element={<Home />} />
           <Route path="dashboard" element={<SideNav />}>
+            <Route path="projects" element={<ManageProjects />} />
             <Route path="notifications" element={<Notifications />} />
           </Route>
           <Route path="settings" element={<SideNav />}>
diff --git a/frontend/src/components/CommentCard.jsx b/frontend/src/components/CommentCard.jsx
@@ -10,7 +10,7 @@ const CommentCard = ({ index, leftVal, commentData }) => {
 
     let { commented_by: { personal_info: { profile_img, fullname, username: commented_by_username } }, commentedAt, comment, _id, children } = commentData;
 
-    let { project, project: { comments, comments: { results: commentsArr }, activity, activity: { total_parent_comments }, author: { personal_info: { username: blog_author } } }, setProject, setTotalParentCommentsLoaded } = useContext(ProjectContext);
+    let { project, project: { comments, comments: { results: commentsArr }, activity, activity: { total_parent_comments }, author: { personal_info: { username: project_author } } }, setProject, setTotalParentCommentsLoaded } = useContext(ProjectContext);
 
     let { userAuth: { access_token, username } } = useContext(UserContext);
 
@@ -174,7 +174,7 @@ const CommentCard = ({ index, leftVal, commentData }) => {
                     <button className="underline" onClick={handleReplyClick}>Reply</button>
 
                     {
-                        username === commented_by_username || username === blog_author ?
+                        username === commented_by_username || username === project_author ?
                             <button
                                 onClick={deleteComment}
                                 className="p-2 px-3 rounded-md border border-gray-100 ml-auto hover:bg-red-50 hover:text-red-500 flex items-center"
diff --git a/frontend/src/components/ManageProjectCard.jsx b/frontend/src/components/ManageProjectCard.jsx
@@ -0,0 +1,156 @@
+import { Link } from "react-router-dom";
+import { getDay } from "../common/date";
+import { useContext, useState } from "react";
+import { UserContext } from "../App";
+import axios from "axios";
+
+const ProjectStats = ({ stats }) => {
+
+    return (
+        <div className="flex gap-2 max-lg:mb-6 max-lg:pb-6 border-gray-100 max-lg:border-b">
+            {
+                Object.keys(stats).map((key, i) => {
+                    return !key.includes("parent") ? (
+                        <div
+                            key={i}
+                            className={"flex flex-col items-center w-full h-full justify-center p-4 px-6 " + (i !== 0 ? " border-gray-100 border-l" : "")}
+                        >
+                            <h1 className="text-xl lg:text-2xl mb-2">
+                                {stats[key].toLocaleString()}
+                            </h1>
+                            <p className="max-lg:text-gray-500 capitalize">
+                                {key.split("_")[1]}
+                            </p>
+                        </div>
+                    ) : ""
+                })
+            }
+        </div>
+    )
+}
+
+const deleteProject = (project, access_token, target) => {
+
+    let { index, project_id, setStateFunc } = project;
+
+    target.setAttribute("disabled", true);
+
+    axios.post(import.meta.env.VITE_SERVER_DOMAIN + "/api/project/delete", { project_id }, {
+        headers: {
+            Authorization: `Bearer ${access_token}`
+        }
+    })
+        .then(({ data }) => {
+
+            target.removeAttribute("disabled");
+
+            setStateFunc(preVal => {
+                let { deletedDocCount, totalDocs, results } = preVal;
+
+                results.splice(index, 1);
+
+                if (!deletedDocCount) {
+                    deletedDocCount = 0;
+                }
+
+                if (!results.length && totalDocs - 1 > 0) {
+                    return null;
+                }
+
+                return { ...preVal, totalDocs: totalDocs - 1, deletedDocCount: deletedDocCount + 1 };
+            })
+        })
+        .catch(err => {
+            target.removeAttribute("disabled");
+            console.log(err);
+        })
+}
+
+export const ManagePublishedProjectCard = ({ project }) => {
+
+    let { banner, project_id, title, publishedAt, activity } = project;
+
+    let { userAuth: { access_token } } = useContext(UserContext);
+
+    let [showStat, setShowStat] = useState(false);
+
+    return (
+        <>
+            <div className="flex gap-10 border-b mb-6 max-md:px-4 border-gray-100 pb-6 items-center">
+                <img src={banner} alt="" className="max-md:hidden lg:hidden xl:block w-28 h-28 flex-none bg-gray-100 object-cover" />
+
+                <div className="flex flex-col justify-between py-2 w-full min-w-[300px]">
+                    <div>
+                        <Link to={`/project/${project_id}`} className="project-title mb-4 hover:underline">{title}</Link>
+
+                        <p className="line-clamp-1">Published on {getDay(publishedAt)}</p>
+                    </div>
+
+                    <div className="flex gap-6 mt-3">
+                        <Link to={`/editor/${project_id}`} className="pr-4 py-2 underline">Edit</Link>
+
+                        <button
+                            className="lg:hidden pr-4 py-2 underline"
+                            onClick={() => setShowStat(preVal => !preVal)}
+                        >
+                            Stats
+                        </button>
+
+                        <button
+                            className="pr-4 py-2 underline text-red-500"
+                            onClick={(e) => deleteProject(project, access_token, e.target)}
+                        >
+                            Delete
+                        </button>
+
+                    </div>
+                </div>
+
+                <div className="max-lg:hidden">
+                    <ProjectStats stats={activity} />
+                </div>
+            </div>
+
+            {
+                showStat ?
+                    <div className="lg:hidden">
+                        <ProjectStats stats={activity} />
+                    </div>
+                    : ""
+            }
+        </>
+    )
+}
+
+export const ManageDraftProjectPost = ({ project }) => {
+
+    let { title, des, project_id, index } = project;
+
+    let { userAuth: { access_token } } = useContext(UserContext);
+
+    index++;
+
+    return (
+        <div className="flex gap-5 lg:gap-10 pb-6 border-b mb-6 border-gray-100">
+            <h1 className="project-index text-center ph-4 md:pl-6 flex-none">
+                {index < 10 ? "0" + index : index}
+            </h1>
+
+            <div>
+                <h1 className="project-title mb-3">{title}</h1>
+                <p className="line-clamp-2 font-gelasio">{des.length ? des : "No Description"}</p>
+
+                <div className="flex gap-6 mt-3">
+                    <Link to={`/editor/${project_id}`} className="pr-4 py-2 underline">Edit</Link>
+
+                    <button
+                        className="pr-4 py-2 underline text-red-500"
+                        onClick={(e) => deleteProject(project, access_token, e.target)}
+                    >
+                        Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/ProjectEditor.jsx b/frontend/src/components/ProjectEditor.jsx
@@ -139,7 +139,7 @@ const ProjectEditor = () => {
                             toast.success("Project saved successfully");
 
                             setTimeout(() => {
-                                navigate("/");
+                                navigate("/dashboard/projects?tab=draft");
                             }, 500);
                         })
                         .catch(({ response }) => {
diff --git a/frontend/src/components/PublishForm.jsx b/frontend/src/components/PublishForm.jsx
@@ -97,7 +97,7 @@ const PublishForm = () => {
                 toast.success("Project published successfully");
 
                 setTimeout(() => {
-                    navigate("/");
+                    navigate("/dashboard/projects");
                 }, 500);
             })
             .catch(({ response }) => {
diff --git a/frontend/src/components/UserNavigationPanel.jsx b/frontend/src/components/UserNavigationPanel.jsx
@@ -27,7 +27,7 @@ const UserNavigationPanel = () => {
                     Profile
                 </Link>
 
-                <Link to="/dahboard/projects" className="link pl-8 py-4">
+                <Link to="/dashboard/projects" className="link pl-8 py-4">
                     Dashboard
                 </Link>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -113,7 +113,7 @@
     }
 
     .project-index {
-        @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-gray-600 leading-none;
+        @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-gray-300 leading-none;
     }
 }
 
diff --git a/frontend/src/pages/ManageProjects.jsx b/frontend/src/pages/ManageProjects.jsx
diff --git a/frontend/src/pages/UserAuthForm.jsx b/frontend/src/pages/UserAuthForm.jsx

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`.project-index {`
`116`		`- @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-gray-600 leading-none;`
	`116`	`+ @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-gray-300 leading-none;`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`