Merge branch 'main' into main

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,55 @@
+name: Bug report 🐞
+description: File a bug report
+title: "[Bug]: "
+labels: bug
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: Describe the bug
+      description: A concise description of what you are experiencing.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behaviour
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Add ScreenShots
+      description: Add sufficient ScreenShots to explain your issue.
+  - type: dropdown
+    id: devices
+    attributes:
+      label: On which device are you experiencing this bug?
+      multiple: true
+      options:
+        - Android
+        - iPhone
+        - Linux
+        - Chrome
+        - Windows
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Record
+      options:
+        - label: "I have read the Contributing Guidelines"
+          required: true
+        - label: "I'm a GSSOC'24 contributor"
+          required: False
+        - label: "I have starred the repository"
+          required: true

.github/ISSUE_TEMPLATE/documentation_update.yml

@@ -0,0 +1,60 @@
+name: 📝 Documentation Update
+description: Improve Documentation
+title: "[Documentation Update]: "
+labels: 'enhancement'
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the updates you want to make.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Issue Description
+      description: Please provide a clear description of the documentation update you are suggesting.
+      placeholder: Describe the improvement or correction you'd like to see in the documentation.
+    validations:
+      required: true
+  - type: textarea
+    id: suggested-change
+    attributes:
+      label: Suggested Change
+      description: Provide details of the proposed change to the documentation.
+      placeholder: Explain how the documentation should be updated or corrected.
+    validations:
+      required: true
+  - type: textarea
+    id: rationale
+    attributes:
+      label: Rationale
+      description: Why is this documentation update necessary or beneficial?
+      placeholder: Explain the importance or reasoning behind the suggested change.
+    validations:
+      required: False
+  - type: dropdown
+    id: urgency
+    attributes:
+      label: Urgency
+      description: How urgently do you believe this documentation update is needed?
+      options:
+        - High
+        - Medium
+        - Low
+      default: 0
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Record
+      options:
+        - label: "I have read the Contributing Guidelines"
+          required: true
+        - label: "I'm a GSSOC'24 contributor"
+          required: false
+        - label: "I have starred the repository"
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,63 @@
+name: ✨ Feature Request
+description: Suggest a feature
+title: "[Feature Request]: "
+labels: enhancement
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for this feature.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature Description
+      description: Please provide a detailed description of the feature you are requesting.
+      placeholder: Describe the new feature or enhancement you'd like to see.
+    validations:
+      required: true
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Use Case
+      description: How would this feature enhance your use of the project?
+      placeholder: Describe a specific use case or scenario where this feature would be beneficial.
+    validations:
+      required: true
+  - type: textarea
+    id: benefits
+    attributes:
+      label: Benefits
+      description: What benefits would this feature bring to the project or community?
+      placeholder: Explain the advantages of implementing this feature.
+  - type: textarea
+    id: screenShots
+    attributes:
+      label: Add ScreenShots
+      description: If any...
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority
+      description: How important is this feature to you?
+      options:
+        - High
+        - Medium
+        - Low
+      default: 0
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Record
+      options:
+        - label: "I have read the Contributing Guidelines"
+          required: true
+        - label: "I'm a GSSOC'24 contributor"
+          required: false
+        - label: "I have starred the repository"
+          required: true

backend/src/routes/post/controller.ts

@@ -124,7 +124,6 @@ export const getPostController = async (req: Request, res: Response) => {
           select: {
             id: true,
             username: true,
-            email: true,
           },
         },
       },
@@ -167,7 +166,6 @@ export const getPostsWithPagination = async (req: Request, res: Response) => {
           select: {
             id: true,
             username: true,
-            email: true,
           },
         },
       },

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.2",

frontend/src/App.tsx

@@ -13,7 +13,10 @@ import NonAuthenticatedRoute from "./components/NonAuthenticatedRoute";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 import Profile from "./pages/Profile";
 import React from "react";
-import Loader from "./components/Loader"; //loader called here
+import Loader from "./components/Loader";
+import ContactUs from "./pages/ContactUs";
+import About from "./pages/About";
+import Policy from "./pages/Policy";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -61,6 +64,24 @@ function App() {
                   </AuthenticatedRoute>
                 }
               />
+              <Route
+                path="/app/contact-us"
+                element={
+                  <ContactUs />
+                }
+              />
+              <Route
+                path="/app/about"
+                element={
+                  <About />
+                }
+              />
+              <Route
+                path="/app/policy"
+                element={
+                  <Policy />
+                }
+              />
               <Route path="*" element={<Navigate to="/app" />} />
             </Routes>
           </div>

frontend/src/components/Footer.tsx

@@ -1,6 +1,16 @@
+import { useRecoilValue } from 'recoil';
 import github from '../assets/github.png';
+import { Link } from 'react-router-dom';
+import { loggedInState } from '../store/atoms/auth';
+import { CgProfile } from 'react-icons/cg';
+import { BsFilePost } from 'react-icons/bs';
+import { FaHome } from 'react-icons/fa';
 
 const Footer = () => {
+
+    const isLoggedIn = useRecoilValue(loggedInState);
+    const currentYear = new Date().getFullYear();
+
   return (
     <div className='bg-black text-white p-10'>
         <div className='md:flex'>
@@ -9,32 +19,62 @@ const Footer = () => {
             Style Share
           </span>
             </div>
-            <div className='md:w-1/2 md:flex'>
-                <div className='md:w-1/2'>
+            <div className='md:w-3/4 md:flex'>
+                <div className='md:w-1/3'>
                     <p className='text-gray-200 font-bold mt-8 md:mt-0'>Company</p>
                     <ul className='text-gray-300 py-4'>
-                        <li className='py-1 cursor-pointer'>About Us</li>
-                        <li className='py-1 cursor-pointer'>Contact Us</li>
-                        <li className='py-1 cursor-pointer'>Careers</li>
-                        <li className='py-1 cursor-pointer'>Brand Center</li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link to='/app/about'>About Us</Link>
+                        </li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link to='/app/contact-us'>Contact Us</Link>
+                        </li>
+                    </ul>
+                </div>
+                <div className='md:w-1/3'>
+                <p className='text-gray-200 font-bold'>Quick Links</p>
+                    <ul className='text-gray-300 py-4 cursor-pointer'>
+                        <li className='py-1 cursor-pointer'>
+                            <Link className='flex items-center gap-1' to='/app/posts'>
+                                All Posts
+                                <BsFilePost size={20} />
+                            </Link>
+                        </li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link className='flex items-center gap-1' to={isLoggedIn ? '/app/profile' : '/app/signin'}>
+                                User profile
+                                <CgProfile size={20} />
+                            </Link>
+                        </li>
                     </ul>
                 </div>
-                <div className='md:w-1/2'>
+                <div className='md:w-1/3'>
                 <p className='text-gray-200 font-bold'>Legal Pages</p>
                     <ul className='text-gray-300 py-4 cursor-pointer'>
-                        <li className='py-1 cursor-pointer'>Privacy Policy</li>
-                        <li className='py-1 cursor-pointer'>Terms and Conditions</li>
-                        <li className='py-1 cursor-pointer'>Cookie Policy</li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link to='/app/policy'>Privacy Policy</Link> 
+                        </li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link to='/app/policy'>Terms and Conditions</Link> 
+                        </li>
+                        <li className='py-1 cursor-pointer'>
+                            <Link to='/app/policy'>Cookie Policy</Link> 
+                        </li>
                     </ul>
                 </div>
             </div>
         </div>
-        <div className='block w-3/4 m-auto mt-20'>
+        <div className='block w-3/4 m-auto mt-10'>
             <div className='flex gap-4 justify-center md:justify-end'>
             <a href="https://github.com/VaibhavArora314/StyleShare"><img src={github} alt="github" className='pointer w-14 h-14'/></a>
+            <Link to='/app'
+            className="flex items-center justify-center p-2 text-white rounded-full focus:outline-none"
+            >
+            <FaHome size={35} />
+          </Link>
             </div>
         </div>
-        <div className='mt-20 text-gray-300 xl:flex justify-center text-md lg:text-xl xl:text-md'>Copyright @ Style Share</div>
+        <div className='mt-10 text-gray-300 xl:flex justify-center text-md lg:text-xl xl:text-md'>Copyright {currentYear} @ Style Share</div>
     </div>
   )
 }

frontend/src/components/PostCard.tsx

@@ -9,28 +9,28 @@ const PostCard = ({ post }: Props) => {
   return (
     <div
       key={post.id}
-      className="bg-gray-800 border border-gray-600 p-4 rounded hover:border-blue-500 hover:-translate-y-2 transition ease-in-out"
+      className="bg-gray-800 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out"
     >
-      <h2 className="text-lg font-semibold mb-2 text-white">{post.title}</h2>
-      <p className="text-gray-400 mb-2">
+      <h2 className="text-xl font-bold mb-3 text-white">{post.title}</h2>
+      <p className="text-gray-300 mb-4">
         {post.description.length > 100
           ? `${post.description.slice(0, 100)}...`
           : post.description}
       </p>
-      <p className="text-gray-500">By: {post.author.username}</p>
-      <div className="mt-2 flex flex-wrap">
+      <p className="text-gray-400 mb-4">By: {post.author.username}</p>
+      <div className="mt-2 flex flex-wrap gap-2">
         {post.tags.map((tag, index) => (
           <span
             key={index}
-            className="text-sm bg-gray-700 text-white px-2 py-1 rounded mr-2 mb-2"
+            className="text-sm bg-gray-700 text-white px-3 py-1 rounded-full"
           >
             {tag}
           </span>
         ))}
       </div>
       <Link
         to={`/app/posts/${post.id}`}
-        className="text-blue-400 hover:text-blue-300"
+        className="inline-block mt-4 text-blue-400 hover:text-blue-300 transition-colors duration-200"
       >
         Read more
       </Link>

frontend/src/pages/About.tsx

@@ -0,0 +1,10 @@
+
+function About() {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default About