Code-A2Z · Copilot · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025
diff --git a/SETUP.md b/SETUP.md
@@ -56,12 +56,12 @@ Open two terminals:
 
 Backend:
 ```bash
-npm run server
+npm run backend
 ```
 
 Frontend:
 ```bash
-npm run dev
+npm run frontend
 ```
 
 ---
@@ -99,7 +99,7 @@ You do not need to set `MONGODB_URL` or run the backend.
 
 #### 4. Start the frontend
 ```bash
-npm run dev
+npm run frontend
 ```
 
 Your app will connect directly to the deployed backend.

diff --git a/frontend/.env.example → client/.env.example b/frontend/.env.example → client/.env.example
diff --git a/frontend/.vercelignore → client/.vercelignore b/frontend/.vercelignore → client/.vercelignore
diff --git a/frontend/eslint.config.js → client/eslint.config.js b/frontend/eslint.config.js → client/eslint.config.js
diff --git a/frontend/index.html → client/index.html b/frontend/index.html → client/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
+  <script type="module" src="/src/main.tsx"></script>
 </body>
 
 </html>
diff --git a/frontend/package-lock.json → client/package-lock.json b/frontend/package-lock.json → client/package-lock.json
diff --git a/frontend/package.json → client/package.json b/frontend/package.json → client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "client",
   "author": "Avdhesh Varshney",
   "license": "ISC",
   "description": "Code A2Z is a collaborative blogging platform for developers and writers to create, manage, and share projects with markdown support, customizable templates, and community contributions.",
@@ -16,7 +16,8 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc --noEmit && vite build",
+    "type-check": "tsc --noEmit",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -56,6 +57,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "typescript": "^5.9.2",
     "vite": "^6.2.0"
   }
 }
diff --git a/frontend/public/404.png → client/public/404.png b/frontend/public/404.png → client/public/404.png
diff --git a/frontend/public/full-logo.png → client/public/full-logo.png b/frontend/public/full-logo.png → client/public/full-logo.png
diff --git a/frontend/public/logo.png → client/public/logo.png b/frontend/public/logo.png → client/public/logo.png
diff --git a/frontend/public/vite.svg → client/public/vite.svg b/frontend/public/vite.svg → client/public/vite.svg
diff --git a/frontend/src/App.jsx → client/src/App.tsx b/frontend/src/App.jsx → client/src/App.tsx
@@ -1,7 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import UserAuthForm from "./pages/UserAuthForm";
-import { createContext, useEffect, useState } from "react";
+import { createContext, useEffect, useState, ReactNode } from "react";
 import { lookInSession } from "./common/session";
 import Editor from "./pages/Editor";
 import Home from "./pages/Home";
@@ -15,11 +15,28 @@ import EditProfile from "./pages/EditProfile";
 import Notifications from "./pages/Notifications";
 import ManageProjects from "./pages/ManageProjects";
 
-export const UserContext = createContext({});
+interface UserAuth {
+  access_token?: string | null;
+  username?: string;
+  profile_img?: string;
+  fullname?: string;
+  email?: string;
+  [key: string]: any;
+}
+
+interface UserContextType {
+  userAuth: UserAuth;
+  setUserAuth: (auth: UserAuth) => void;
+}
+
+export const UserContext = createContext<UserContextType>({
+  userAuth: { access_token: null },
+  setUserAuth: () => {}
+});
 
 function App() {
 
-  const [userAuth, setUserAuth] = useState({});
+  const [userAuth, setUserAuth] = useState<UserAuth>({ access_token: null });
 
   useEffect(() => {
     let userInSession = lookInSession("user");

diff --git a/frontend/src/assets/react.svg → client/src/assets/react.svg b/frontend/src/assets/react.svg → client/src/assets/react.svg
diff --git a/frontend/src/common/cloudinary.jsx → client/src/common/cloudinary.tsx b/frontend/src/common/cloudinary.jsx → client/src/common/cloudinary.tsx
diff --git a/frontend/src/common/date.jsx → client/src/common/date.tsx b/frontend/src/common/date.jsx → client/src/common/date.tsx
diff --git a/...end/src/common/filter-pagination-data.jsx → client/src/common/filter-pagination-data.tsx b/...end/src/common/filter-pagination-data.jsx → client/src/common/filter-pagination-data.tsx
@@ -1,10 +1,18 @@
 import axios from "axios";
 
-export const filterPaginationData = async ({ create_new_arr = false, state, data, page, countRoute, data_to_send = {}, user = undefined }) => {
+export const filterPaginationData = async ({ create_new_arr = false, state, data, page, countRoute, data_to_send = {}, user = undefined }: {
+    create_new_arr?: boolean;
+    state: any;
+    data: any;
+    page: number;
+    countRoute: string;
+    data_to_send?: any;
+    user?: string;
+}) => {
 
-    let obj;
+    let obj: any;
 
-    let headers = {};
+    let headers: { headers?: { Authorization: string } } = {};
 
     if (user) {
         headers.headers = {

diff --git a/client/src/common/page-animation.tsx b/client/src/common/page-animation.tsx
@@ -0,0 +1,29 @@
+import { AnimatePresence, motion } from "framer-motion";
+import React, { ReactNode } from "react";
+
+interface AnimationWrapperProps {
+    children: ReactNode;
+    keyValue?: any;
+    initial?: { opacity: number };
+    animate?: { opacity: number };
+    transition?: { duration?: number; delay?: number };
+    className?: any;
+}
+
+const AnimationWrapper = ({ children, keyValue = "", initial = { opacity: 0 }, animate = { opacity: 1 }, transition = { duration: 1 }, className = "" }: AnimationWrapperProps) => {
+    return (
+        <AnimatePresence>
+            <motion.div
+                key={keyValue}
+                initial={initial}
+                animate={animate}
+                transition={transition}
+                className={className}
+            >
+                {children}
+            </motion.div>
+        </AnimatePresence>
+    )
+}
+
+export default AnimationWrapper;
diff --git a/frontend/src/common/session.jsx → client/src/common/session.tsx b/frontend/src/common/session.jsx → client/src/common/session.tsx
diff --git a/frontend/src/components/AboutUser.jsx → client/src/components/AboutUser.tsx b/frontend/src/components/AboutUser.jsx → client/src/components/AboutUser.tsx
diff --git a/frontend/src/components/CommentCard.jsx → client/src/components/CommentCard.tsx b/frontend/src/components/CommentCard.jsx → client/src/components/CommentCard.tsx
@@ -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: project_author } } }, setProject, setTotalParentCommentsLoaded } = useContext(ProjectContext);
+    let { project, project: { comments, comments: { results: commentsArr }, activity, activity: { total_parent_comments }, author: { personal_info: { username: project_author } } }, setProject, totalParentCommentsLoaded, setTotalParentCommentsLoaded } = useContext(ProjectContext);
 
     let { userAuth: { access_token, username } } = useContext(UserContext);
 
@@ -55,7 +55,7 @@ const CommentCard = ({ index, leftVal, commentData }) => {
         }
 
         if (commentData.childrenLevel === 0 && isDelete) {
-            setTotalParentCommentsLoaded(preVal => preVal - 1);
+            setTotalParentCommentsLoaded(totalParentCommentsLoaded - 1);
         }
 
         setProject({ ...project, comments: { results: commentsArr }, activity: { ...activity, total_parent_comments: total_parent_comments - (commentData.childrenLevel === 0 && isDelete ? 1 : 0) } });
@@ -165,7 +165,7 @@ const CommentCard = ({ index, leftVal, commentData }) => {
                                 <i className="fi fi-rs-comment-dots"></i> Hide Reply
                             </button> :
                             <button
-                                onClick={loadReplies}
+                                onClick={() => loadReplies({ skip: 0, currentIndex: index })}
                                 className="text-[#555] dark:text-gray-300 p-2 px-3 hover:bg-[#f3f3f3] dark:hover:bg-[#1e1e1e] rounded-md flex items-center gap-2"
                             >
                                 <i className="fi fi-rs-comment-dots"></i> {children.length} Reply

diff --git a/frontend/src/components/CommentField.jsx → client/src/components/CommentField.tsx b/frontend/src/components/CommentField.jsx → client/src/components/CommentField.tsx
@@ -51,7 +51,7 @@ const CommentField = ({ action, index = undefined, replyingTo = undefined, setRe
 
                 setProject({ ...project, comments: { ...comments, results: newCommentArr }, activity: { ...activity, total_comments: total_comments + 1, total_parent_comments: total_parent_comments + parentCommentIncrementval } })
 
-                setTotalParentCommentsLoaded(preVal => preVal + parentCommentIncrementval);
+                setTotalParentCommentsLoaded(totalParentCommentsLoaded + parentCommentIncrementval);
             })
             .catch(err => {
                 console.log(err);

diff --git a/frontend/src/components/Comments.jsx → client/src/components/Comments.tsx b/frontend/src/components/Comments.jsx → client/src/components/Comments.tsx
@@ -55,7 +55,7 @@ const CommentsContainer = () => {
                 <p className="text-lg mt-2 w-[70%] text-gray-500 line-clamp-1">{title}</p>
 
                 <button
-                    onClick={() => setCommentsWrapper(preVal => !preVal)}
+                    onClick={() => setCommentsWrapper(!commentsWrapper)}
                     className="absolute top-0 right-0 flex justify-center items-center w-12 h-12 rounded-full bg-gray-100 dark:bg-[#09090b]"
                 >
                     <i className="fi fi-br-cross text-2xl mt-1"></i>
@@ -64,7 +64,7 @@ const CommentsContainer = () => {
 
             <hr className="border-gray-100 my-8 w-[120%] -ml-10" />
 
-            <CommentField action="comment" />
+            <CommentField action="comment" setReplying={() => {}} />
 
             {
                 commentsArr && commentsArr.length ?

diff --git a/frontend/src/components/InPageNavigation.jsx → client/src/components/InPageNavigation.tsx b/frontend/src/components/InPageNavigation.jsx → client/src/components/InPageNavigation.tsx
@@ -5,8 +5,8 @@ export let activeTabRef;
 
 const InPageNavigation = ({ routes, defaultHidden = [], defaultActiveIndex = 0, children }) => {
 
-    activeTabLineRef = useRef();
-    activeTabRef = useRef();
+    activeTabLineRef = useRef<HTMLElement>(null);
+    activeTabRef = useRef<HTMLElement>(null);
 
     let [inPageNavIndex, setInPageNavIndex] = useState(defaultActiveIndex);
 

diff --git a/frontend/src/components/InputBox.jsx → client/src/components/InputBox.tsx b/frontend/src/components/InputBox.jsx → client/src/components/InputBox.tsx
@@ -1,6 +1,16 @@
 import { useState } from "react";
 
-const InputBox = ({ name, type, id, value, placeholder, icon, disable = false }) => {
+interface InputBoxProps {
+    name: any;
+    type: any;
+    id: any;
+    value: any;
+    placeholder: any;
+    icon: any;
+    disable?: boolean;
+}
+
+const InputBox = ({ name, type, id, value, placeholder, icon, disable = false }: InputBoxProps) => {
 
     const [passwordVisible, setPasswordVisible] = useState(false);
 

diff --git a/frontend/src/components/LoadMoreData.jsx → client/src/components/LoadMoreData.tsx b/frontend/src/components/LoadMoreData.jsx → client/src/components/LoadMoreData.tsx
diff --git a/frontend/src/components/Loader.jsx → client/src/components/Loader.tsx b/frontend/src/components/Loader.jsx → client/src/components/Loader.tsx
diff --git a/...tend/src/components/ManageProjectCard.jsx → client/src/components/ManageProjectCard.tsx b/...tend/src/components/ManageProjectCard.jsx → client/src/components/ManageProjectCard.tsx
diff --git a/frontend/src/components/Navbar.jsx → client/src/components/Navbar.tsx b/frontend/src/components/Navbar.jsx → client/src/components/Navbar.tsx
diff --git a/...nd/src/components/NoBannerProjectPost.jsx → ...nt/src/components/NoBannerProjectPost.tsx b/...nd/src/components/NoBannerProjectPost.jsx → ...nt/src/components/NoBannerProjectPost.tsx
diff --git a/frontend/src/components/NoData.jsx → client/src/components/NoData.tsx b/frontend/src/components/NoData.jsx → client/src/components/NoData.tsx
diff --git a/frontend/src/components/NotificationCard.jsx → client/src/components/NotificationCard.tsx b/frontend/src/components/NotificationCard.jsx → client/src/components/NotificationCard.tsx
diff --git a/...c/components/NotificationCommentField.jsx → ...c/components/NotificationCommentField.tsx b/...c/components/NotificationCommentField.jsx → ...c/components/NotificationCommentField.tsx
diff --git a/frontend/src/components/ProjectContent.jsx → client/src/components/ProjectContent.tsx b/frontend/src/components/ProjectContent.jsx → client/src/components/ProjectContent.tsx
diff --git a/frontend/src/components/ProjectEditor.jsx → client/src/components/ProjectEditor.tsx b/frontend/src/components/ProjectEditor.jsx → client/src/components/ProjectEditor.tsx
@@ -27,7 +27,7 @@ const ProjectEditor = () => {
             setTextEditor(new EditorJS({
                 holder: "textEditor",
                 data: Array.isArray(content) ? content[0] : content,
-                tools: tools,
+                tools: tools as any,
                 placeholder: "Let's write an awesome story"
             }));
         }

diff --git a/...end/src/components/ProjectInteraction.jsx → client/src/components/ProjectInteraction.tsx b/...end/src/components/ProjectInteraction.jsx → client/src/components/ProjectInteraction.tsx
@@ -29,7 +29,7 @@ const ProjectInteraction = () => {
 
     const handleLike = () => {
         if (access_token) {
-            setLikedByUser(preVal => !preVal);
+             setLikedByUser(!islikedByUser);
             !islikedByUser ? total_likes++ : total_likes--;
             setProject({ ...project, activity: { ...activity, total_likes } });
 
@@ -71,7 +71,7 @@ const ProjectInteraction = () => {
                     <p className="text-xl text-gray-700 dark:text-gray-300">{total_likes}</p>
 
                     <button
-                        onClick={() => setCommentsWrapper(preVal => !preVal)}
+                        onClick={() => setCommentsWrapper(!commentsWrapper)}
                         className="w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-200 bg-gray-100 text-gray-600 dark:bg-[#27272a] dark:text-gray-300"
                     >
                         <i className="fi fi-rr-comment-dots"></i>

diff --git a/frontend/src/components/ProjectPostCard.jsx → client/src/components/ProjectPostCard.tsx b/frontend/src/components/ProjectPostCard.jsx → client/src/components/ProjectPostCard.tsx
diff --git a/frontend/src/components/PublishForm.jsx → client/src/components/PublishForm.tsx b/frontend/src/components/PublishForm.jsx → client/src/components/PublishForm.tsx
diff --git a/frontend/src/components/SideNavBar.jsx → client/src/components/SideNavBar.tsx b/frontend/src/components/SideNavBar.jsx → client/src/components/SideNavBar.tsx
@@ -11,16 +11,18 @@ const SideNav = () => {
     let [pageState, setPageState] = useState(page.replace('-', ' '));
     let [showSideNav, setShowSideNav] = useState(false);
 
-    let activeTabLine = useRef();
-    let sideBarIconTab = useRef();
-    let pageStateTab = useRef();
+    let activeTabLine = useRef<HTMLHRElement>(null);
+    let sideBarIconTab = useRef<HTMLButtonElement>(null);
+    let pageStateTab = useRef<HTMLButtonElement>(null);
 
     const changePageState = (e) => {
 
         let { offsetWidth, offsetLeft } = e.target;
 
-        activeTabLine.current.style.width = offsetWidth + "px";
-        activeTabLine.current.style.left = offsetLeft + "px";
+        if (activeTabLine.current) {
+            activeTabLine.current.style.width = offsetWidth + "px";
+            activeTabLine.current.style.left = offsetLeft + "px";
+        }
 
         if (e.target === sideBarIconTab.current) {
             setShowSideNav(true);
@@ -31,7 +33,9 @@ const SideNav = () => {
 
     useEffect(() => {
         setShowSideNav(false);
-        pageStateTab.current.click();
+        if (pageStateTab.current) {
+            pageStateTab.current.click();
+        }
     }, [pageState]);
 
     return (
@@ -70,15 +74,15 @@ const SideNav = () => {
 
                             <NavLink
                                 to="/dashboard/projects"
-                                onClick={(e) => setPageState(e.target.innerText)}
+                                onClick={(e) => setPageState((e.target as HTMLElement).innerText)}
                                 className="sidebar-link"
                             >
                                 <i className="fi fi-rr-document"></i>
                                 Projects
                             </NavLink>
                             <NavLink
                                 to="/dashboard/notifications"
-                                onClick={(e) => setPageState(e.target.innerText)}
+                                onClick={(e) => setPageState((e.target as HTMLElement).innerText)}
                                 className="sidebar-link"
                             >
                                 <div className="relative">
@@ -93,7 +97,7 @@ const SideNav = () => {
                             </NavLink>
                             <NavLink
                                 to="/editor"
-                                onClick={(e) => setPageState(e.target.innerText)}
+                                onClick={(e) => setPageState((e.target as HTMLElement).innerText)}
                                 className="sidebar-link"
                             >
                                 <i className="fi fi-rr-file-edit"></i>
@@ -105,15 +109,15 @@ const SideNav = () => {
 
                             <NavLink
                                 to="/settings/edit-profile"
-                                onClick={(e) => setPageState(e.target.innerText)}
+                                onClick={(e) => setPageState((e.target as HTMLElement).innerText)}
                                 className="sidebar-link"
                             >
                                 <i className="fi fi-rr-user"></i>
                                 Edit Profile
                             </NavLink>
                             <NavLink
                                 to="/settings/change-password"
-                                onClick={(e) => setPageState(e.target.innerText)}
+                                onClick={(e) => setPageState((e.target as HTMLElement).innerText)}
                                 className="sidebar-link"
                             >
                                 <i className="fi fi-rr-lock"></i>