From cf5446d8006053002dafa9c77263a671fafeabe4 Mon Sep 17 00:00:00 2001
From: nguyenfamj <nguyenfamj1409@gmail.com>
Date: Fri, 22 Apr 2022 00:49:56 +0300
Subject: [PATCH] Complete dashboard data display,GET request from server and
 SkillForm UI

---
 .vscode/settings.json                         |   2 +-
 client/package-lock.json                      |  18 +++
 client/package.json                           |   1 +
 client/public/index.html                      |   1 -
 client/src/App.tsx                            |   3 +-
 .../Authentication/Authentication.tsx         |  24 ++--
 .../components/CardOptions/CardOptions.tsx    |  57 +++++++++
 .../components/GlassDialog/GlassDialog.tsx    |   2 +-
 client/src/components/GlassForm/GlassForm.tsx |   2 -
 .../GlassForm/GlassInput/GlassInput.tsx       |   6 +-
 client/src/components/Navbar/Navbar.tsx       |  13 +-
 .../ProtectedRoute/ProtectedRoute.tsx         |   2 +-
 client/src/components/SkillAdd/SkillAdd.tsx   |  99 ++++++++++++++
 .../SkillAddButton/SkillAddButton.tsx         |  21 +++
 .../SkillAdd/StatusList/StatusList.tsx        |  72 +++++++++++
 client/src/components/SkillCard/SkillCard.tsx |  70 ++++++++++
 .../components/SkillForm/SkillForm.styled.ts  |  18 +++
 client/src/components/SkillForm/SkillForm.tsx | 121 ++++++++++++++++++
 client/src/components/SkillTab/SkillTab.tsx   |  21 +++
 client/src/index.css                          |  25 ++++
 client/src/index.styled.ts                    |   2 +-
 .../{apiResponse.ts => authApiResponse.ts}    |   0
 client/src/interfaces/formInputs.ts           |  18 ++-
 client/src/interfaces/navigation.ts           |   1 +
 client/src/interfaces/skillApiResponse.ts     |  21 +++
 client/src/pages/Auth/LoginForm/LoginForm.tsx |  10 +-
 .../pages/Auth/RegisterForm/RegisterForm.tsx  |   4 +-
 client/src/pages/Dashboard/Dashboard.tsx      | 109 +++++++++++++++-
 client/src/pages/Profile/Profile.tsx          |   7 +
 client/src/redux/combinedReducers.ts          |   4 +-
 client/src/redux/services/authApi.ts          |   4 +-
 client/src/redux/services/skillApi.ts         |  37 ++++++
 client/src/redux/slices/authSlice.ts          |   2 +-
 client/src/redux/slices/skillSlice.ts         |   9 ++
 client/src/redux/store.ts                     |   5 +-
 server/src/api/controllers/skill.js           |   2 +-
 36 files changed, 767 insertions(+), 46 deletions(-)
 create mode 100644 client/src/components/CardOptions/CardOptions.tsx
 create mode 100644 client/src/components/SkillAdd/SkillAdd.tsx
 create mode 100644 client/src/components/SkillAdd/SkillAddButton/SkillAddButton.tsx
 create mode 100644 client/src/components/SkillAdd/StatusList/StatusList.tsx
 create mode 100644 client/src/components/SkillCard/SkillCard.tsx
 create mode 100644 client/src/components/SkillForm/SkillForm.styled.ts
 create mode 100644 client/src/components/SkillForm/SkillForm.tsx
 create mode 100644 client/src/components/SkillTab/SkillTab.tsx
 rename client/src/interfaces/{apiResponse.ts => authApiResponse.ts} (100%)
 create mode 100644 client/src/interfaces/skillApiResponse.ts
 create mode 100644 client/src/pages/Profile/Profile.tsx
 create mode 100644 client/src/redux/services/skillApi.ts
 create mode 100644 client/src/redux/slices/skillSlice.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a7b1141..4cb0804 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.ignoreWords": ["persistor", "semibold"]
+  "cSpell.ignoreWords": ["metas", "persistor", "semibold"]
 }
diff --git a/client/package-lock.json b/client/package-lock.json
index a2ba9cf..93bc775 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -17,6 +17,7 @@
         "@types/react-redux": "^7.1.23",
         "@types/styled-components": "^5.1.24",
         "@types/webpack-env": "^1.16.3",
+        "date-fns": "^2.28.0",
         "prettier": "^2.6.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -5798,6 +5799,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -20201,6 +20214,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/client/package.json b/client/package.json
index c42194c..60bc956 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
     "@types/react-redux": "^7.1.23",
     "@types/styled-components": "^5.1.24",
     "@types/webpack-env": "^1.16.3",
+    "date-fns": "^2.28.0",
     "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/client/public/index.html b/client/public/index.html
index 9162ca2..969d821 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -11,7 +11,6 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap"
       rel="stylesheet"
     />
-    <title>React Redux App</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/src/App.tsx b/client/src/App.tsx
index f152a16..a70f22f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,6 +8,7 @@ import { Authentication } from './components/Authentication/Authentication';
 import Auth from './pages/Auth/Auth';
 import Dashboard from './pages/Dashboard/Dashboard';
 import About from './pages/About/About';
+import Profile from './pages/Profile/Profile';
 
 function App() {
   return (
@@ -22,7 +23,7 @@ function App() {
           element={<ProtectedRoute path='/login' element={<Dashboard />} />}
         />
         <Route path='/about' element={<ProtectedRoute path='/login' element={<About />} />} />
-        <Route path='/profile' element={<ProtectedRoute path='/login' element={<About />} />} />
+        <Route path='/profile' element={<ProtectedRoute path='/login' element={<Profile />} />} />
       </Routes>
     </Router>
   );
diff --git a/client/src/components/Authentication/Authentication.tsx b/client/src/components/Authentication/Authentication.tsx
index dbc6aee..e149883 100644
--- a/client/src/components/Authentication/Authentication.tsx
+++ b/client/src/components/Authentication/Authentication.tsx
@@ -1,33 +1,33 @@
 import { useEffect } from 'react';
 // Import from RTK
-import { useAuthenticateQuery } from '../../redux/services/authApi';
+import { useLazyAuthenticateQuery } from '../../redux/services/authApi';
 import { setUser } from '../../redux/slices/authSlice';
 import { useAppDispatch, useAppSelector } from '../../hooks/rtkHook';
 
 export const Authentication = () => {
-  const { data, error, isFetching } = useAuthenticateQuery();
+  const [trigger, result] = useLazyAuthenticateQuery();
 
   // Get isAuthenticated state from store
-  const { isAuthenticated, user } = useAppSelector((state) => state.auth);
+  const { user, accessToken } = useAppSelector((state) => state.auth);
 
   // Handle authenticateUser and change state in the store
   const dispatch = useAppDispatch();
   const authenticateUser = async () => {
-    if (isFetching) {
-      console.log('Loading...');
-    }
-    if (data?.success) {
+    await trigger();
+    if (result?.data?.success) {
       console.log('Authenticated');
-      dispatch(setUser({ user: data?.user }));
-    } else if (error) {
-      console.log('Authentication Error');
+      dispatch(setUser({ user: result?.data?.user }));
+    } else if (result.error) {
+      console.log('Authentication Error', result.error);
     }
   };
 
   // Only re-render when data.success (boolean) is changed
   useEffect(() => {
-    if (isAuthenticated && user === data?.user) authenticateUser();
-  }, [data?.success]);
+    if (user !== result?.data?.user && accessToken) {
+      authenticateUser();
+    }
+  }, [result?.data?.user, accessToken]);
 
   return <></>;
 };
diff --git a/client/src/components/CardOptions/CardOptions.tsx b/client/src/components/CardOptions/CardOptions.tsx
new file mode 100644
index 0000000..a4d7a0a
--- /dev/null
+++ b/client/src/components/CardOptions/CardOptions.tsx
@@ -0,0 +1,57 @@
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { DotsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
+
+const CardOptions = () => {
+  return (
+    <Popover className='relative'>
+      {({ open }) => (
+        <>
+          <Popover.Button className='flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-400'>
+            <DotsHorizontalIcon
+              className={`${open ? '' : ''}
+             h-6 w-6 text-white group-hover:text-opacity-80 transition ease-in-out duration-150`}
+              aria-hidden='true'
+            />
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter='transition ease-out duration-200'
+            enterFrom='opacity-0 translate-y-1'
+            enterTo='opacity-100 translate-y-0'
+            leave='transition ease-in duration-150'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 translate-y-1'
+          >
+            <Popover.Panel className='absolute right-0 z-10 mt-1 '>
+              <div className='overflow-hidden rounded-lg shadow-lg '>
+                <div className='flex flex-col p-2 space-y-2 bg-white '>
+                  {/* Edit button */}
+                  <button
+                    type='button'
+                    onClick={() => {}}
+                    className='flex items-center px-3 py-1 rounded-md w-28 hover:cursor-pointer hover:bg-slate-300'
+                  >
+                    <PencilIcon className='w-4 h-4 ' />
+                    <p className='ml-4 text-sm'>Edit</p>
+                  </button>
+                  {/* Delete button */}
+                  <button
+                    type='button'
+                    onClick={() => {}}
+                    className='flex items-center px-3 py-1 rounded-md w-28 hover:cursor-pointer hover:bg-slate-300'
+                  >
+                    <TrashIcon className='w-4 h-4 ' />
+                    <p className='ml-4 text-sm'>Delete</p>
+                  </button>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export default CardOptions;
diff --git a/client/src/components/GlassDialog/GlassDialog.tsx b/client/src/components/GlassDialog/GlassDialog.tsx
index 0f5e7dd..5e73dfa 100644
--- a/client/src/components/GlassDialog/GlassDialog.tsx
+++ b/client/src/components/GlassDialog/GlassDialog.tsx
@@ -1,6 +1,6 @@
 import { useState, Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
-import { errorAlert } from '../../interfaces/apiResponse';
+import { errorAlert } from '../../interfaces/authApiResponse';
 
 const GlassDialog = ({ title, message }: errorAlert) => {
   const [isOpen, setIsOpen] = useState(true);
diff --git a/client/src/components/GlassForm/GlassForm.tsx b/client/src/components/GlassForm/GlassForm.tsx
index b68e3d5..42fd2e6 100644
--- a/client/src/components/GlassForm/GlassForm.tsx
+++ b/client/src/components/GlassForm/GlassForm.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 // Import Form Components
 import GlassInput from './GlassInput/GlassInput';
 
diff --git a/client/src/components/GlassForm/GlassInput/GlassInput.tsx b/client/src/components/GlassForm/GlassInput/GlassInput.tsx
index 53f31a4..77e0144 100644
--- a/client/src/components/GlassForm/GlassInput/GlassInput.tsx
+++ b/client/src/components/GlassForm/GlassInput/GlassInput.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 // Import interface
-import { inputMetas, glassInputProps, inputsValueType } from '../../../interfaces/formInputs';
+import { inputMetas, glassInputProps } from '../../../interfaces/formInputs';
 
 const GlassInput = ({ metas, onChange, values }: glassInputProps) => {
   const { id, errorMessage, label, required, ...inputProps }: inputMetas = metas;
 
   return (
-    <div className='flex flex-col mb-3 w-72'>
+    <div className='relative flex flex-col mb-3 w-72'>
       <input
         title='input'
         {...inputProps}
@@ -15,7 +15,7 @@ const GlassInput = ({ metas, onChange, values }: glassInputProps) => {
         onChange={onChange}
         className='p-3 pl-5 text-sm border shadow-sm border-slate-200 peer w-72 rounded-xl bg-white/40 placeholder:text-black/50 placeholder:text-sm focus:outline-none focus:border-indigo-900 focus:ring-1 focus:ring-indigo-500 invalid:border-red-500 focus:invalid:border-red-500 focus:invalid:ring-red-400 invalid:text-red-400'
       />
-      <span className='absolute z-10 invisible p-2 pr-1 rounded-lg w-[400px] peer-invalid:visible bg-white/70 left-[83%] after:content-[" "] after:absolute after:top-1/2 after:border-solid after:border-transparent after:border-r-white/70 after:right-full after:border-[9px] after:-translate-y-2'>
+      <span className='absolute z-10 invisible p-2 pr-1 rounded-lg w-[400px] peer-invalid:visible bg-white/70 left-full translate-x-5  after:content-[" "] after:absolute after:top-1/2 after:border-solid after:border-transparent after:border-r-white/70 after:right-full after:border-[9px] after:-translate-y-2'>
         <p className='text-xs text-indigo-900'>{errorMessage}</p>
       </span>
     </div>
diff --git a/client/src/components/Navbar/Navbar.tsx b/client/src/components/Navbar/Navbar.tsx
index c2100e1..262ea52 100644
--- a/client/src/components/Navbar/Navbar.tsx
+++ b/client/src/components/Navbar/Navbar.tsx
@@ -50,14 +50,14 @@ const Navbar = () => {
     classes.filter(Boolean).join(' ');
 
   return (
-    <Disclosure as='nav' className=''>
+    <Disclosure as='nav' className='mb-14'>
       {({ open }) => (
         <>
           <div className='w-screen px-2 mx-auto sm:px-6 lg:px-8'>
             <div className='relative inset-y-0 flex items-center justify-between h-16 '>
               {/* Dropdown button for small screen */}
               <div className='absolute left-0 flex items-center sm:hidden'>
-                <Disclosure.Button className='inline-flex items-center justify-center p-2 text-black rounded-md focus:outline-none '>
+                <Disclosure.Button className='inline-flex items-center justify-center text-black rounded-md focus:outline-none '>
                   {open ? (
                     <XIcon className='block w-7 h-7' aria-hidden='true' />
                   ) : (
@@ -70,7 +70,7 @@ const Navbar = () => {
               <div className='flex items-center justify-center flex-1 sm:justify-start'>
                 <Link to='/dashboard' className='flex items-center flex-shrink-0'>
                   <BrandLogo className='block w-auto h-10 fill-indigo-900 lg:hidden' />
-                  <h1 className='hidden text-3xl font-black text-indigo-900 lg:block'>STICKI</h1>
+                  <h1 className='hidden text-3xl font-black text-indigo-900 lg:block'>SKIL</h1>
                 </Link>
                 <div className='hidden sm:block sm:ml-8'>
                   <div className='flex space-x-4'>
@@ -95,11 +95,12 @@ const Navbar = () => {
               {/* Notification button and profile */}
               <div className='absolute inset-y-0 right-0 flex items-center pr-2 space-x-4 sm:inset-auto sm:static sm:pr-0 sm:ml-6'>
                 <button
-                  title='notification'
+                  title='Notification'
                   type='button'
-                  className='p-1 text-black rounded-full hover:bg-black/60 hover:text-white'
+                  className='flex items-center justify-center p-1 text-black rounded-full hover:bg-black/60 hover:text-white'
                 >
-                  <StatusOnlineIcon className='w-6 h-6' />
+                  <span className='absolute inline-flex rounded-full w-7 h-7 bg-slate-500 opacity-20 animate-ping '></span>
+                  <StatusOnlineIcon className='relative inline-flex w-6 h-6 ' />
                 </button>
                 <button
                   title='setting'
diff --git a/client/src/components/ProtectedRoute/ProtectedRoute.tsx b/client/src/components/ProtectedRoute/ProtectedRoute.tsx
index d90bcb1..5273b78 100644
--- a/client/src/components/ProtectedRoute/ProtectedRoute.tsx
+++ b/client/src/components/ProtectedRoute/ProtectedRoute.tsx
@@ -14,7 +14,7 @@ const ProtectedRoute = ({ path, element: Element }: ProtectedRouteProps) => {
 
   if (isAuthenticated) {
     return (
-      <div className='w-screen h-screen bg-radial-gradient-background'>
+      <div className='w-screen min-h-screen bg-radial-gradient-background'>
         <Navbar />
         {Element}
       </div>
diff --git a/client/src/components/SkillAdd/SkillAdd.tsx b/client/src/components/SkillAdd/SkillAdd.tsx
new file mode 100644
index 0000000..a34ac69
--- /dev/null
+++ b/client/src/components/SkillAdd/SkillAdd.tsx
@@ -0,0 +1,99 @@
+import React, { Fragment, useRef, useState } from 'react';
+
+// Import from HeadlessUI
+import { Transition, Dialog } from '@headlessui/react';
+
+// Import components
+import Button from './SkillAddButton/SkillAddButton';
+import SkillForm from '../SkillForm/SkillForm';
+
+// Import interfaces
+import { skillInput } from '../../interfaces/formInputs';
+import { statusEnum } from '../../interfaces/skillApiResponse';
+
+interface PropTypes {
+  children?: React.ReactNode;
+}
+
+const SkillAdd = ({ children }: PropTypes) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const initialFocusRef = useRef(null);
+
+  const openModal = (): void => {
+    setIsOpen(true);
+  };
+
+  const closeModal = (): void => {
+    setIsOpen(false);
+  };
+
+  //   Form States
+  const initialFormStates: skillInput = {
+    title: '',
+    description: '',
+    status: statusEnum.Planned,
+    url: '',
+  };
+
+  return (
+    <>
+      {!isOpen && (
+        <div>
+          <Transition
+            show={!isOpen}
+            enter='transition-opacity duration-150'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='transition-opacity duration-150'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <Button openModal={openModal} />
+          </Transition>
+        </div>
+      )}
+      <Transition as={Fragment} show={isOpen}>
+        <Dialog
+          as='div'
+          className='fixed inset-0 z-10'
+          onClose={closeModal}
+          initialFocus={initialFocusRef}
+        >
+          <div className='min-h-screen'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0'
+              enterTo='opacity-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100'
+              leaveTo='opacity-0'
+            >
+              <Dialog.Overlay className='fixed inset-0 bg-slate-700/10 backdrop-blur-sm ' />
+            </Transition.Child>
+
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='translate-y-3 opacity-90'
+              enterTo='translate-y-0 opacity-100'
+              leave='ease-in duration-200'
+              leaveFrom='translate-y-0 '
+              leaveTo='translate-y-3 '
+            >
+              <div className='flex items-center justify-center w-screen h-screen '>
+                <SkillForm
+                  initialStates={initialFormStates}
+                  formTitle='Create Skill'
+                  closeModal={closeModal}
+                />
+              </div>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};
+
+export default SkillAdd;
diff --git a/client/src/components/SkillAdd/SkillAddButton/SkillAddButton.tsx b/client/src/components/SkillAdd/SkillAddButton/SkillAddButton.tsx
new file mode 100644
index 0000000..30e7a7d
--- /dev/null
+++ b/client/src/components/SkillAdd/SkillAddButton/SkillAddButton.tsx
@@ -0,0 +1,21 @@
+import { PlusIcon } from '@heroicons/react/solid';
+
+type PropTypes = {
+  className?: string;
+  openModal: () => void;
+};
+
+const SkillAddButton = ({ className, openModal }: PropTypes) => {
+  return (
+    <button
+      title='Add skill'
+      type='button'
+      className={`flex items-center justify-center w-12 h-12 bg-white rounded-full sm:w-9 sm:h-9 bg-black/30  hover:ring-4 hover:ring-white/80 fixed z-50 transform translate-x-1/2 bottom-2 right-1/2 sm:bottom-0 sm:translate-x-0 sm:relative sm:right-2 sm:ml-6`}
+      onClick={openModal}
+    >
+      <PlusIcon className='w-10 h-10 text-white sm:w-8 sm:h-8' />
+    </button>
+  );
+};
+
+export default SkillAddButton;
diff --git a/client/src/components/SkillAdd/StatusList/StatusList.tsx b/client/src/components/SkillAdd/StatusList/StatusList.tsx
new file mode 100644
index 0000000..e540ac0
--- /dev/null
+++ b/client/src/components/SkillAdd/StatusList/StatusList.tsx
@@ -0,0 +1,72 @@
+import { useState, Fragment, Dispatch, SetStateAction, useEffect } from 'react';
+
+// Import components from HeadlessUI and heroicons
+import { Listbox, Transition } from '@headlessui/react';
+import { SelectorIcon, CheckIcon } from '@heroicons/react/outline';
+
+// Import interfaces
+import { statusEnum } from '../../../interfaces/skillApiResponse';
+import { skillInput } from '../../../interfaces/formInputs';
+
+interface propTypes {
+  setFormStates: Dispatch<SetStateAction<skillInput>>;
+}
+
+const StatusList = ({ setFormStates }: propTypes) => {
+  const statusList: { name: statusEnum }[] = [
+    {
+      name: statusEnum.Planned,
+    },
+    {
+      name: statusEnum.InProgress,
+    },
+    {
+      name: statusEnum.Done,
+    },
+  ];
+
+  const [selected, setSelected] = useState<{ name: statusEnum }>(statusList[0]);
+
+  useEffect(() => {
+    setFormStates((prevState) => ({ ...prevState, status: selected.name }));
+  }, [selected]);
+
+  return (
+    <Listbox value={selected} onChange={setSelected}>
+      <div className='relative mt-1'>
+        <Listbox.Button className='relative w-full text-left bg-white border-2 cursor-pointer border-zinc-400 rounded-xl sm:p-3 sm:text-sm'>
+          <span className='block truncate'>{selected.name}</span>
+          <span className='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
+            <SelectorIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave='transition ease-in duration-100'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'
+        >
+          <Listbox.Options className='absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
+            {statusList.map((status, index) => (
+              <Listbox.Option
+                key={index}
+                className={({ active }) =>
+                  `cursor-pointer select-none relative py-2 pl-10 pr-4 ${
+                    active ? 'text-white bg-indigo-600' : 'text-gray-900'
+                  }`
+                }
+                value={status}
+              >
+                <>
+                  <span>{status.name}</span>
+                </>
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+};
+
+export default StatusList;
diff --git a/client/src/components/SkillCard/SkillCard.tsx b/client/src/components/SkillCard/SkillCard.tsx
new file mode 100644
index 0000000..a2e730f
--- /dev/null
+++ b/client/src/components/SkillCard/SkillCard.tsx
@@ -0,0 +1,70 @@
+import { skillModel, statusEnum } from '../../interfaces/skillApiResponse';
+import CardOptions from '../CardOptions/CardOptions';
+
+//
+import { formatDistanceToNow } from 'date-fns';
+
+//
+import { GlobeIcon } from '@heroicons/react/outline';
+
+interface PropTypes {
+  skill: skillModel;
+}
+
+const SkillCard = ({ skill }: PropTypes) => {
+  // Function to control UI from tailwindCSS
+  function classNames(...classes: (false | null | undefined | string)[]) {
+    return classes.filter(Boolean).join(' ');
+  }
+
+  return (
+    <div
+      className={classNames(
+        'h-48 rounded-lg bg-gradient-to-br from-white/70 via-white/60 to-white/5 ring-2 backdrop-blur-lg backdrop-filter relative sm:w-full',
+        skill.status === statusEnum.Planned
+          ? ' ring-rose-300'
+          : skill.status === statusEnum.InProgress
+          ? 'ring-orange-300 '
+          : skill.status === statusEnum.Done
+          ? 'ring-green-300'
+          : ''
+      )}
+    >
+      <div
+        className={classNames(
+          'h-8 rounded-t-lg flex items-center justify-between px-4',
+          skill.status === statusEnum.Planned
+            ? ' bg-rose-300'
+            : skill.status === statusEnum.InProgress
+            ? 'bg-orange-300 '
+            : skill.status === statusEnum.Done
+            ? 'bg-green-300'
+            : ''
+        )}
+      >
+        <h2 className='font-semibold text-white'>{skill.status}</h2>
+        <CardOptions />
+      </div>
+      <div className='px-4 mt-3 '>
+        <div className='flex items-center'>
+          <h2 className='text-2xl font-semibold text-indigo-900 capitalize'>{skill.title}</h2>
+          <div className='p-1 ml-4 rounded-md bg-slate-300/60'>
+            <p className='text-xs'>{formatDistanceToNow(new Date(skill.createdAt))}</p>
+          </div>
+        </div>
+        <p className='mt-2 text-sm text-justify'>{skill.description}</p>
+        <a
+          title={skill.url}
+          href={skill.url}
+          target='_blank'
+          rel='noreferrer'
+          className='absolute bottom-0 py-3'
+        >
+          <GlobeIcon className='text-indigo-900 rounded-full w-7 h-7 hover:text-black hover:cursor-pointer hover:ring-2 hover:ring-black/70' />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default SkillCard;
diff --git a/client/src/components/SkillForm/SkillForm.styled.ts b/client/src/components/SkillForm/SkillForm.styled.ts
new file mode 100644
index 0000000..8550c93
--- /dev/null
+++ b/client/src/components/SkillForm/SkillForm.styled.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const FormWrapper = styled.div`
+  width: 500px;
+  height: 680px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.6);
+  border-width: 1px;
+  border-bottom: 0px;
+  border-right: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  backdrop-filter: blur(50px);
+  box-shadow: 20px 20px 100px rgba(0, 0, 0, 0.3);
+`;
diff --git a/client/src/components/SkillForm/SkillForm.tsx b/client/src/components/SkillForm/SkillForm.tsx
new file mode 100644
index 0000000..1139521
--- /dev/null
+++ b/client/src/components/SkillForm/SkillForm.tsx
@@ -0,0 +1,121 @@
+import { useState } from 'react';
+
+// Import interface
+import { inputMetas, onChangeType, skillInput } from '../../interfaces/formInputs';
+
+// Import icon
+import { XIcon } from '@heroicons/react/outline';
+
+// Import components
+import StatusList from '../SkillAdd/StatusList/StatusList';
+
+interface propTypes {
+  initialStates: skillInput;
+  formTitle: string;
+  closeModal: () => void;
+}
+
+const SkillForm = ({ initialStates, formTitle, closeModal }: propTypes) => {
+  // Form States and handling
+  const [formStates, setFormStates] = useState<skillInput>(initialStates);
+
+  // // Handle changes
+  const onChange: onChangeType = (e) => {
+    setFormStates({ ...formStates, [e.target.name]: e.target.value });
+  };
+
+  const textInputs: inputMetas[] = [
+    {
+      id: 1,
+      title: 'Title',
+      value: formStates.title,
+      name: 'title',
+      type: 'text',
+      placeholder: 'Title',
+      label: 'Title',
+      pattern: '^[A-Za-z0-9]{2,}$',
+      errorMessage:
+        "Title must be more than one character shouldn't include any special character!",
+      required: true,
+    },
+    {
+      id: 2,
+      title: 'Description',
+      value: formStates.description,
+      name: 'description',
+      type: 'text',
+      placeholder: 'Description',
+      label: 'Description',
+      required: true,
+      expand: true,
+    },
+    {
+      id: 3,
+      title: 'Link',
+      value: formStates.url,
+      name: 'url',
+      type: 'text',
+      placeholder: 'Link',
+      label: 'Link',
+      required: false,
+    },
+  ];
+
+  return (
+    <div className=' transform  bg-white/60 backdrop-blur-lg sm:w-[500px] sm:min-h-[700px] flex flex-col items-center justify-between rounded-xl overflow-y-auto z-10 border-b border-r border-white/60 shadow-2xl'>
+      <div className='relative flex items-center justify-center w-11/12 border-b-2 sm:h-16 border-zinc-400'>
+        <h2 className='font-bold text-indigo-900 sm:text-2xl'>{formTitle}</h2>
+        <button
+          title='Close'
+          onClick={closeModal}
+          className='absolute right-0 flex items-center justify-center rounded-full ring-2 ring-zinc-400 w-7 h-7 text-zinc-400 hover:ring-black hover:text-black '
+        >
+          <XIcon className='w-6 h-6' />
+        </button>
+      </div>
+      <form>
+        <div className='space-y-4'>
+          {textInputs.map(({ id, title, type, expand, errorMessage, ...props }) => {
+            return (
+              <div key={id} className='relative z-10 flex flex-col space-y-2'>
+                <label className='font-semibold'>{props.label}</label>
+                {expand ? (
+                  <textarea
+                    title={title}
+                    {...props}
+                    onChange={onChange}
+                    className='text-sm border-2 resize-none border-zinc-400 sm:w-96 sm:h-24 sm:p-3 rounded-xl placeholder:text-sm focus:outline-none focus:border-indigo-900 focus:ring-1 focus:ring-indigo-500'
+                  />
+                ) : (
+                  <input
+                    {...props}
+                    type={type}
+                    title={title}
+                    onChange={onChange}
+                    className={`text-sm border-2 border-zinc-400 sm:w-96 sm:p-3 rounded-xl placeholder:text-sm focus:outline-none focus:border-indigo-900 focus:ring-1 focus:ring-indigo-500 ${
+                      props.value === '' ? '' : 'invalid:border-red-500'
+                    } focus:invalid:border-red-500 focus:invalid:ring-red-400 invalid:text-red-400 peer`}
+                  />
+                )}
+                <span
+                  className={`hidden mt-1 sm:w-96  ${
+                    props.value === '' ? '' : 'peer-invalid:block '
+                  }`}
+                >
+                  <p className='text-xs text-indigo-900'>{errorMessage}</p>
+                </span>
+              </div>
+            );
+          })}
+          <div className=' sm:w-96 top-16'>
+            <label className='font-semibold'>Status</label>
+            <StatusList setFormStates={setFormStates} />
+          </div>
+        </div>
+      </form>
+      <div className='h-32 '>a</div>
+    </div>
+  );
+};
+
+export default SkillForm;
diff --git a/client/src/components/SkillTab/SkillTab.tsx b/client/src/components/SkillTab/SkillTab.tsx
new file mode 100644
index 0000000..f79e083
--- /dev/null
+++ b/client/src/components/SkillTab/SkillTab.tsx
@@ -0,0 +1,21 @@
+import { skillModel } from '../../interfaces/skillApiResponse';
+
+// Import components
+import { Tab } from '@headlessui/react';
+import SkillCard from '../SkillCard/SkillCard';
+
+interface PropTypes {
+  skillArray: skillModel[] | undefined;
+}
+
+const SkillTab = ({ skillArray }: PropTypes) => {
+  return (
+    <Tab.Panel className='mt-6 '>
+      <div className='grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4'>
+        {skillArray && skillArray.map((skill) => <SkillCard key={skill._id} skill={skill} />)}
+      </div>
+    </Tab.Panel>
+  );
+};
+
+export default SkillTab;
diff --git a/client/src/index.css b/client/src/index.css
index b5c61c9..4dcffc5 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom scroll bar */
+@layer utilities {
+  /* width */
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #ffffff;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #9e8375;
+    border-radius: 100vh;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #5e4d44;
+  }
+}
diff --git a/client/src/index.styled.ts b/client/src/index.styled.ts
index 912fe7e..daa2045 100644
--- a/client/src/index.styled.ts
+++ b/client/src/index.styled.ts
@@ -2,10 +2,10 @@ import { createGlobalStyle } from 'styled-components';
 
 export default createGlobalStyle`
 *{
-    
     margin: 0;
     padding: 0;
     outline: none;
     box-sizing: border-box;
     font-family: 'Montserrat', sans-serif;
+    
 }`;
diff --git a/client/src/interfaces/apiResponse.ts b/client/src/interfaces/authApiResponse.ts
similarity index 100%
rename from client/src/interfaces/apiResponse.ts
rename to client/src/interfaces/authApiResponse.ts
diff --git a/client/src/interfaces/formInputs.ts b/client/src/interfaces/formInputs.ts
index 8bc3052..6a49321 100644
--- a/client/src/interfaces/formInputs.ts
+++ b/client/src/interfaces/formInputs.ts
@@ -1,11 +1,16 @@
 import React from 'react';
+import { statusEnum } from './skillApiResponse';
 
-export type onChangeType = (event: React.ChangeEvent<HTMLInputElement>) => void;
+export type onChangeType = (
+  event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+) => void;
 
-export type inputsValueType = loginAuth | registerAuth;
+export type inputsValueType = loginAuth | registerAuth | skillInput;
 
 export interface inputMetas {
   id: number;
+  title?: string;
+  value?: string;
   name: string;
   type: string;
   placeholder: string;
@@ -13,8 +18,10 @@ export interface inputMetas {
   label: string;
   pattern?: string;
   required: boolean;
+  expand?: boolean;
 }
 
+// Input Types for authentication
 export interface loginAuth {
   username: string;
   password: string;
@@ -27,6 +34,13 @@ export interface registerAuth {
   lastname: string;
 }
 
+// Input types for skill
+export interface skillInput {
+  title: string;
+  description: string;
+  url: string;
+  status: statusEnum;
+}
 export interface glassFormProps {
   title?: string;
   inputs: inputMetas[];
diff --git a/client/src/interfaces/navigation.ts b/client/src/interfaces/navigation.ts
index 006e59a..071da2c 100644
--- a/client/src/interfaces/navigation.ts
+++ b/client/src/interfaces/navigation.ts
@@ -4,3 +4,4 @@ export interface navigationProps {
   href: string;
   current: boolean;
 }
+//
diff --git a/client/src/interfaces/skillApiResponse.ts b/client/src/interfaces/skillApiResponse.ts
new file mode 100644
index 0000000..124556f
--- /dev/null
+++ b/client/src/interfaces/skillApiResponse.ts
@@ -0,0 +1,21 @@
+export enum statusEnum {
+  Planned = 'Planned',
+  InProgress = 'In progress',
+  Done = 'Done',
+}
+
+export interface skillModel {
+  _id: string;
+  title: string;
+  description: string;
+  url: string;
+  status: statusEnum;
+  user: string;
+  createdAt: Date;
+  __v: number;
+}
+
+export interface getSkillsResponse {
+  success: boolean;
+  skills: skillModel[];
+}
diff --git a/client/src/pages/Auth/LoginForm/LoginForm.tsx b/client/src/pages/Auth/LoginForm/LoginForm.tsx
index e819e40..e34cfef 100644
--- a/client/src/pages/Auth/LoginForm/LoginForm.tsx
+++ b/client/src/pages/Auth/LoginForm/LoginForm.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 // Import Login Interface
 import { inputMetas, onChangeType, loginAuth } from '../../../interfaces/formInputs';
-import { loginAuthResponse, errorAlert } from '../../../interfaces/apiResponse';
+import { loginAuthResponse, errorAlert } from '../../../interfaces/authApiResponse';
 
 // Import Form Components
 import GlassForm from '../../../components/GlassForm/GlassForm';
@@ -29,7 +29,7 @@ const LoginForm = () => {
       errorMessage:
         "Username must be more than one character shouldn't include any special character!",
       label: 'Username',
-      pattern: '^[A-Za-z0-9]{2,}$',
+      pattern: '^[A-Za-z0-9]{1,}$',
       required: true,
     },
     {
@@ -68,12 +68,12 @@ const LoginForm = () => {
   // Handle login function
   // // useMutation hooks
   const dispatch = useAppDispatch();
-  const [login, { isLoading, isSuccess }] = useLoginMutation();
+  const [login, { isLoading }] = useLoginMutation();
 
   // // onClick button handler
   const loginHandler = async () => {
     setAlert(null);
-    const usernameRegex: RegExp = /^[A-Za-z0-9]{2,}$/;
+    const usernameRegex: RegExp = /^[A-Za-z0-9]{1,}$/;
     const passwordRegex: RegExp =
       /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
 
@@ -95,7 +95,7 @@ const LoginForm = () => {
     <>
       {alert === null || <GlassDialog title={alert.title} message={alert.message} />}
       <GlassWrapper>
-        <h1 className='text-4xl font-black translate-y-14 text-sky-500'>STICKI</h1>
+        <h1 className='text-4xl font-black translate-y-14 text-sky-500'>SKIL</h1>
 
         <div>
           <h1 className='mb-4 text-2xl font-semibold text-indigo-900'>Login</h1>
diff --git a/client/src/pages/Auth/RegisterForm/RegisterForm.tsx b/client/src/pages/Auth/RegisterForm/RegisterForm.tsx
index 6eb7269..61b76b3 100644
--- a/client/src/pages/Auth/RegisterForm/RegisterForm.tsx
+++ b/client/src/pages/Auth/RegisterForm/RegisterForm.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 // Import Register Interface
 import { inputMetas, onChangeType, registerAuth } from '../../../interfaces/formInputs';
-import { registerAuthResponse, errorAlert } from '../../../interfaces/apiResponse';
+import { registerAuthResponse, errorAlert } from '../../../interfaces/authApiResponse';
 
 // Import Form Components
 import GlassForm from '../../../components/GlassForm/GlassForm';
@@ -124,7 +124,7 @@ const Register = () => {
     <>
       {alert === null || <GlassDialog title={alert.title} message={alert.message} />}
       <GlassWrapper>
-        <h1 className='text-4xl font-black text-sky-500 translate-y-14'>STICKI</h1>
+        <h1 className='text-4xl font-black text-sky-500 translate-y-14'>SKIL</h1>
         <div>
           <h1 className='mb-4 text-2xl font-semibold text-indigo-900'>Create New Account</h1>
           <GlassForm inputs={inputs} onChange={onChange} values={registerStates} />
diff --git a/client/src/pages/Dashboard/Dashboard.tsx b/client/src/pages/Dashboard/Dashboard.tsx
index 4ededb5..799d9f0 100644
--- a/client/src/pages/Dashboard/Dashboard.tsx
+++ b/client/src/pages/Dashboard/Dashboard.tsx
@@ -1,7 +1,112 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Tab } from '@headlessui/react';
+
+// Import from RTK query
+import { useGetSkillsQuery } from '../../redux/services/skillApi';
+
+//
+import { statusEnum, skillModel } from '../../interfaces/skillApiResponse';
+
+// Import components
+import SkillTab from '../../components/SkillTab/SkillTab';
+import SkillAdd from '../../components/SkillAdd/SkillAdd';
 
 const Dashboard = () => {
-  return <h1></h1>;
+  const { data, isFetching, isLoading, error } = useGetSkillsQuery();
+
+  const tabNames = [
+    { id: 1, name: 'All skills' },
+    { id: 2, name: statusEnum.Planned },
+    { id: 3, name: statusEnum.InProgress },
+    { id: 4, name: statusEnum.Done },
+  ];
+
+  // Prepare data for each panels
+  let plannedSkills: skillModel[] = [],
+    inProgressSkills: skillModel[] = [],
+    doneSkills: skillModel[] = [];
+
+  const prepareArray = async (): Promise<void> => {
+    await data?.skills.forEach((skill) => {
+      skill.status === statusEnum.Planned
+        ? plannedSkills.push(skill)
+        : skill.status === statusEnum.InProgress
+        ? inProgressSkills.push(skill)
+        : doneSkills.push(skill);
+    });
+  };
+  prepareArray();
+
+  useEffect(() => {}, []);
+
+  // Function to control UI from tailwindCSS
+  function classNames(...classes: (false | null | undefined | string)[]) {
+    return classes.filter(Boolean).join(' ');
+  }
+
+  return (
+    <section className='w-screen px-2 pr-4 mt-4 sm:px-6 sm:pr-8 '>
+      <div className='flex'>
+        <h1 className='text-3xl font-bold text-white '>Dashboard</h1>
+      </div>
+      <div className='mt-8 '>
+        <Tab.Group>
+          <div className='sm:flex sm:items-center sm:justify-between '>
+            <Tab.List className='flex justify-around py-1 rounded-lg bg-black/10 sm:w-[560px] w-[300px]'>
+              {tabNames.map((tab) => (
+                <Tab
+                  key={tab.id}
+                  className={({ selected }) =>
+                    classNames(
+                      'px-2 py-1 rounded-md sm:text-base sm:w-32 text-sm',
+                      selected
+                        ? 'bg-black/50 text-white shadow-md'
+                        : 'hover:bg-white/30 text-white hover:text-black'
+                    )
+                  }
+                >
+                  {tab.name}
+                </Tab>
+              ))}
+            </Tab.List>
+            <SkillAdd />
+          </div>
+
+          {isFetching || isLoading ? (
+            <div className='flex items-center justify-center h-80'>
+              <svg
+                role='status'
+                className='w-12 h-12 text-transparent animate-spin fill-indigo-900 '
+                viewBox='0 0 100 101'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path
+                  d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
+                  fill='currentColor'
+                />
+                <path
+                  d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
+                  fill='currentFill'
+                />
+              </svg>
+            </div>
+          ) : error ? (
+            <div className='flex items-center justify-center h-80'>
+              <p className='text-base text-indigo-900'>Cannot load data, please try again</p>
+            </div>
+          ) : (
+            <Tab.Panels>
+              <SkillTab skillArray={data?.skills} />
+              <SkillTab skillArray={plannedSkills} />
+              <SkillTab skillArray={inProgressSkills} />
+              <SkillTab skillArray={doneSkills} />
+            </Tab.Panels>
+          )}
+        </Tab.Group>
+      </div>
+    </section>
+  );
 };
 
 export default Dashboard;
diff --git a/client/src/pages/Profile/Profile.tsx b/client/src/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..e773ca1
--- /dev/null
+++ b/client/src/pages/Profile/Profile.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Profile = () => {
+  return <div>Profile</div>;
+};
+
+export default Profile;
diff --git a/client/src/redux/combinedReducers.ts b/client/src/redux/combinedReducers.ts
index d57dcb6..b12c371 100644
--- a/client/src/redux/combinedReducers.ts
+++ b/client/src/redux/combinedReducers.ts
@@ -6,6 +6,7 @@ import { combineReducers } from '@reduxjs/toolkit';
 // Import reducers
 import { authApi } from './services/authApi';
 import authReducer from './slices/authSlice';
+import { skillApi } from './services/skillApi';
 
 const authPersistConfig = {
   key: 'auth',
@@ -15,12 +16,13 @@ const authPersistConfig = {
 const rootPersistConfig = {
   key: 'root',
   storage: storage,
-  blacklist: [authApi.reducerPath],
+  blacklist: [authApi.reducerPath, skillApi.reducerPath],
 };
 
 const rootReducer = combineReducers({
   [authApi.reducerPath]: authApi.reducer,
   auth: persistReducer(authPersistConfig, authReducer),
+  [skillApi.reducerPath]: skillApi.reducer,
 });
 
 export const persistedRootReducer = persistReducer(rootPersistConfig, rootReducer);
diff --git a/client/src/redux/services/authApi.ts b/client/src/redux/services/authApi.ts
index 804ebc1..9c97655 100644
--- a/client/src/redux/services/authApi.ts
+++ b/client/src/redux/services/authApi.ts
@@ -6,7 +6,7 @@ import {
   authenticateResponse,
   loginAuthResponse,
   registerAuthResponse,
-} from '../../interfaces/apiResponse';
+} from '../../interfaces/authApiResponse';
 import { loginAuth, registerAuth } from '../../interfaces/formInputs';
 
 // Import RootState
@@ -40,4 +40,4 @@ export const authApi = createApi({
   }),
 });
 
-export const { useLoginMutation, useRegisterMutation, useAuthenticateQuery } = authApi;
+export const { useLoginMutation, useRegisterMutation, useLazyAuthenticateQuery } = authApi;
diff --git a/client/src/redux/services/skillApi.ts b/client/src/redux/services/skillApi.ts
new file mode 100644
index 0000000..f07fe50
--- /dev/null
+++ b/client/src/redux/services/skillApi.ts
@@ -0,0 +1,37 @@
+// Import from RTK Query
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+// Import interfaces
+
+// Import RootState
+import { RootState } from '../store';
+
+// Import interfaces
+import { getSkillsResponse } from '../../interfaces/skillApiResponse';
+
+// import API URL
+import { apiURL as baseUrl } from '../constants/apiConstants';
+
+export const skillApi = createApi({
+  reducerPath: 'skillApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl,
+    prepareHeaders: (headers, { getState }) => {
+      const token = (getState() as RootState).auth.accessToken;
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    // createSkill: builder.mutation({}),
+    getSkills: builder.query<getSkillsResponse, void>({
+      query: () => ({ url: 'skills', method: 'GET' }),
+    }),
+    // updateSkill: builder.mutation({}),
+    // deleteSkill: builder.mutation({}),
+  }),
+});
+
+export const { useGetSkillsQuery } = skillApi;
diff --git a/client/src/redux/slices/authSlice.ts b/client/src/redux/slices/authSlice.ts
index 8383882..349bd25 100644
--- a/client/src/redux/slices/authSlice.ts
+++ b/client/src/redux/slices/authSlice.ts
@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import storage from 'redux-persist/lib/storage';
-import { userResponseModel } from '../../interfaces/apiResponse';
+import { userResponseModel } from '../../interfaces/authApiResponse';
 
 interface authState {
   user: userResponseModel | null;
diff --git a/client/src/redux/slices/skillSlice.ts b/client/src/redux/slices/skillSlice.ts
new file mode 100644
index 0000000..d7c022b
--- /dev/null
+++ b/client/src/redux/slices/skillSlice.ts
@@ -0,0 +1,9 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const initialState = {};
+
+export const skillSlice = createSlice({
+  name: 'skill',
+  initialState,
+  reducers: {},
+});
diff --git a/client/src/redux/store.ts b/client/src/redux/store.ts
index 06454e3..36e2c1f 100644
--- a/client/src/redux/store.ts
+++ b/client/src/redux/store.ts
@@ -2,6 +2,7 @@ import { configureStore } from '@reduxjs/toolkit';
 
 // Import reducer
 import { authApi } from './services/authApi';
+import { skillApi } from './services/skillApi';
 import { persistedRootReducer } from './combinedReducers';
 
 export const store = configureStore({
@@ -10,7 +11,9 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false,
-    }).concat(authApi.middleware),
+    })
+      .concat(authApi.middleware)
+      .concat(skillApi.middleware),
 });
 
 // Export the RootState and AppDispatch types
diff --git a/server/src/api/controllers/skill.js b/server/src/api/controllers/skill.js
index 69d8b24..2e3f51e 100644
--- a/server/src/api/controllers/skill.js
+++ b/server/src/api/controllers/skill.js
@@ -5,7 +5,7 @@ const Skill = require('../models/Skill');
 const getSkills = async (req, res) => {
   try {
     const allSkills = await Skill.find({ user: req.userID });
-    res.json({ success: true, allSkills });
+    res.json({ success: true, skills: allSkills });
   } catch (err) {
     console.log(err);
     res.status(500).json({ success: false, message: 'Internal Server Error' });