home page completed for user

.gitignore

@@ -25,5 +25,6 @@ go.work
 
 /client/node_modules/
 /client/.vite/
+/client/tests
 
 

client/jest.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+  };
+

client/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "test": "jest",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -25,6 +26,9 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -33,6 +37,9 @@
     "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "ts-jest": "^29.1.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.0"
   }

client/src/App.tsx

@@ -1,11 +1,19 @@
-import { Outlet } from "react-router-dom";
+import HomePage from "./components/home/HomePage";
+import SideNav from "./components/partials/SideNav";
+import Suggestions from "./components/home/Suggestions";
 
 function App() {
-
   return (
-    <div>
-      Home page
-      <Outlet />
+    <div className='  flex  justify-center w-full'>
+      <div className="w-2/12">
+        <SideNav  />
+      </div>
+      <div className="w-7/12">
+        <HomePage />
+      </div>
+      <div className=" w-3/12 p-5">
+        <Suggestions />
+      </div>
     </div>
   );
 }

client/src/components/home/Avatars.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Avatar } from "@material-tailwind/react";
+
+
+const Avatars: React.FC = () => {
+  return (
+    <div>
+      <Avatar className="mr-3" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABIFBMVEXf3Pv///81O3bxt6QeJFR8fHzd2vviqJj3u6d+fnwAGFDh3v3k4f/o5f8HGlHm4/+Tc3uifoIADU3lr5/o5vwvNXYAAET08/4xOHb6+f7ytaDw7v0AAEH8v6n29f7x8P359PXuvrUcJWwXHlAAFE/ny9UkLG0ADUjYpZkOGmhPUngmLm4WIGkAAD6urc2VlbZ/f6G+vNy6kIw/RHdITHdTVnhdX3k+QWvDweGGhqign8DSz+9mZ4uEaHVkUmnJmpMpLlzj1etTR2TIydbi4umxssaYmMC3uMqWmbPLzNlZXHlmaHomK1pCO15cTWZzXG/qxsk5NVx/gZW+i4RXWo91d6R/gqMAEGgAA2XBmY6hi4VucnpsbpxYXYp/gKuMjLjCK4JgAAAQrElEQVR4nM2deV/aShfHQ6RISUIUAQOI2iQNKBQQ21sQXFr33rbW59I+S2v7/t/FM9kgIdssJ+rvj36syjjfnDPnzB4uk75q25uNRrksSbIoCJwgiLIslcuNxs527RH+Opdm4bXNRlnmckhcmKwfyOXGZqqgaREiODmKLIRULu+khZkGYW2nzGHCeTG5ciMNSnDCbQq6BSZX3oSuECzhZpmebm5LaQe0ToCEmxIz3hwS0JJQhDXknCB4LmQZqk3CEO6IkHgOpADjrQCEwObzMIIYkpmwVk4Hz4GUmBkZCWtSmnw24/YTEqbPZzMy2ZGBMF3/BGOkJ3w0Poux/OiEO4+IZzM2HpWwlkL+S0QU6EIOFeGjOqiHkcpVKQi3nwTPFkV/lZzwiQxoi8KMpIS1J8SzRdoaCQkbT2lAW6RmJCOUnx4QIYpE+Z+E8ClDjE85Ek8lIHwGHuqKJP3jEz5pDF1WToInlJ8aakkCbmPEJHz6JBEUJiIe4fZz8lBXmPEGi3DzOQIiRKypKhzCHWxAQZbENJmWhBVSMQjxs4Q8mr7vS7G/Inj1KIjJhPiAUv9NUXvTC4+69rKhzE1Go4ODXu/gYDTJic6SIgNichcukZAAcLyVRSpOZH+dTTZJnvT6g3fvi9Vqdatlagt91TrbH/QPcpJMT5mMmESIDyj23mQttfqcJIqWG4qm3bjR0WC/VW3pRU3LLkkr6q2t+0GPo26/iY6aQEgQZHK6W2299W6M3BA54xGy2xmyVTGA5sdsVac9UaYzZBJiPCFBmpAHRU+dC8gNTW/U49k8n2gVxzk6xoSkEUtYwwcUclt4KNEqVAc5Kl+NT/1xhASAnNjXWQkRo34k0ZgxF9eBiyMk+SPyO0x3jFd1n86MMYgxhESjCRkE0Iw6BzSjGIGGsEz0FzjmZujqzVF8ryhc0ePFSEKyET0gYXYroeMXquicEUVIEmVMycXkqqeLGBVQowhJ/4C0D9QQTb3pUYSbqIAaQUjc2kGyxVytHEXSEEkIyafVADK+R8UpjZ+Gd8JDCUkboSl5rAMibh1QGDG8KYYSkhdujpE+A7ZEbZ8mZYTDhHyPKBMuEEeQfvpmQtN9C8uKIYS0E2tyrwVHqPdpem+5kPXFEEI6PiRpAJcUtSndFDQOIZ2PIgmTKhhgVntP1RC5YDwNENLEUVvSW8BQky3S2TAYTwOE1OsTYs8xoXZWwh7aR0unnbhJIsSfmFmW9N6m0r40N4bHX1olvRAy9ZS2DYNd8GVCWj5OcE1YaudX8vlmvj1cPz75km2VSjpiJYXVzujaIUKMJ6QOM/Oud/G4uWIrj9Rsrmy0T4fra8d3H89KllkxCd9RN5dyHCF9mBEmTr4vrASUz9uw+Y3T4dpJFrXSZMLCmHoBZGmQ4SekN6E7tiiu5YOIPlazlZ6VkiCLY/olWSmakN6EcyctbcQAzjmb7bWzUvwsMWU+NOXPGD5C+kIFzo4z2sdmMqFF2Tw9iTXkFlXH1JYcRchgQuHAboaF9TgnXWJs31Wj7diiGec78hnRS0hvwnkzLLVxAU012x9LaTREnxE9hAwmnK9aFLBN6NhxWIhwVdqutyVvOPUQ0gfSeaDBboYLxo2v4WZkCTW+cOohZNmOIN1bhMU7Mhuaaq6HR9UiC6HHiAvCBkOBnOR2aMgJUWs8C/PUKtOeh3IIIUt5nGwHmvh8H6X8yp3HU/V7h5BpI0MuSEg/qDAlnTEQIjMOtYLNVdCH6/aXOts+s0aAkK08Z3GNlhCZcU1DY5BSdg21ywJ7pOEW40T3C5ZUwc2zBTWh2ZVrD4ftPBp5OYQs2YLzZH2XkCVVcPOMz0BoQVr/2oQFloxvqrxEyFJWThDEXlUvsBI6nCZhQa8eiYLA4lg5PyHT5sPXr1bqdTQuKoERljby+Xp95dVrhrOb7hYNjtVJhQ8rdadqkIT21/X6a/qcIfkI6U/Qf6jPqwZPiBjpEXNeQvoNpAvAdAhX6h+oCXc8hPTz3K/SJlx5RW1EyUNIWwbH1T1VS4ewTl233IKQPpJ+eATC19SEm3NC+kj6+jEIqZ9/eU5IH5GfNyHnEjL0SZ83oTUO5tgGTs+b0BpCcWy97mdOKDmE9IDPnZCzCVmGhs+c0GyIHNuZn8fIh9TdNrvjxjFOsj3nPg1nZUSOaTKfE76l3vP+xjLnJlqEDAUgeaqWDiFT7XImIeMcVNrjQ4ZWyFmhhmM/PfmqXocntIqs1199YKsd6nxzbIHGlPDh2ytLgIRtq8BvH5gP8DUQIeM8oqmcdYrroAVG2OqJMAcUUa+GYwqlXpnb2qAIt0YAcHatECFQUSgyAxLS7PMOVQ4Rgp1ilu41KEKmtUOfcjWOMVl4JE81qvXDZcK1ovYWkhDuqL08KGonAITHxSLjqoxHuW0O7qy9eKRr96Tr+EE1P2oMW74C2uHgriUTeq1siRlwJV/Mto7gCBscc8Kfy0wX+imzm7ZLdKctIlTmABK+I3PnF3swtZIFw46vZUESWov5Z6wNsflFY13C91cKklDe17IlVjdFTsq8hO+VxAEWZi7maydsRmweF5mX8P2VgiS0FvOrbSYjbpQYN+0tS+AgCzOPBZFvbfOZ8E7LgiYLjgMlHJnbaEtDeiPmT83NUS3AZIEE+LicU5YFjI3QUbL3ewEmCw6U0Nm/p32hNWLzY5F9z15AoIT2LtMiZTxt3tm7oe4Box8H2g7R+MnZKUw1xGje6ey7g8NqBViW2Hd3GH5cIWXM5090Z+vsAJYQ0iPE+SlS7XObzFPz7Xt3G60OmiwEUML50SCEWDomMGM+v7bYCl0Fm4YyJUP2Sxcn9Cxn09ad3YbJfMNsYbFJWAN1UtCeN3LTsaem2ULxuN1sxkLmrRNCWd3zKeBmCEy4fGK9WMrerZ+2o7oAG+3T9bvPS4eDqrA9mjLgGN+U100dyIJeipYecqAENpKWAedpTIlHrGfydcBZKFMNwLk2U4LIesS5CjbdbWsHcEbYkthnMyJ0us9tQxMKApsRoU2YqwGuW9gSj1guANEhh/emTELYEsPCKb60zyKsCa21J9ihiq/rRqytA+grbAWYNWC/5D4toj6AftzWGjBsyrdKfUd3i4v2HtpH7XV8+JusBeGMqinqsPMzpqy9GMDpwpQwobnbBL4ROvtpwIMpkjgiz/tRVywzKce8ry1KCJHQiqkAOvva4EONWfSE6LoWbSsVQGdvYjp3ygu59zo+oDZKBdDZX5pCqDElyFPcvNiivHk2Uc4e4TRCjSlB6hVwzKht9aluD8YR+179eInyv94ktUat+mmS2ttBJPbzFgnKZC4+bcUxatWz8xTff9JgPzMTL+vqhouvkffQFEv358ynkGM0PzPDcO4psXyk3fbxWfDeea2oF+/+2XXOyqdSgcW5p3Qa4uLyjd3V+unax4J9pxlS0Zx/+3I8XF3ddX8lHTdanF1L4zUy3nt+dldXV+urp8O147uTr19P7tbW/0H/9wCmg+g5f5hCO/Bf528iBrXr/ZUUnrLnDCm8my7f7ReGuOv/FfiI7j0HDD1pKgfuDw8i7i7/yo4MOwD2neWGnHATZK43u1yufgAxAJg5nx1xlG/xCJXvPD6YmyLzHXw3OsreeQJiEPBiT+kYv3oyGKT/TgWQdi6I0uQPbyg8UvciFjEIuK2aH1MM5c9IAvHWpXsxAKKpIAu9mVrhbSl8gMGDGATMHCrOJysqjLcu3W3C6qbIfKPfyDv5uTrTaMQQwB/G4qPIW78fMBty+X4apoyLgsvRzPDgmVKD0eZ2aAGeXgd+ct71f1gxDq8oX6zjKHDHEEP/PmA+R4GmePHvU4uw/Z/bZeOqgU+bhhyxvMXNLZv1ri9BFD2tz1/HmR9j2zBswlVjGX4afD6WIWdHAq0hg3d90V2mL+eulGX3jPDTmqJUhu3T/w7/96LCG74rRq+DJnQZK38mdK8PWnDNvyKfchOkEcp9EZWz/NQbUlCwrPx8YamCQq3n7saaEVNGRf1F46xhd+6R9mtECblnlPmc2g0WpT8gT678fOkQ8srh4kfjuKdkOWuPtEMXem8iUcJAze/oMNI9F0ach5SpSeEh5CsP7o8u9pKKUQz+SiBiDL/7Ej9hoL92xcc/eKdqbrCx052XkO98d+ETH5T528oVQTcg4v5S7Ol9xKfg8CGpdv/0RuUDhLwxtn522435vJexc4W9GTbiDlpMI4oyNp/b3C4diMoLLyGv3lgNFMeELqOIxRh5jzCOEQWph+WfrlTUfzl3G1rFDqUv3fTZRenkViUorcP3cHJH5F3QGEaUJw9xoT0oZMTbeSRZJuTRIAvfhJaMWfL8ccx93knhVJCuEvJDSJUuF4/EJVyUoV6SPTD0yNQ/SREn5k72BCMK3Iy0Pjzv9ekgIZHHux+ZTWJbY+y9+rFGFEcKqQGXFEJII6UTuxYX+26EuN6pOErO8I9DiJw75iWJCe+3iB5iIEDWevGVl0CECDHKURPfURI1ThQm7IBzQvaSeHUUgRh4myXmu4IEjmd/8LwCR8h3wjffYLwrKDzYyDMAQFBC5TDUiBjvewoNNvIfiqgeUitAQr7zO6wLFoIT/FZw7lQYqSCVAiUMizaY710L+ql8COGj0IQ8H7jABvPdeQE/la9AfHRBeAhTXOfPcuAPhQn7pj+eCjmARGELlpBX/fGU4B2W/veQyr9DJwtpBEyo/PIGG5L3kPryvjBRgSoETojyvseIRO+S9TZF+TtMmDEFTeg1IuH7gBdNEdKE4IQeIxK/03neFAFbYQqEcyOSv5fbzYogPW5Xhw7hW7gi3XBK8W51J9qAmjAFQuW7ZcTAiAKLMAObC/lUCB0jRkSZJEIUbUSo7oylOSFcdOYrv+XIMJpIiBAFwLqkQ8gbucgwmkyY2QY1YTqEnT+xgAmEmevEdSESvU2DsBvcL0BCOF9yAJFLuA9I2L1JIEgiBEVMgVBNAkwmBERU4AkTLYhDmLmEaovwhBiAOIRg4WZO+A6IcC8hyGATLhYA2QRNuBfcW0VLmLkgXlQLEzBhd3lnFQth5oJ12cmUsg9IqBjB/Z0shJnajL13A0nYOQzZ4MhEmMkM1GdEqIbs7WQmZM8ac8JPrIR7GFmCgjBzG7LFkojwHQyhouLFGHLCTO1BfQaExgy3CZITZjI3ewyVgyEk8VAKwswFze6JZcK/6Ak7FRIPpSHMZMbUPXEAwu4guYLMhJlbnnJ2SvnESNjpBA+qpEGYyfTpWiMjobL3g6ayVISZi5n66ITGIWY3DYQQjahiN3jDE3ZCjm+kS4gSR5d0NpyeUNkbx02JpkSY2R7skTHSEirdX3QOykqImuOvLkldlb8cwr+JPtV9YOBjJESMUwJfpSFUulMmPmZCxDjYw4055ISd7ndGPgDCTGb3xsDbl0lIqBhqn5kPhBDpetbFMCQRYaV7SJsf/IIhRM7aNxJnq/AJkfnGAOazBEWIdD7oxnur8jcWoWJ0pxT9zygBEiJdD1Q12l1xCCtqd3pNnd3DBEuIdNvnu0Z4BkkiRMZTxoDWswVOiHRx/UPphpybjSFUOka3MriEantepUFo6uL85kHtGkZFCSH86bGxUukYavfh5joNOlNpEVpCmD8ejK6qGkanoiiVuQ3N/3QQGXoGs8HNeVpwllIltFW7uL2+vBkPpg8/X9r6+TAdjG8ur28vQGNKuP4PfdlFy5gQ548AAAAASUVORK5CYII=' alt='avatar' size='xl' />
+    </div>
+  );
+};
+
+export default Avatars;

client/src/components/home/HomePage.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Avatar from "./Avatars";
+import PostCard from "./PostCard";
+import {IoIosArrowDropright} from "react-icons/io"
+
+
+const HomePage: React.FC = () => {
+  return (
+    <div className='pt-4'>
+      <div className='p-2 w-11/12 items-center ml-10  flex flex-wrap justify-center '>
+        <Avatar />
+        <Avatar />
+        <Avatar />
+        <Avatar />
+        <Avatar />  
+        <Avatar />
+        <Avatar />
+        <IoIosArrowDropright className="w-7 h-7 cursor-pointer text-blue-gray-700"/>
+      </div>
+      <div className="flex flex-col items-center ">
+        <PostCard />
+        <PostCard />
+        <PostCard />
+        <PostCard />
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;

client/src/components/home/PostCard.tsx

@@ -0,0 +1,54 @@
+import { Card, CardHeader, Typography, Avatar } from "@material-tailwind/react";
+import { AiOutlineHeart } from "react-icons/ai";
+import { BiMessageRounded } from "react-icons/bi";
+import { BsThreeDots } from "react-icons/bs";
+import {FiBookmark} from 'react-icons/fi'
+import {IoPaperPlaneOutline} from "react-icons/io5"
+
+export default function PostCard() {
+  return (
+    <div className=' mt-3 pt-5 pb-10 border-b border-gray-300'>
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center mb-1'>
+          <Avatar
+            size='md'
+            src='data:image/jpeg;base64,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'
+          />
+          <Typography
+            variant='h5'
+            color='blue-gray'
+            className='mb-2 ml-2 mt-2 font-medium leading-[1.5]'
+          >
+            Abin_abin <span className='text-sm font-semibold'>.6h</span>
+          </Typography>
+        </div>
+        <div className='p-2 cursor-pointer '>
+          <BsThreeDots />
+        </div>
+      </div>
+      <Card
+        shadow={false}
+        className='relative rounded-md  grid h-[38rem] w-[28rem] items-end justify-center overflow-hidden text-center'
+      >
+        <CardHeader
+          floated={false}
+          shadow={false}
+          color='transparent'
+          className="absolute inset-0 m-0 h-full w-full rounded-none bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center"
+        >
+          <div className='to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50' />
+        </CardHeader>
+      </Card>
+      <div className='flex pt-2 '>
+        <div className='w-11/12 gap-3 flex'>
+          <AiOutlineHeart className='w-7 h-7 cursor-pointer hover:bg-red-500' />
+          <BiMessageRounded className='w-7 h-7 cursor-pointer' />
+          <IoPaperPlaneOutline className='w-7 h-7 cursor-pointer' />
+        </div>
+        <div className='w-1/12'>
+          <FiBookmark className='w-7 h-7 cursor-pointer' />
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/home/Suggestions.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+
+const Suggestions:React.FC = () => {
+  return (
+    <div className='h-screen p-7 rounded-md shadow-md border border-gray-200'>
+      Suggestions
+    </div>
+  );
+};
+
+export default Suggestions;