Merge pull request #173 from peakshift/feature/new-project-page

Feature: Project Details Page
2026-02-23 15:34:21 +01:00 · 2022-10-04 15:11:10 +03:00
parent 7fe2267af7 fe117ead1a
commit b4bf13e54a
28 changed files with 951 additions and 308 deletions
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -633,6 +633,7 @@ export interface NexusGenFieldTypes {
    searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
    searchUsers: NexusGenRootTypes['User'][]; // [User!]!
    similarMakers: NexusGenRootTypes['User'][]; // [User!]!
+    similarProjects: NexusGenRootTypes['Project'][]; // [Project!]!
    tournamentParticipationInfo: NexusGenRootTypes['ParticipationInfo'] | null; // ParticipationInfo
  }
  Question: { // field return type
@@ -1021,6 +1022,7 @@ export interface NexusGenFieldTypeNames {
    searchProjects: 'Project'
    searchUsers: 'User'
    similarMakers: 'User'
+    similarProjects: 'Project'
    tournamentParticipationInfo: 'ParticipationInfo'
  }
  Question: { // field return type name
@@ -1286,7 +1288,8 @@ export interface NexusGenArgTypes {
      type: NexusGenEnums['POST_TYPE']; // POST_TYPE!
    }
    getProject: { // args
-      id: number; // Int!
+      id?: number | null; // Int
+      tag?: string | null; // String
    }
    getProjectsInTournament: { // args
      roleId?: number | null; // Int
@@ -1325,6 +1328,9 @@ export interface NexusGenArgTypes {
    similarMakers: { // args
      id: number; // Int!
    }
+    similarProjects: { // args
+      id: number; // Int!
+    }
    tournamentParticipationInfo: { // args
      tournamentId: number; // Int!
    }
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -342,7 +342,7 @@ type Query {
  getMakersInTournament(openToConnect: Boolean, roleId: Int, search: String, skip: Int = 0, take: Int = 10, tournamentId: Int!): TournamentMakersResponse!
  getMyDrafts(type: POST_TYPE!): [Post!]!
  getPostById(id: Int!, type: POST_TYPE!): Post!
-  getProject(id: Int!): Project!
+  getProject(id: Int, tag: String): Project!
  getProjectsInTournament(roleId: Int, search: String, skip: Int = 0, take: Int = 10, tournamentId: Int!): TournamentProjectsResponse!
  getTournamentById(id: Int!): Tournament!
  getTournamentToRegister: [Tournament!]!
@@ -357,6 +357,7 @@ type Query {
  searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!
  searchUsers(value: String!): [User!]!
  similarMakers(id: Int!): [User!]!
+  similarProjects(id: Int!): [Project!]!
  tournamentParticipationInfo(tournamentId: Int!): ParticipationInfo
 }

--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -273,9 +273,11 @@ const getProject = extendType({
        t.nonNull.field('getProject', {
            type: "Project",
            args: {
-                id: nonNull(intArg())
+                id: intArg(),
+                tag: stringArg(),
            },
-            resolve(_, { id }) {
+            resolve(_, { id, tag }) {
+                if (tag) return prisma.project.findFirst({ where: { hashtag: tag } })
                return prisma.project.findUnique({
                    where: { id }
                })
@@ -439,6 +441,35 @@ const getLnurlDetailsForProject = extendType({
    }
 })

+const similarProjects = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('similarProjects', {
+            type: "Project",
+            args: {
+                id: nonNull(intArg())
+            },
+            async resolve(parent, { id }, ctx) {
+                const currentProject = await prisma.project.findUnique({ where: { id }, select: { category_id: true } })
+
+                return prisma.project.findMany({
+                    where: {
+                        AND: {
+                            id: {
+                                not: id
+                            },
+                            category_id: {
+                                equals: currentProject.category_id
+                            }
+                        }
+                    },
+                    take: 5,
+                })
+            }
+        })
+    }
+})
+
 const TeamMemberInput = inputObjectType({
    name: 'TeamMemberInput',
    definition(t) {
@@ -1081,6 +1112,7 @@ module.exports = {
    getLnurlDetailsForProject,
    getAllCapabilities,
    checkValidProjectHashtag,
+    similarProjects,

    // Mutations
    createProject,
--- a/prisma/seed/index.js
+++ b/prisma/seed/index.js
@@ -69,7 +69,9 @@ async function main() {

    // await migrateOldImages();

-    await createCapabilities();
+    // await createCapabilities();
+
+    // await createHashtags();
 }

 async function migrateOldImages() {
@@ -238,7 +240,7 @@ async function migrateOldImages() {
    /**
     * Tournament
     **/
-     const tournaments = await prisma.tournament.findMany({
+    const tournaments = await prisma.tournament.findMany({
        select: {
            id: true,
            thumbnail_image: true,
@@ -263,7 +265,7 @@ async function migrateOldImages() {
    /**
     * TournamentPrize
     **/
-     const tournamentPrizes = await prisma.tournamentPrize.findMany({
+    const tournamentPrizes = await prisma.tournamentPrize.findMany({
        select: {
            id: true,
            image: true,
@@ -508,6 +510,24 @@ async function createCapabilities() {
    })
 }

+async function createHashtags() {
+    console.log("Creating Hashtags for projects");
+    const projects = await prisma.project.findMany({ select: { title: true, id: true } });
+    for (let i = 0; i < projects.length; i++) {
+        const project = projects[i];
+        await prisma.project.update({
+            where: { id: project.id },
+            data: {
+                hashtag: project.title.toLowerCase()
+                    .trim()
+                    .replace(/[^\w\s-]/g, '')
+                    .replace(/[\s_-]+/g, '_')
+                    .replace(/^-+|-+$/g, '')
+            }
+        })
+    }
+}
+

 main()
    .catch((e) => {
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,6 @@ import { Loadable, PAGES_ROUTES } from "./utils/routing";
 import ListProjectPage from "./features/Projects/pages/ListProjectPage/ListProjectPage";


-
 // Pages
 const FeedPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "feed_page" */ "./features/Posts/pages/FeedPage/FeedPage")))
 const PostDetailsPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "post_details_page" */ "./features/Posts/pages/PostDetailsPage/PostDetailsPage")))
@@ -23,6 +22,7 @@ const CreatePostPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "
 const HottestPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hottest_page" */ "src/features/Projects/pages/HottestPage/HottestPage")))
 const CategoryPage = Loadable(React.lazy(() => import( /* webpackChunkName: "category_page" */ "src/features/Projects/pages/CategoryPage/CategoryPage")))
 const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage")))
+const ProjectPage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ProjectPage/ProjectPage")))

 const HackathonsPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "hackathons_page" */ "./features/Hackathons/pages/HackathonsPage/HackathonsPage")))

@@ -100,6 +100,8 @@ function App() {
          <Route path={PAGES_ROUTES.projects.byCategoryId} element={<CategoryPage />} />
          <Route path={PAGES_ROUTES.projects.default} element={<ExplorePage />} />
          <Route path={PAGES_ROUTES.projects.listProject} element={<ListProjectPage />} />
+          <Route path={PAGES_ROUTES.projects.projectPage} element={<ProjectPage />} />
+          <Route path={PAGES_ROUTES.projects.catchProject} element={<Navigate replace to={PAGES_ROUTES.projects.default} />} />

          <Route path={PAGES_ROUTES.blog.storyById} element={<PostDetailsPage postType='story' />} />
          <Route path={PAGES_ROUTES.blog.feed} element={<FeedPage />} />
--- a/src/Components/Badge/Badge.tsx
+++ b/src/Components/Badge/Badge.tsx
@@ -23,7 +23,7 @@ const badgrColor: UnionToObjectKeys<Props, 'color'> = {
 }

 const badgeSize: UnionToObjectKeys<Props, 'size'> = {
-    sm: "px-8 py-4 text-body6",
+    sm: "px-12 py-4 text-body5",
    md: "px-16 py-8 text-body4",
    lg: "px-24 py-12 text-body3"
 }
--- a/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
@@ -21,11 +21,12 @@ interface Props {
            tags: Array<Pick<Tag, 'id' | 'icon' | 'title'>>
        }
    >
+    onlyMd?: boolean
 }

-export default function StoriesCard({ stories, isOwner }: Props) {
+export default function StoriesCard({ stories, isOwner, onlyMd }: Props) {
    return (
-        <Card>
+        <Card onlyMd={onlyMd}>
            <p className="text-body2 font-bold">Stories ({stories.length})</p>
            {stories.length > 0 &&
                <ul className="">
@@ -51,12 +52,12 @@ export default function StoriesCard({ stories, isOwner }: Props) {
                </ul>}
            {stories.length === 0 &&
                <div className="flex flex-col gap-16 mt-24">
-                    <p className="text-body3 font-medium">
+                    <p className="text-body4 text-gray-600">
                        😐 No Stories Added Yet
                    </p>
-                    <p className="text-body5 text-gray-500">
+                    {/* <p className="text-body5 text-gray-500">
                        The maker have not written any stories yet
-                    </p>
+                    </p> */}
                    {isOwner && <Button
                        href='/blog/create-post'
                        color='primary'
--- a/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx
@@ -13,12 +13,13 @@ interface Props {
        | 'end_date'
    >[]
    isOwner?: boolean;
+    onlyMd?: boolean;
 }

-export default function TournamentsCard({ tournaments, isOwner }: Props) {
+export default function TournamentsCard({ tournaments, isOwner, onlyMd }: Props) {

    return (
-        <Card>
+        <Card onlyMd={onlyMd}>
            <p className="text-body2 font-bold">🏆  Tournaments </p>
            <div className="mt-16">
                {tournaments.length === 0 && <>
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -14,6 +14,7 @@ import UpdateProjectContextProvider from './updateProjectContext'
 import { useNavigate } from 'react-router-dom'
 import { createRoute } from 'src/utils/routing'
 import { nanoid } from "@reduxjs/toolkit";
+import { Helmet } from "react-helmet";


 interface Props {
@@ -43,9 +44,8 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
    hashtag: yup
        .string()
        .required("please provide a project tag")
-        .transform(v => v ? '#' + v : undefined)
        .matches(
-            /^#[^ !@#$%^&*(),.?":{}|<>]*$/,
+            /^[^ !@#$%^&*(),.?":{}|<>]*$/,
            "your project's tag can only contain letters, numbers and '_’"
        )
        .min(3, "your project tag must be longer than 2 characters.")
@@ -143,7 +143,8 @@ export default function FormContainer(props: PropsWithChildren<Props>) {

    const query = useProjectDetailsQuery({
        variables: {
-            projectId: id!
+            projectId: id!,
+            projectTag: null,
        },
        skip: !isUpdating,
        onCompleted: (res) => {
@@ -160,7 +161,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
                        tagline: data.tagline,
                        website: data.website,
                        description: data.description,
-                        hashtag: data.hashtag.slice(1),
+                        hashtag: data.hashtag,
                        twitter: data.twitter,
                        discord: data.discord,
                        slack: data.slack,
@@ -190,7 +191,10 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
    if (query.loading)
        return <LoadingPage />

-    return (
+    return (<>
+        <Helmet>
+            <title>{isUpdating ? "Update project" : "List a project"}</title>
+        </Helmet>
        <FormProvider {...methods} >
            <UpdateProjectContextProvider permissions={query.data?.getProject.permissions ?? Object.values(ProjectPermissionEnum)}>
                <form onSubmit={methods.handleSubmit(onSubmit)}>
@@ -198,7 +202,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
                </form>
            </UpdateProjectContextProvider>
        </FormProvider>
-    )
+    </>)
 }


--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -3,12 +3,15 @@ import Card from 'src/Components/Card/Card'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
 import { useFormContext } from "react-hook-form"
 import { IListProjectForm } from "../FormContainer/FormContainer";
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
 import { useAppDispatch } from 'src/utils/hooks';
 import { openModal } from 'src/redux/features/modals.slice';
 import { useCreateProjectMutation, useUpdateProjectMutation, UpdateProjectInput } from 'src/graphql'
+import { Navigate, useNavigate } from 'react-router-dom';
+import { createRoute } from 'src/utils/routing';
+import { wrapLink } from 'src/utils/hoc';

 interface Props {
    currentTab: keyof typeof tabs
@@ -20,8 +23,8 @@ export default function SaveChangesCard(props: Props) {

    const { handleSubmit, formState: { isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
    const dispatch = useAppDispatch();
-
    const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
+    const [navigateToCreatedProject, setNavigateToCreatedProject] = useState(false)

    const [update, updatingStatus] = useUpdateProjectMutation();
    const [create, creatingStatus] = useCreateProjectMutation()
@@ -29,7 +32,7 @@ export default function SaveChangesCard(props: Props) {
    const isLoading = updatingStatus.loading || creatingStatus.loading


-    const [img, name, tagline] = watch(['thumbnail_image', 'title', 'tagline',])
+    const [hashtag, img, name, tagline] = watch(['hashtag', 'thumbnail_image', 'title', 'tagline',])

    const clickCancel = () => {
        if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
@@ -38,7 +41,6 @@ export default function SaveChangesCard(props: Props) {

    const clickSubmit = handleSubmit<IListProjectForm>(async data => {
        try {
-
            const input: UpdateProjectInput = {
                ...data,
                members: data.members.map(m => ({ id: m.id, role: m.role })),
@@ -67,6 +69,7 @@ export default function SaveChangesCard(props: Props) {
                    }
                }
            }))
+            setNavigateToCreatedProject(true);
        }
    }, (errors) => {
        NotificationsService.error("Please fill all the required fields");
@@ -112,10 +115,12 @@ export default function SaveChangesCard(props: Props) {
            </Button>
    }, [clickSubmit, isDirty, isLoading, isUpdating, props.currentTab, props.onNext])

+    if (navigateToCreatedProject) return <Navigate to={createRoute({ type: "project", tag: hashtag })} />
+

    return (
        <Card className='flex flex-col gap-24'>
-            <div className='flex gap-8 items-center'>
+            {wrapLink(<div className='flex gap-8 items-center'>
                {img ?
                    <Avatar width={48} src={img.url} /> :
                    <div className="bg-gray-50 border border-gray-200 rounded-full w-48 h-48 shrink-0"></div>
@@ -124,7 +129,8 @@ export default function SaveChangesCard(props: Props) {
                    <p className={`text-body4 text-black font-medium overflow-hidden text-ellipsis`}>{name || "Product preview"}</p>
                    {<p className={`text-body6 text-gray-600 text-ellipsis overflow-hidden whitespace-nowrap`}>{tagline || "Provide some more details."}</p>}
                </div>
-            </div>
+            </div>, isUpdating ? createRoute({ type: "project", tag: hashtag }) : undefined)}
+
            <div className="border-b border-gray-200"></div>
            {/* <p className="hidden md:block text-body5">{trimText(profileQuery.data.profile.bio, 120)}</p> */}
            <div className="flex flex-col gap-16">
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
@@ -1,8 +1,5 @@
 import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu';
-import { ComponentProps } from 'react'
-import { NestedValue } from 'react-hook-form'
 import { FaChevronDown, FaRegTrashAlt, } from 'react-icons/fa';
-import UsersInput from 'src/Components/Inputs/UsersInput/UsersInput'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import { Team_Member_Role } from 'src/graphql';
 import { Value } from './TeamMembersInput'
--- a/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
@@ -0,0 +1,130 @@
+import linkifyHtml from 'linkifyjs/lib/linkify-html'
+import { useState } from 'react'
+import { MdLocalFireDepartment } from 'react-icons/md'
+import Button from 'src/Components/Button/Button'
+import Card from 'src/Components/Card/Card'
+import Lightbox from 'src/Components/Lightbox/Lightbox'
+import { ProjectDetailsQuery, ProjectLaunchStatusEnum, ProjectPermissionEnum, } from 'src/graphql'
+import { openModal } from 'src/redux/features/modals.slice'
+import { setVoteAmount } from 'src/redux/features/vote.slice'
+import { numberFormatter } from 'src/utils/helperFunctions'
+import { useAppDispatch } from 'src/utils/hooks'
+import { createRoute } from 'src/utils/routing'
+import LinksCard from '../LinksCard/LinksCard'
+
+interface Props {
+    project: Pick<ProjectDetailsQuery['getProject'],
+        | "id"
+        | "cover_image"
+        | "thumbnail_image"
+        | "title"
+        | "category"
+        | "permissions"
+        | "launch_status"
+        | "description"
+        | "screenshots"
+        | "tagline"
+        | "website"
+        | "votes_count"
+        | 'discord'
+        | 'website'
+        | 'github'
+        | 'twitter'
+        | 'slack'
+        | 'telegram'
+    >
+}
+
+
+export default function AboutCard({ project }: Props) {
+
+    const dispatch = useAppDispatch();
+
+    const [screenshotsOpen, setScreenshotsOpen] = useState(-1);
+
+    const onVote = (votes?: number) => {
+        dispatch(setVoteAmount(votes ?? 10));
+        dispatch(openModal({
+            Modal: 'VoteCard', props: {
+                projectId: project.id,
+                title: project.title,
+                initVotes: votes
+            }
+        }))
+    }
+
+
+    const canEdit = project.permissions.includes(ProjectPermissionEnum.UpdateInfo);
+
+    return (
+        <Card defaultPadding={false} onlyMd>
+            {/* Cover Image */}
+            <div className="hidden md:block relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
+                <img className="w-full h-full object-cover rounded-12 md:rounded-0 md:rounded-t-16" src={project.cover_image} alt="" />
+                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                </div>
+                <div className="absolute left-24 bottom-0 translate-y-1/2 w-[108px] aspect-square">
+                    <img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
+                </div>
+            </div>
+            <div className="md:p-24 md:pt-0 flex flex-col gap-24">
+                {/* Title & Basic Info */}
+                <div className="flex flex-col gap-24 relative">
+                    <div className="flex flex-wrap justify-end items-center gap-16 min-h-[40px] mt-12">
+                        {canEdit && <Button size="sm" color="gray" href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>}
+                        <Button size="sm" variant='outline' color='gray' className='hidden md:block hover:!text-red-500 hover:!border-red-200 hover:!bg-red-50' onClick={() => onVote()}>
+                            <MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
+                        </Button>
+                    </div>
+                    <div className='flex flex-col gap-8 items-start justify-between -mt-12'>
+                        <a href={project.website} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project.title}</h3></a>
+                        <p className="text-body4 text-gray-600">{project.tagline}</p>
+                        <div>
+                            <span className="font-medium text-body5 text-gray-900">{project.category.icon} {project.category.title}</span>
+                        </div>
+                    </div>
+                    <Button size="sm" fullWidth variant='outline' color='gray' className='md:hidden hover:!text-red-500 hover:!border-red-200 hover:!bg-red-50' onClick={() => onVote()}>
+                        <MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
+                    </Button>
+                </div>
+                <div className="md:hidden">
+                    <LinksCard links={project} />
+                </div>
+
+                {/* About */}
+                <div>
+                    <div className="text-body4 text-gray-600 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
+                        __html: linkifyHtml(project.description, {
+                            className: ' text-blue-500 underline',
+                            defaultProtocol: 'https',
+                            target: "_blank",
+                            rel: 'noreferrer'
+                        })
+                    }}></div>
+
+                </div>
+                {project.screenshots.length > 0 && <>
+                    <div className="">
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
+                            {project.screenshots.slice(0, 4).map((screenshot, idx) => <div
+                                key={idx}
+                                className="w-full relative pt-[56%] cursor-pointer bg-gray-100 border rounded-10 overflow-hidden"
+                                onClick={() => setScreenshotsOpen(idx)}
+                            >
+                                <img src={screenshot} className="absolute top-0 left-0 w-full h-full object-cover" alt='' />
+                            </div>)}
+                        </div>
+                    </div>
+                    <Lightbox
+                        images={project.screenshots}
+                        isOpen={screenshotsOpen !== -1}
+                        initOpenIndex={screenshotsOpen}
+                        onClose={() => setScreenshotsOpen(-1)}
+                    />
+                </>}
+            </div>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Badge from 'src/Components/Badge/Badge'
+import Card from 'src/Components/Card/Card'
+import { ProjectDetailsQuery } from 'src/graphql'
+
+
+interface Props {
+    capabilities: ProjectDetailsQuery['getProject']['capabilities']
+}
+
+
+export default function CapabilitiesCard({ capabilities }: Props) {
+    return (
+        <Card onlyMd>
+            <p className="text-body6 max-md:uppercase max-md:text-gray-400 md:text-body2 font-bold">🦾  Capabilities</p>
+            <div className="mt-16">
+                {capabilities.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No capabilities added</p>
+                </>}
+                <div className="flex flex-wrap gap-8">
+                    {capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
+                </div>
+            </div>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/Components/LinksCard/LinksCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/LinksCard/LinksCard.tsx
@@ -0,0 +1,78 @@
+import Card from 'src/Components/Card/Card'
+import { Project } from 'src/graphql'
+import { FaDiscord, } from 'react-icons/fa';
+import { FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { NotificationsService, } from 'src/services'
+
+interface Props {
+    links: Pick<Project, 'discord' | 'website' | 'github' | 'twitter' | 'slack' | 'telegram'>
+}
+
+export default function LinksCard({ links }: Props) {
+    const linksList = [
+        {
+            value: links.discord,
+            text: links.discord,
+            icon: FaDiscord,
+            colors: "bg-violet-100 text-violet-900",
+        },
+        {
+            value: links.website,
+            text: links.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
+            icon: FiGlobe,
+            colors: "bg-gray-100 text-gray-900",
+            url: links.website
+        },
+        {
+            value: links.twitter,
+            text: links.twitter,
+            icon: FiTwitter,
+            colors: "bg-blue-100 text-blue-500",
+            url: links.twitter
+        },
+        {
+            value: links.github,
+            text: links.github,
+            icon: FiGithub,
+            colors: "bg-pink-100 text-pink-600",
+            url: links.github
+        },
+    ];
+
+    return (
+        <Card onlyMd>
+            <p className="text-body2 font-bold mb-16 hidden md:block">🔗  Links</p>
+            <div className="">
+                {linksList.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No links added</p>
+                </>}
+                <div className="flex flex-wrap gap-16">
+                    {linksList.filter(link => !!link.value).map((link, idx) =>
+                    (link.url ? <a
+                        key={idx}
+                        href={link.url!}
+                        className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                        target='_blank'
+                        rel="noreferrer">
+                        <link.icon className="scale-125" />
+                    </a>
+                        :
+                        <CopyToClipboard
+                            text={link.value!}
+                            onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
+                        >
+                            <button
+                                key={idx}
+                                onClick={() => { }}
+                                className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                            >
+                                <link.icon className="scale-125" />
+                            </button>
+                        </CopyToClipboard>
+                    ))}
+                </div>
+            </div>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom'
+import Badge from 'src/Components/Badge/Badge'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { ProjectDetailsQuery } from 'src/graphql'
+import { createRoute } from 'src/utils/routing'
+
+
+interface Props {
+    members: ProjectDetailsQuery['getProject']['members']
+    recruit_roles: ProjectDetailsQuery['getProject']['recruit_roles']
+
+}
+
+
+export default function MakersCard({ members, recruit_roles }: Props) {
+    return (
+        <Card onlyMd>
+            <p className="text-body6 max-md:uppercase max-md:text-gray-400 md:text-body2 font-bold">👾 Makers</p>
+            <div className="mt-16">
+                <div className="flex flex-wrap gap-8">
+                    {members.length === 0 && <p className="text-body4 text-gray-500">Not listed</p>}
+                    {members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
+                        <Avatar
+                            width={40}
+                            src={m.user.avatar}
+                            renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
+                                <Avatar width={48} src={m.user.avatar} />
+                                <div className='overflow-hidden'>
+                                    <p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>
+                                    <p className={`text-body6 text-gray-600`}>{m.user.jobTitle}</p>
+                                </div>
+                            </div>}
+                        />
+                    </Link>)}
+                </div>
+            </div>
+            <p className="text-body6 uppercase font-medium text-gray-400 mt-24">Open roles</p>
+            <div className="mt-8">
+                {recruit_roles.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No open roles for now</p>
+                </>}
+                <div className="flex flex-wrap gap-8">
+                    {recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
+                </div>
+            </div>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/Components/OpenRolesCard/OpenRolesCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/OpenRolesCard/OpenRolesCard.tsx
@@ -0,0 +1,25 @@
+import Badge from 'src/Components/Badge/Badge'
+import Card from 'src/Components/Card/Card'
+import { ProjectDetailsQuery } from 'src/graphql'
+
+
+interface Props {
+    recruit_roles: ProjectDetailsQuery['getProject']['recruit_roles']
+}
+
+
+export default function OpenRolesCard({ recruit_roles }: Props) {
+    return (
+        <Card onlyMd>
+            <p className="text-body2 font-bold">👀  Open roles</p>
+            <div className="mt-16">
+                {recruit_roles.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No open roles for now</p>
+                </>}
+                <div className="flex flex-wrap gap-16">
+                    {recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
+                </div>
+            </div>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.stories.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import SimilarProjectsCard from './SimilarProjectsCard';
+
+export default {
+    title: 'Projects/Project Page/Similar Projects Card',
+    component: SimilarProjectsCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof SimilarProjectsCard>;
+
+
+const Template: ComponentStory<typeof SimilarProjectsCard> = (args) => <div className="max-w-[326px]"><SimilarProjectsCard {...args as any} ></SimilarProjectsCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
--- a/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
@@ -0,0 +1,38 @@
+
+import { Link } from 'react-router-dom'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { User, useSimilarProjectsQuery } from 'src/graphql'
+import { createRoute } from 'src/utils/routing'
+
+interface Props {
+    id: number
+}
+
+export default function SimilarProjectsCard({ id }: Props) {
+
+    const query = useSimilarProjectsQuery({ variables: { projectId: id } })
+
+    if (query.loading) return null;
+
+    if (query.data?.similarProjects.length === 0) return null;
+
+    return (
+        <Card onlyMd>
+            <h3 className="text-body2 font-bolder">🚀 Similar projects</h3>
+            <ul className='flex flex-col'>
+                {query.data?.similarProjects.map(project => {
+                    return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="md:border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
+                        <li className="flex items-center gap-12">
+                            <img className='w-48 aspect-square rounded-12 border border-gray-100' alt='' src={project.thumbnail_image} />
+                            <div className='overflow-hidden'>
+                                <p className="text-body4 text-gray-800 font-medium whitespace-nowrap overflow-hidden text-ellipsis">{project.title}</p>
+                                <p className="text-body5 text-gray-500">{project.category.icon} {project.category.title}</p>
+                            </div>
+                        </li>
+                    </Link>
+                })}
+            </ul>
+        </Card>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
@@ -1,5 +1,5 @@
-query ProjectDetails($projectId: Int!) {
-  getProject(id: $projectId) {
+query ProjectDetails($projectId: Int, $projectTag: String) {
+  getProject(id: $projectId, tag: $projectTag) {
    id
    title
    tagline
@@ -56,3 +56,17 @@ query ProjectDetails($projectId: Int!) {
    }
  }
 }
+
+query SimilarProjects($projectId: Int!) {
+  similarProjects(id: $projectId) {
+    id
+    title
+    hashtag
+    thumbnail_image
+    category {
+      id
+      icon
+      title
+    }
+  }
+}
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
@@ -32,7 +32,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
                <Skeleton height='100%' className='!leading-inherit' />
                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center" onClick={onClose}><MdClose className=' inline-block' /></button>
            </div>
-            <div className="p-24">
+            <div className="p-24 flex flex-col gap-24">
                <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
                    <div className="flex-shrink-0 w-[108px] h-[108px] ">
                        <Skeleton height='100%' className='rounded-24 border-2 border-white' />
@@ -46,26 +46,24 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
                    </div>

                    <div className="flex-shrink-0 w-full md:w-auto  md:flex ml-auto gap-16 self-stretch">
-                        {/* <Button color='primary' size='md' className=" my-16" href={project.website} newTab >Visit <BsJoystick /></Button> */}
-                        {/* <VoteButton  onVote={onVote} /> */}
-                        {/* <VoteButton fullWidth votes={project.votes_count} direction='vertical' onVote={onVote} /> */}
-                        {/* {isWalletConnected ?
-                            :
-                            <Button onClick={onConnectWallet} size='md' className="border border-gray-200 bg-gray-100 hover:bg-gray-50 active:bg-gray-100 my-16"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet to Vote</Button>
-                        } */}
                        <Button fullWidth variant='outline' color='gray' className='!px-8'>
                            <p className='opacity-0'>votes</p>
                        </Button>
                    </div>
                </div>
-                <p className="mt-40 text-body4 leading-normal h-[120px]">
+                <p className="text-body4 leading-normal">
                    <Skeleton width='98%' />
                    <Skeleton width='90%' />
                    <Skeleton width='70%' />
                    <Skeleton width='40%' />
                </p>

-                <div className="mt-40">
+                <div className="flex flex-wrap gap-16">
+                    <Skeleton width='40px' height='40px' className='rounded-full' />
+                    <Skeleton width='40px' height='40px' className='rounded-full' />
+                </div>
+
+                <div >
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
                        {
                            Array(4).fill(0).map((_, idx) => <div key={idx} className="w-full relative pt-[56%] cursor-pointer bg-gray-200 shadow-sm rounded-10 overflow-hidden">
@@ -74,10 +72,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
                        }
                    </div>
                </div>
-                <hr className="my-40" />
-                <div className="text-center h-[100px]">
-
-                </div>
+                <div className="text-center h-[46px]"></div>
            </div>
        </motion.div>
    )
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -41,7 +41,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
    const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)

    const { data, loading, error } = useProjectDetailsQuery({
-        variables: { projectId: projectId! },
+        variables: { projectId: projectId!, projectTag: null },
        onCompleted: data => {
            dispatch(setProject(data.getProject))
        },
@@ -51,10 +51,6 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
        skip: !Boolean(projectId)
    });

-    useEffect(() => {
-        return () => {
-        }
-    }, [dispatch]);

    const closeModal = () => {
        props.onClose?.();
@@ -73,9 +69,6 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
    if (loading || !data?.getProject)
        return <ProjectCardSkeleton onClose={closeModal} direction={direction} isPageModal={props.isPageModal} />;

-    const onConnectWallet = async () => {
-        Wallet_Service.connectWallet()
-    }

    const project = data.getProject;

@@ -109,35 +102,17 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
        },
    ];

-
-
-    const canEdit = project.permissions.includes(ProjectPermissionEnum.UpdateInfo);
-
    const onVote = (votes?: number) => {
        dispatch(setVoteAmount(votes ?? 10));
        dispatch(openModal({
            Modal: 'VoteCard', props: {
                projectId: project.id,
+                title: project.title,
                initVotes: votes
            }
        }))
    }

-
-    const onClaim = () => {
-        if (!isWalletConnected) {
-            dispatch(scheduleModal({
-                Modal: 'Claim_GenerateSignatureCard',
-            }))
-            dispatch(openModal({
-                Modal: 'Login_ScanningWalletCard'
-            }))
-        } else
-            dispatch(openModal({
-                Modal: 'Claim_GenerateSignatureCard',
-            }))
-    }
-
    return (
        <div
            className={`modal-card max-w-[676px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
@@ -145,14 +120,16 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
            {/* Cover Image */}
            <div className="relative h-[120px] lg:h-[80px]">
                <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
-                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
-                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
-                </div>
-                <div className="absolute top-16 md:top-24 right-24 flex gap-8">
-                    {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
-                        <Link className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
-                    <button className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
+                <div className="absolute w-full px-16 md:px-24 top-16 md:top-24 flex justify-between items-center">
+                    <div className="flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                        {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                        {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                    </div>
+                    <div className="flex gap-8">
+                        {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
+                            <Link className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
+                        <button className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
+                    </div>
                </div>
            </div>
            <div className="p-24 flex flex-col gap-24">
@@ -252,7 +229,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                            {project.capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
                        </div>
                    </div>}
-                <hr className="" />
+
                {project.members.length > 0 &&
                    <div>
                        <p className="text-body6 uppercase font-medium text-gray-400 mb-8">MAKERS</p>
@@ -272,6 +249,9 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                            </Link>)}
                        </div>
                    </div>}
+
+                <Button color='white' fullWidth href={createRoute({ type: "project", tag: project.hashtag })} onClick={props.onClose}>View project details</Button>
+
                {/* <div className="text-center">
                    <h3 className="text-body4 font-regular">Are you the creator of this project</h3>
                    <Button
--- a/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
@@ -0,0 +1,111 @@
+import { useParams } from "react-router-dom"
+import LoadingPage from "src/Components/LoadingPage/LoadingPage"
+import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"
+import { ProjectLaunchStatusEnum, useProjectDetailsQuery } from "src/graphql"
+import { Helmet } from 'react-helmet'
+import { useAppDispatch, useMediaQuery } from 'src/utils/hooks';
+import styles from './styles.module.scss'
+import { MEDIA_QUERIES } from "src/utils/theme"
+import { setProject } from "src/redux/features/project.slice"
+import LinksCard from "./Components/LinksCard/LinksCard"
+import CapabilitiesCard from "./Components/CapabilitiesCard/CapabilitiesCard"
+import OpenRolesCard from "./Components/OpenRolesCard/OpenRolesCard"
+import TournamentsCard from "src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard"
+import StoriesCard from "src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard"
+import MakersCard from "./Components/MakersCard/MakersCard"
+import AboutCard from "./Components/AboutCard/AboutCard"
+import SimilarProjectsCard from "./Components/SimilarProjectsCard/SimilarProjectsCard"
+
+export default function ProjectPage() {
+
+    const { tag } = useParams()
+
+    const dispatch = useAppDispatch();
+
+    const { data, loading, error } = useProjectDetailsQuery({
+        variables: { projectId: null, projectTag: tag! },
+        onCompleted: data => {
+            dispatch(setProject(data.getProject))
+        },
+        onError: () => {
+            dispatch(setProject(null));
+        },
+        skip: !Boolean(tag)
+    });
+
+
+    const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
+
+
+
+    if (loading)
+        return <LoadingPage />
+
+    if (!data?.getProject)
+        return <NotFoundPage />
+
+    if (error) throw new Error("Couldn't fetch the project", { cause: error })
+
+
+    const project = data.getProject;
+
+    return (
+        <>
+            <Helmet>
+                <title>{project.title}</title>
+                <meta property="og:title" content={project.title} />
+
+                {project.lightning_address &&
+                    <meta name="lightning" content={`lnurlp:${project.lightning_address}`} />
+                }
+                <meta property="og:image" content={project.cover_image} />
+            </Helmet>
+            <div className="relative w-full md:hidden h-[120px]">
+                <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
+                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                </div>
+                <div className="absolute left-24 bottom-0 translate-y-1/2 w-[108px] aspect-square">
+                    <img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
+                </div>
+            </div>
+            <div className={`content-container md:pt-32 bg-white md:bg-inherit`}
+            >
+                <div className={` ${styles.grid}`}
+                >{isMediumScreen ?
+                    <>
+                        <aside>
+                            <LinksCard links={project} />
+                            <CapabilitiesCard capabilities={project.capabilities} />
+                            <TournamentsCard tournaments={[]} />
+                        </aside>
+                        <main className="min-w-0">
+
+                            <AboutCard project={project} />
+                            <StoriesCard stories={[]} />
+                        </main>
+                        <aside className="min-w-0">
+                            <MakersCard members={project.members} recruit_roles={project.recruit_roles} />
+                            <SimilarProjectsCard id={project.id} />
+                        </aside>
+                    </>
+                    :
+                    <>
+                        <main>
+                            <AboutCard project={project} />
+                            <CapabilitiesCard capabilities={project.capabilities} />
+                            <hr className="bg-gray-100" />
+                            <MakersCard members={project.members} recruit_roles={project.recruit_roles} />
+                            <hr className="bg-gray-100" />
+                            <StoriesCard onlyMd stories={[]} />
+                            <TournamentsCard onlyMd tournaments={[]} />
+                            <hr className="bg-gray-100" />
+                            <SimilarProjectsCard id={project.id} />
+                        </main>
+                    </>
+                    }</div>
+            </div>
+        </>
+    )
+}
--- a/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx
@@ -7,6 +7,7 @@ import { PaymentStatus, useVote } from 'src/utils/hooks';
 import Confetti from "react-confetti";
 import { useWindowSize } from '@react-hookz/web';
 import { Vote_Item_Type } from 'src/graphql';
+import IconButton from 'src/Components/IconButton/IconButton';

 const defaultOptions = [
    { text: '100 sat', value: 100 },
@@ -17,6 +18,7 @@ const defaultOptions = [

 interface Props extends ModalCard {
    projectId: number;
+    title?: string;
    initVotes?: number;
 }

@@ -69,8 +71,12 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
            exit='exit'
            className="modal-card max-w-[343px] p-24 rounded-xl relative"
        >
-            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
-            <h2 className='text-h5 font-bold'>Vote for this Project</h2>
+            <div className="flex items-start gap-12">
+                <h2 className='text-h5 font-bold'>Vote for {props.title ?? "project"}</h2>
+                <IconButton onClick={onClose} >
+                    <IoClose className='text-body2' />
+                </IconButton>
+            </div>
            <form onSubmit={requestPayment} className="mt-32 ">
                <label className="block text-gray-700 text-body4 mb-2 ">
                    Enter Amount
--- a/src/features/Projects/pages/ProjectPage/styles.module.scss
+++ b/src/features/Projects/pages/ProjectPage/styles.module.scss
@@ -0,0 +1,30 @@
+.grid {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 24px;
+  grid-template-areas: "main";
+
+  > aside:first-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    grid-area: aside1;
+  }
+  > main {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    grid-area: main;
+  }
+  > aside:last-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    grid-area: aside2;
+  }
+
+  @media screen and (min-width: 768px) {
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-areas: "aside1 main aside2";
+  }
+}
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -476,6 +476,7 @@ export type Query = {
  searchProjects: Array<Project>;
  searchUsers: Array<User>;
  similarMakers: Array<User>;
+  similarProjects: Array<Project>;
  tournamentParticipationInfo: Maybe<ParticipationInfo>;
 };

@@ -538,7 +539,8 @@ export type QueryGetPostByIdArgs = {


 export type QueryGetProjectArgs = {
-  id: Scalars['Int'];
+  id: InputMaybe<Scalars['Int']>;
+  tag: InputMaybe<Scalars['String']>;
 };


@@ -597,6 +599,11 @@ export type QuerySimilarMakersArgs = {
 };


+export type QuerySimilarProjectsArgs = {
+  id: Scalars['Int'];
+};
+
+
 export type QueryTournamentParticipationInfoArgs = {
  tournamentId: Scalars['Int'];
 };
@@ -1072,12 +1079,20 @@ export type GetTournamentsToRegisterQueryVariables = Exact<{ [key: string]: neve
 export type GetTournamentsToRegisterQuery = { __typename?: 'Query', getTournamentToRegister: Array<{ __typename?: 'Tournament', id: number, title: string }> };

 export type ProjectDetailsQueryVariables = Exact<{
-  projectId: Scalars['Int'];
+  projectId: InputMaybe<Scalars['Int']>;
+  projectTag: InputMaybe<Scalars['String']>;
 }>;


 export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, permissions: Array<ProjectPermissionEnum>, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };

+export type SimilarProjectsQueryVariables = Exact<{
+  projectId: Scalars['Int'];
+}>;
+
+
+export type SimilarProjectsQuery = { __typename?: 'Query', similarProjects: Array<{ __typename?: 'Project', id: number, title: string, hashtag: string, thumbnail_image: string, category: { __typename?: 'Category', id: number, icon: string | null, title: string } }> };
+
 export type GetAllRolesQueryVariables = Exact<{ [key: string]: never; }>;


@@ -1269,13 +1284,13 @@ export const OfficialTagsDocument = gql`
 * });
 */
 export function useOfficialTagsQuery(baseOptions?: Apollo.QueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+      }
 export function useOfficialTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+        }
 export type OfficialTagsQueryHookResult = ReturnType<typeof useOfficialTagsQuery>;
 export type OfficialTagsLazyQueryHookResult = ReturnType<typeof useOfficialTagsLazyQuery>;
 export type OfficialTagsQueryResult = Apollo.QueryResult<OfficialTagsQuery, OfficialTagsQueryVariables>;
@@ -1307,13 +1322,13 @@ export const SearchUsersDocument = gql`
 * });
 */
 export function useSearchUsersQuery(baseOptions: Apollo.QueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+      }
 export function useSearchUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+        }
 export type SearchUsersQueryHookResult = ReturnType<typeof useSearchUsersQuery>;
 export type SearchUsersLazyQueryHookResult = ReturnType<typeof useSearchUsersLazyQuery>;
 export type SearchUsersQueryResult = Apollo.QueryResult<SearchUsersQuery, SearchUsersQueryVariables>;
@@ -1344,13 +1359,13 @@ export const NavCategoriesDocument = gql`
 * });
 */
 export function useNavCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+      }
 export function useNavCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+        }
 export type NavCategoriesQueryHookResult = ReturnType<typeof useNavCategoriesQuery>;
 export type NavCategoriesLazyQueryHookResult = ReturnType<typeof useNavCategoriesLazyQuery>;
 export type NavCategoriesQueryResult = Apollo.QueryResult<NavCategoriesQuery, NavCategoriesQueryVariables>;
@@ -1385,13 +1400,13 @@ export const SearchProjectsDocument = gql`
 * });
 */
 export function useSearchProjectsQuery(baseOptions: Apollo.QueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+      }
 export function useSearchProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+        }
 export type SearchProjectsQueryHookResult = ReturnType<typeof useSearchProjectsQuery>;
 export type SearchProjectsLazyQueryHookResult = ReturnType<typeof useSearchProjectsLazyQuery>;
 export type SearchProjectsQueryResult = Apollo.QueryResult<SearchProjectsQuery, SearchProjectsQueryVariables>;
@@ -1424,13 +1439,13 @@ export const MeDocument = gql`
 * });
 */
 export function useMeQuery(baseOptions?: Apollo.QueryHookOptions<MeQuery, MeQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+      }
 export function useMeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeQuery, MeQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+        }
 export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
 export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
 export type MeQueryResult = Apollo.QueryResult<MeQuery, MeQueryVariables>;
@@ -1461,13 +1476,13 @@ export const DonationsStatsDocument = gql`
 * });
 */
 export function useDonationsStatsQuery(baseOptions?: Apollo.QueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+      }
 export function useDonationsStatsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+        }
 export type DonationsStatsQueryHookResult = ReturnType<typeof useDonationsStatsQuery>;
 export type DonationsStatsLazyQueryHookResult = ReturnType<typeof useDonationsStatsLazyQuery>;
 export type DonationsStatsQueryResult = Apollo.QueryResult<DonationsStatsQuery, DonationsStatsQueryVariables>;
@@ -1501,9 +1516,9 @@ export type DonateMutationFn = Apollo.MutationFunction<DonateMutation, DonateMut
 * });
 */
 export function useDonateMutation(baseOptions?: Apollo.MutationHookOptions<DonateMutation, DonateMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
+      }
 export type DonateMutationHookResult = ReturnType<typeof useDonateMutation>;
 export type DonateMutationResult = Apollo.MutationResult<DonateMutation>;
 export type DonateMutationOptions = Apollo.BaseMutationOptions<DonateMutation, DonateMutationVariables>;
@@ -1537,9 +1552,9 @@ export type ConfirmDonationMutationFn = Apollo.MutationFunction<ConfirmDonationM
 * });
 */
 export function useConfirmDonationMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
+      }
 export type ConfirmDonationMutationHookResult = ReturnType<typeof useConfirmDonationMutation>;
 export type ConfirmDonationMutationResult = Apollo.MutationResult<ConfirmDonationMutation>;
 export type ConfirmDonationMutationOptions = Apollo.BaseMutationOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>;
@@ -1581,13 +1596,13 @@ export const GetHackathonsDocument = gql`
 * });
 */
 export function useGetHackathonsQuery(baseOptions?: Apollo.QueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+      }
 export function useGetHackathonsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+        }
 export type GetHackathonsQueryHookResult = ReturnType<typeof useGetHackathonsQuery>;
 export type GetHackathonsLazyQueryHookResult = ReturnType<typeof useGetHackathonsLazyQuery>;
 export type GetHackathonsQueryResult = Apollo.QueryResult<GetHackathonsQuery, GetHackathonsQueryVariables>;
@@ -1638,13 +1653,13 @@ export const TrendingPostsDocument = gql`
 * });
 */
 export function useTrendingPostsQuery(baseOptions?: Apollo.QueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+      }
 export function useTrendingPostsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+        }
 export type TrendingPostsQueryHookResult = ReturnType<typeof useTrendingPostsQuery>;
 export type TrendingPostsLazyQueryHookResult = ReturnType<typeof useTrendingPostsLazyQuery>;
 export type TrendingPostsQueryResult = Apollo.QueryResult<TrendingPostsQuery, TrendingPostsQueryVariables>;
@@ -1687,13 +1702,13 @@ export const GetMyDraftsDocument = gql`
 * });
 */
 export function useGetMyDraftsQuery(baseOptions: Apollo.QueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+      }
 export function useGetMyDraftsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+        }
 export type GetMyDraftsQueryHookResult = ReturnType<typeof useGetMyDraftsQuery>;
 export type GetMyDraftsLazyQueryHookResult = ReturnType<typeof useGetMyDraftsLazyQuery>;
 export type GetMyDraftsQueryResult = Apollo.QueryResult<GetMyDraftsQuery, GetMyDraftsQueryVariables>;
@@ -1735,9 +1750,9 @@ export type CreateStoryMutationFn = Apollo.MutationFunction<CreateStoryMutation,
 * });
 */
 export function useCreateStoryMutation(baseOptions?: Apollo.MutationHookOptions<CreateStoryMutation, CreateStoryMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
+      }
 export type CreateStoryMutationHookResult = ReturnType<typeof useCreateStoryMutation>;
 export type CreateStoryMutationResult = Apollo.MutationResult<CreateStoryMutation>;
 export type CreateStoryMutationOptions = Apollo.BaseMutationOptions<CreateStoryMutation, CreateStoryMutationVariables>;
@@ -1768,9 +1783,9 @@ export type DeleteStoryMutationFn = Apollo.MutationFunction<DeleteStoryMutation,
 * });
 */
 export function useDeleteStoryMutation(baseOptions?: Apollo.MutationHookOptions<DeleteStoryMutation, DeleteStoryMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
+      }
 export type DeleteStoryMutationHookResult = ReturnType<typeof useDeleteStoryMutation>;
 export type DeleteStoryMutationResult = Apollo.MutationResult<DeleteStoryMutation>;
 export type DeleteStoryMutationOptions = Apollo.BaseMutationOptions<DeleteStoryMutation, DeleteStoryMutationVariables>;
@@ -1800,13 +1815,13 @@ export const PopularTagsDocument = gql`
 * });
 */
 export function usePopularTagsQuery(baseOptions?: Apollo.QueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+      }
 export function usePopularTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+        }
 export type PopularTagsQueryHookResult = ReturnType<typeof usePopularTagsQuery>;
 export type PopularTagsLazyQueryHookResult = ReturnType<typeof usePopularTagsLazyQuery>;
 export type PopularTagsQueryResult = Apollo.QueryResult<PopularTagsQuery, PopularTagsQueryVariables>;
@@ -1897,13 +1912,13 @@ export const FeedDocument = gql`
 * });
 */
 export function useFeedQuery(baseOptions?: Apollo.QueryHookOptions<FeedQuery, FeedQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+      }
 export function useFeedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FeedQuery, FeedQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+        }
 export type FeedQueryHookResult = ReturnType<typeof useFeedQuery>;
 export type FeedLazyQueryHookResult = ReturnType<typeof useFeedLazyQuery>;
 export type FeedQueryResult = Apollo.QueryResult<FeedQuery, FeedQueryVariables>;
@@ -2002,13 +2017,13 @@ export const PostDetailsDocument = gql`
 * });
 */
 export function usePostDetailsQuery(baseOptions: Apollo.QueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+      }
 export function usePostDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+        }
 export type PostDetailsQueryHookResult = ReturnType<typeof usePostDetailsQuery>;
 export type PostDetailsLazyQueryHookResult = ReturnType<typeof usePostDetailsLazyQuery>;
 export type PostDetailsQueryResult = Apollo.QueryResult<PostDetailsQuery, PostDetailsQueryVariables>;
@@ -2037,13 +2052,13 @@ export const MyProfileAboutDocument = gql`
 * });
 */
 export function useMyProfileAboutQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+      }
 export function useMyProfileAboutLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+        }
 export type MyProfileAboutQueryHookResult = ReturnType<typeof useMyProfileAboutQuery>;
 export type MyProfileAboutLazyQueryHookResult = ReturnType<typeof useMyProfileAboutLazyQuery>;
 export type MyProfileAboutQueryResult = Apollo.QueryResult<MyProfileAboutQuery, MyProfileAboutQueryVariables>;
@@ -2075,9 +2090,9 @@ export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfile
 * });
 */
 export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
+      }
 export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
@@ -2112,13 +2127,13 @@ export const MyProfilePreferencesDocument = gql`
 * });
 */
 export function useMyProfilePreferencesQuery(baseOptions?: Apollo.QueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+      }
 export function useMyProfilePreferencesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+        }
 export type MyProfilePreferencesQueryHookResult = ReturnType<typeof useMyProfilePreferencesQuery>;
 export type MyProfilePreferencesLazyQueryHookResult = ReturnType<typeof useMyProfilePreferencesLazyQuery>;
 export type MyProfilePreferencesQueryResult = Apollo.QueryResult<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>;
@@ -2155,9 +2170,9 @@ export type UpdateUserPreferencesMutationFn = Apollo.MutationFunction<UpdateUser
 * });
 */
 export function useUpdateUserPreferencesMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
+      }
 export type UpdateUserPreferencesMutationHookResult = ReturnType<typeof useUpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationResult = Apollo.MutationResult<UpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationOptions = Apollo.BaseMutationOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>;
@@ -2195,13 +2210,13 @@ export const MyProfileRolesSkillsDocument = gql`
 * });
 */
 export function useMyProfileRolesSkillsQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+      }
 export function useMyProfileRolesSkillsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+        }
 export type MyProfileRolesSkillsQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsQuery>;
 export type MyProfileRolesSkillsLazyQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsLazyQuery>;
 export type MyProfileRolesSkillsQueryResult = Apollo.QueryResult<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>;
@@ -2242,9 +2257,9 @@ export type UpdateUserRolesSkillsMutationFn = Apollo.MutationFunction<UpdateUser
 * });
 */
 export function useUpdateUserRolesSkillsMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
+      }
 export type UpdateUserRolesSkillsMutationHookResult = ReturnType<typeof useUpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationResult = Apollo.MutationResult<UpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationOptions = Apollo.BaseMutationOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
@@ -2298,13 +2313,13 @@ ${UserRolesSkillsFragmentDoc}`;
 * });
 */
 export function useProfileQuery(baseOptions: Apollo.QueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+      }
 export function useProfileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+        }
 export type ProfileQueryHookResult = ReturnType<typeof useProfileQuery>;
 export type ProfileLazyQueryHookResult = ReturnType<typeof useProfileLazyQuery>;
 export type ProfileQueryResult = Apollo.QueryResult<ProfileQuery, ProfileQueryVariables>;
@@ -2346,13 +2361,13 @@ export const CategoryPageDocument = gql`
 * });
 */
 export function useCategoryPageQuery(baseOptions: Apollo.QueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+      }
 export function useCategoryPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+        }
 export type CategoryPageQueryHookResult = ReturnType<typeof useCategoryPageQuery>;
 export type CategoryPageLazyQueryHookResult = ReturnType<typeof useCategoryPageLazyQuery>;
 export type CategoryPageQueryResult = Apollo.QueryResult<CategoryPageQuery, CategoryPageQueryVariables>;
@@ -2382,13 +2397,13 @@ export const AllCategoriesDocument = gql`
 * });
 */
 export function useAllCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+      }
 export function useAllCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+        }
 export type AllCategoriesQueryHookResult = ReturnType<typeof useAllCategoriesQuery>;
 export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategoriesLazyQuery>;
 export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
@@ -2447,13 +2462,13 @@ export const ExploreProjectsDocument = gql`
 * });
 */
 export function useExploreProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+      }
 export function useExploreProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+        }
 export type ExploreProjectsQueryHookResult = ReturnType<typeof useExploreProjectsQuery>;
 export type ExploreProjectsLazyQueryHookResult = ReturnType<typeof useExploreProjectsLazyQuery>;
 export type ExploreProjectsQueryResult = Apollo.QueryResult<ExploreProjectsQuery, ExploreProjectsQueryVariables>;
@@ -2488,13 +2503,13 @@ export const HottestProjectsDocument = gql`
 * });
 */
 export function useHottestProjectsQuery(baseOptions?: Apollo.QueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+      }
 export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+        }
 export type HottestProjectsQueryHookResult = ReturnType<typeof useHottestProjectsQuery>;
 export type HottestProjectsLazyQueryHookResult = ReturnType<typeof useHottestProjectsLazyQuery>;
 export type HottestProjectsQueryResult = Apollo.QueryResult<HottestProjectsQuery, HottestProjectsQueryVariables>;
@@ -2524,13 +2539,13 @@ export const GetAllCapabilitiesDocument = gql`
 * });
 */
 export function useGetAllCapabilitiesQuery(baseOptions?: Apollo.QueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+      }
 export function useGetAllCapabilitiesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+        }
 export type GetAllCapabilitiesQueryHookResult = ReturnType<typeof useGetAllCapabilitiesQuery>;
 export type GetAllCapabilitiesLazyQueryHookResult = ReturnType<typeof useGetAllCapabilitiesLazyQuery>;
 export type GetAllCapabilitiesQueryResult = Apollo.QueryResult<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>;
@@ -2563,9 +2578,9 @@ export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutat
 * });
 */
 export function useCreateProjectMutation(baseOptions?: Apollo.MutationHookOptions<CreateProjectMutation, CreateProjectMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
+      }
 export type CreateProjectMutationHookResult = ReturnType<typeof useCreateProjectMutation>;
 export type CreateProjectMutationResult = Apollo.MutationResult<CreateProjectMutation>;
 export type CreateProjectMutationOptions = Apollo.BaseMutationOptions<CreateProjectMutation, CreateProjectMutationVariables>;
@@ -2598,9 +2613,9 @@ export type UpdateProjectMutationFn = Apollo.MutationFunction<UpdateProjectMutat
 * });
 */
 export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProjectMutation, UpdateProjectMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateProjectMutation, UpdateProjectMutationVariables>(UpdateProjectDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProjectMutation, UpdateProjectMutationVariables>(UpdateProjectDocument, options);
+      }
 export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
 export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
 export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
@@ -2628,13 +2643,13 @@ export const IsValidProjectHashtagDocument = gql`
 * });
 */
 export function useIsValidProjectHashtagQuery(baseOptions: Apollo.QueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+      }
 export function useIsValidProjectHashtagLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+        }
 export type IsValidProjectHashtagQueryHookResult = ReturnType<typeof useIsValidProjectHashtagQuery>;
 export type IsValidProjectHashtagLazyQueryHookResult = ReturnType<typeof useIsValidProjectHashtagLazyQuery>;
 export type IsValidProjectHashtagQueryResult = Apollo.QueryResult<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>;
@@ -2663,19 +2678,19 @@ export const GetTournamentsToRegisterDocument = gql`
 * });
 */
 export function useGetTournamentsToRegisterQuery(baseOptions?: Apollo.QueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+      }
 export function useGetTournamentsToRegisterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+        }
 export type GetTournamentsToRegisterQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterQuery>;
 export type GetTournamentsToRegisterLazyQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterLazyQuery>;
 export type GetTournamentsToRegisterQueryResult = Apollo.QueryResult<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>;
 export const ProjectDetailsDocument = gql`
-    query ProjectDetails($projectId: Int!) {
-  getProject(id: $projectId) {
+    query ProjectDetails($projectId: Int, $projectTag: String) {
+  getProject(id: $projectId, tag: $projectTag) {
    id
    title
    tagline
@@ -2746,20 +2761,64 @@ export const ProjectDetailsDocument = gql`
 * const { data, loading, error } = useProjectDetailsQuery({
 *   variables: {
 *      projectId: // value for 'projectId'
+ *      projectTag: // value for 'projectTag'
 *   },
 * });
 */
-export function useProjectDetailsQuery(baseOptions: Apollo.QueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-}
+export function useProjectDetailsQuery(baseOptions?: Apollo.QueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+      }
 export function useProjectDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+        }
 export type ProjectDetailsQueryHookResult = ReturnType<typeof useProjectDetailsQuery>;
 export type ProjectDetailsLazyQueryHookResult = ReturnType<typeof useProjectDetailsLazyQuery>;
 export type ProjectDetailsQueryResult = Apollo.QueryResult<ProjectDetailsQuery, ProjectDetailsQueryVariables>;
+export const SimilarProjectsDocument = gql`
+    query SimilarProjects($projectId: Int!) {
+  similarProjects(id: $projectId) {
+    id
+    title
+    hashtag
+    thumbnail_image
+    category {
+      id
+      icon
+      title
+    }
+  }
+}
+    `;
+
+/**
+ * __useSimilarProjectsQuery__
+ *
+ * To run a query within a React component, call `useSimilarProjectsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useSimilarProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useSimilarProjectsQuery({
+ *   variables: {
+ *      projectId: // value for 'projectId'
+ *   },
+ * });
+ */
+export function useSimilarProjectsQuery(baseOptions: Apollo.QueryHookOptions<SimilarProjectsQuery, SimilarProjectsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SimilarProjectsQuery, SimilarProjectsQueryVariables>(SimilarProjectsDocument, options);
+      }
+export function useSimilarProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SimilarProjectsQuery, SimilarProjectsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SimilarProjectsQuery, SimilarProjectsQueryVariables>(SimilarProjectsDocument, options);
+        }
+export type SimilarProjectsQueryHookResult = ReturnType<typeof useSimilarProjectsQuery>;
+export type SimilarProjectsLazyQueryHookResult = ReturnType<typeof useSimilarProjectsLazyQuery>;
+export type SimilarProjectsQueryResult = Apollo.QueryResult<SimilarProjectsQuery, SimilarProjectsQueryVariables>;
 export const GetAllRolesDocument = gql`
    query GetAllRoles {
  getAllMakersRoles {
@@ -2786,13 +2845,13 @@ export const GetAllRolesDocument = gql`
 * });
 */
 export function useGetAllRolesQuery(baseOptions?: Apollo.QueryHookOptions<GetAllRolesQuery, GetAllRolesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
+      }
 export function useGetAllRolesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetAllRolesQuery, GetAllRolesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
+        }
 export type GetAllRolesQueryHookResult = ReturnType<typeof useGetAllRolesQuery>;
 export type GetAllRolesLazyQueryHookResult = ReturnType<typeof useGetAllRolesLazyQuery>;
 export type GetAllRolesQueryResult = Apollo.QueryResult<GetAllRolesQuery, GetAllRolesQueryVariables>;
@@ -2856,13 +2915,13 @@ export const GetMakersInTournamentDocument = gql`
 * });
 */
 export function useGetMakersInTournamentQuery(baseOptions: Apollo.QueryHookOptions<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
+      }
 export function useGetMakersInTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
+        }
 export type GetMakersInTournamentQueryHookResult = ReturnType<typeof useGetMakersInTournamentQuery>;
 export type GetMakersInTournamentLazyQueryHookResult = ReturnType<typeof useGetMakersInTournamentLazyQuery>;
 export type GetMakersInTournamentQueryResult = Apollo.QueryResult<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>;
@@ -2919,13 +2978,13 @@ export const GetProjectsInTournamentDocument = gql`
 * });
 */
 export function useGetProjectsInTournamentQuery(baseOptions: Apollo.QueryHookOptions<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
+      }
 export function useGetProjectsInTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
+        }
 export type GetProjectsInTournamentQueryHookResult = ReturnType<typeof useGetProjectsInTournamentQuery>;
 export type GetProjectsInTournamentLazyQueryHookResult = ReturnType<typeof useGetProjectsInTournamentLazyQuery>;
 export type GetProjectsInTournamentQueryResult = Apollo.QueryResult<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>;
@@ -2959,9 +3018,9 @@ export type UpdateTournamentRegistrationMutationFn = Apollo.MutationFunction<Upd
 * });
 */
 export function useUpdateTournamentRegistrationMutation(baseOptions?: Apollo.MutationHookOptions<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>(UpdateTournamentRegistrationDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>(UpdateTournamentRegistrationDocument, options);
+      }
 export type UpdateTournamentRegistrationMutationHookResult = ReturnType<typeof useUpdateTournamentRegistrationMutation>;
 export type UpdateTournamentRegistrationMutationResult = Apollo.MutationResult<UpdateTournamentRegistrationMutation>;
 export type UpdateTournamentRegistrationMutationOptions = Apollo.BaseMutationOptions<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>;
@@ -2994,9 +3053,9 @@ export type RegisterInTournamentMutationFn = Apollo.MutationFunction<RegisterInT
 * });
 */
 export function useRegisterInTournamentMutation(baseOptions?: Apollo.MutationHookOptions<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>(RegisterInTournamentDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>(RegisterInTournamentDocument, options);
+      }
 export type RegisterInTournamentMutationHookResult = ReturnType<typeof useRegisterInTournamentMutation>;
 export type RegisterInTournamentMutationResult = Apollo.MutationResult<RegisterInTournamentMutation>;
 export type RegisterInTournamentMutationOptions = Apollo.BaseMutationOptions<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>;
@@ -3036,13 +3095,13 @@ export const MeTournamentDocument = gql`
 * });
 */
 export function useMeTournamentQuery(baseOptions: Apollo.QueryHookOptions<MeTournamentQuery, MeTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
+      }
 export function useMeTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeTournamentQuery, MeTournamentQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
+        }
 export type MeTournamentQueryHookResult = ReturnType<typeof useMeTournamentQuery>;
 export type MeTournamentLazyQueryHookResult = ReturnType<typeof useMeTournamentLazyQuery>;
 export type MeTournamentQueryResult = Apollo.QueryResult<MeTournamentQuery, MeTournamentQueryVariables>;
@@ -3130,13 +3189,13 @@ export const GetTournamentByIdDocument = gql`
 * });
 */
 export function useGetTournamentByIdQuery(baseOptions: Apollo.QueryHookOptions<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
+      }
 export function useGetTournamentByIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
+        }
 export type GetTournamentByIdQueryHookResult = ReturnType<typeof useGetTournamentByIdQuery>;
 export type GetTournamentByIdLazyQueryHookResult = ReturnType<typeof useGetTournamentByIdLazyQuery>;
 export type GetTournamentByIdQueryResult = Apollo.QueryResult<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>;
@@ -3175,9 +3234,9 @@ export type VoteMutationFn = Apollo.MutationFunction<VoteMutation, VoteMutationV
 * });
 */
 export function useVoteMutation(baseOptions?: Apollo.MutationHookOptions<VoteMutation, VoteMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
+      }
 export type VoteMutationHookResult = ReturnType<typeof useVoteMutation>;
 export type VoteMutationResult = Apollo.MutationResult<VoteMutation>;
 export type VoteMutationOptions = Apollo.BaseMutationOptions<VoteMutation, VoteMutationVariables>;
@@ -3215,9 +3274,9 @@ export type ConfirmVoteMutationFn = Apollo.MutationFunction<ConfirmVoteMutation,
 * });
 */
 export function useConfirmVoteMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
+      }
 export type ConfirmVoteMutationHookResult = ReturnType<typeof useConfirmVoteMutation>;
 export type ConfirmVoteMutationResult = Apollo.MutationResult<ConfirmVoteMutation>;
 export type ConfirmVoteMutationOptions = Apollo.BaseMutationOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>;
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -104,11 +104,11 @@ export const handlers = [

    graphql.query<ProjectDetailsQuery, ProjectDetailsQueryVariables>('ProjectDetails', async (req, res, ctx) => {
        await delay()
-        const { projectId } = req.variables
+        const { projectId, projectTag } = req.variables

        return res(
            ctx.data({
-                getProject: getProject(projectId) as any
+                getProject: getProject(projectId, projectTag) as any
            })
        )
    }),
--- a/src/mocks/resolvers.ts
+++ b/src/mocks/resolvers.ts
@@ -4,6 +4,7 @@ import { Chance } from "chance";
 import { tags } from "./data/tags";
 import { hackathons } from "./data/hackathon";
 import { shuffle } from "src/utils/helperFunctions";
+import { Nullable } from "remirror";

 const chance = new Chance()

@@ -32,8 +33,10 @@ export function newProjects() {
    return shuffle(MOCK_DATA.projects).slice(0, 10);
 }

-export function getProject(projectId: number) {
-    return MOCK_DATA.projects.find(p => p.id === projectId)!
+export function getProject(id: Nullable<number>, tag: Nullable<string>) {
+    if (id)
+        return MOCK_DATA.projects.find(p => p.id === id)
+    return MOCK_DATA.projects.find(p => p.hashtag === tag)
 }

 export function searchProjects(search: string) {
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -38,6 +38,10 @@ type RouteOptions =
    | {
        type: "projects-page"
    }
+    | {
+        type: "project",
+        tag: string,
+    }
    | {
        type: "edit-project",
        id?: number,
@@ -92,6 +96,9 @@ export function createRoute(options: RouteOptions) {
    if (options.type === 'projects-page')
        return '/projects'

+    if (options.type === 'project')
+        return `/project/${options.tag}`
+
    if (options.type === 'edit-project')
        return `/projects/list-project` + (options.id ? `?id=${options.id}` : '')

@@ -103,7 +110,9 @@ export const PAGES_ROUTES = {
        default: "/projects",
        hottest: "/projects/hottest",
        byCategoryId: "/projects/category/:id",
-        listProject: "/projects/list-project"
+        listProject: "/projects/list-project",
+        projectPage: "/project/:tag",
+        catchProject: '/project',
    },
    blog: {
        feed: "/feed",