From 9b7afbffcd48340626818e279cccdf00ff0d8f14 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sat, 16 Apr 2022 15:52:35 +0300
Subject: [PATCH] feat: built rest of post cards variations

---
 package-lock.json                             |  17 +-
 package.json                                  |   1 +
 src/Components/Badge/Badge.tsx                |   2 +-
 src/Components/Button/Button.tsx              |   4 +-
 .../PostCard/BountyCard.stories.tsx           |  22 +
 .../Posts/Components/PostCard/BountyCard.tsx  |  47 ++
 .../Posts/Components/PostCard/Header.tsx      |   4 +-
 .../PostCard/QuestionCard.stories.tsx         |  22 +
 .../Components/PostCard/QuestionCard.tsx      |  62 ++
 src/features/Posts/types/index.ts             |  24 +-
 src/mocks/data.ts                             | 601 +-----------------
 src/mocks/data/posts.ts                       |  92 +++
 src/mocks/data/projects.ts                    | 570 +++++++++++++++++
 src/mocks/data/utils.ts                       |  25 +
 14 files changed, 878 insertions(+), 615 deletions(-)
 create mode 100644 src/features/Posts/Components/PostCard/BountyCard.stories.tsx
 create mode 100644 src/features/Posts/Components/PostCard/BountyCard.tsx
 create mode 100644 src/features/Posts/Components/PostCard/QuestionCard.stories.tsx
 create mode 100644 src/features/Posts/Components/PostCard/QuestionCard.tsx
 create mode 100644 src/mocks/data/posts.ts
 create mode 100644 src/mocks/data/projects.ts
 create mode 100644 src/mocks/data/utils.ts

diff --git a/package-lock.json b/package-lock.json
index 78075ed..c8cb542 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "apollo-server": "^3.5.0",
         "apollo-server-lambda": "^3.5.0",
         "axios": "^0.24.0",
+        "dayjs": "^1.11.1",
         "env-cmd": "^10.1.0",
         "framer-motion": "^5.3.0",
         "graphql": "^16.0.1",
@@ -15452,11 +15453,9 @@
       "dev": true
     },
     "node_modules/dayjs": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.0.tgz",
-      "integrity": "sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==",
-      "dev": true,
-      "peer": true
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
+      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
     },
     "node_modules/debounce": {
       "version": "1.2.1",
@@ -72756,11 +72755,9 @@
       "dev": true
     },
     "dayjs": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.0.tgz",
-      "integrity": "sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==",
-      "dev": true,
-      "peer": true
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
+      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
     },
     "debounce": {
       "version": "1.2.1",
diff --git a/package.json b/package.json
index fbfd519..4f9f345 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "apollo-server": "^3.5.0",
     "apollo-server-lambda": "^3.5.0",
     "axios": "^0.24.0",
+    "dayjs": "^1.11.1",
     "env-cmd": "^10.1.0",
     "framer-motion": "^5.3.0",
     "graphql": "^16.0.1",
diff --git a/src/Components/Badge/Badge.tsx b/src/Components/Badge/Badge.tsx
index 9366519..3102562 100644
--- a/src/Components/Badge/Badge.tsx
+++ b/src/Components/Badge/Badge.tsx
@@ -66,7 +66,7 @@ export default function Badge(
     return (
         wrapLink(
             <span className={classes} onClick={onClick}>
-                <span>{children}</span>
+                <span className="font-medium">{children}</span>
                 {onRemove && <IoMdCloseCircle onClick={onRemove} className="ml-12 cursor-pointer" />}
             </span>
             , href)
diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
index 31f737c..1c58cc8 100644
--- a/src/Components/Button/Button.tsx
+++ b/src/Components/Button/Button.tsx
@@ -4,7 +4,7 @@ import { UnionToObjectKeys } from 'src/utils/types/utils';
 // import Loading from '../Loading/Loading';
 
 interface Props {
-    color?: 'primary' | 'red' | 'white' | 'gray' | 'none',
+    color?: 'primary' | 'red' | 'white' | 'gray' | "black" | 'none',
     variant?: 'fill' | 'outline'
     size?: 'sm' | 'md' | 'lg'
     children: ReactNode;
@@ -23,6 +23,7 @@ const btnStylesFill: UnionToObjectKeys<Props, 'color'> = {
     primary: "bg-primary-500 border-0 hover:bg-primary-400 active:bg-primary-600 text-white",
     gray: 'bg-gray-100 hover:bg-gray-200 text-gray-900 active:bg-gray-300',
     white: 'text-gray-900 bg-gray-25 hover:bg-gray-50',
+    black: 'text-white bg-black hover:bg-gray-900',
     red: "bg-red-600 border-0 hover:bg-red-500 active:bg-red-700 text-white",
 }
 
@@ -31,6 +32,7 @@ const btnStylesOutline: UnionToObjectKeys<Props, 'color'> = {
     primary: "text-primary-600",
     gray: 'text-gray-700',
     white: 'text-gray-900',
+    black: 'text-black',
     red: "text-red-500",
 }
 
diff --git a/src/features/Posts/Components/PostCard/BountyCard.stories.tsx b/src/features/Posts/Components/PostCard/BountyCard.stories.tsx
new file mode 100644
index 0000000..446fb14
--- /dev/null
+++ b/src/features/Posts/Components/PostCard/BountyCard.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import BountyCard from './BountyCard';
+
+export default {
+    title: 'Posts/Components/BountyCard',
+    component: BountyCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof BountyCard>;
+
+
+const Template: ComponentStory<typeof BountyCard> = (args) => <div className="max-w-[660px]"><BountyCard {...args} ></BountyCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    bounty: MOCK_DATA['posts'].bounties[0]
+}
+
+
diff --git a/src/features/Posts/Components/PostCard/BountyCard.tsx b/src/features/Posts/Components/PostCard/BountyCard.tsx
new file mode 100644
index 0000000..7ad7162
--- /dev/null
+++ b/src/features/Posts/Components/PostCard/BountyCard.tsx
@@ -0,0 +1,47 @@
+import VotesCount from "src/Components/VotesCount/VotesCount"
+import { Bounty } from "src/features/Posts/types"
+import Header from "./Header"
+import { FiUsers } from "react-icons/fi"
+import Badge from "src/Components/Badge/Badge"
+import Button from "src/Components/Button/Button"
+
+interface Props {
+    bounty: Bounty
+}
+export default function BountyCard({ bounty }: Props) {
+    return (
+        <div className="bg-white rounded-12 overflow-hidden border">
+            <img src={bounty.cover_image} className='h-[200px] w-full object-cover' alt="" />
+            <div className="p-24">
+                <Header name={bounty.author.name} avatar={bounty.author.image} date={bounty.date} />
+                <div className="flex justify-between">
+                    <div>
+                        <h2 className="text-h5 font-medium mt-16">{bounty.title}</h2>
+                        <div className="flex gap-8 mt-8">
+                            <Badge color="none" size="sm" className="bg-yellow-500 text-black">Bounty</Badge>
+                            <Badge color="none" size="sm" className="bg-purple-200 text-purple-900">{bounty.reward_amount} sats</Badge>
+                        </div>
+                    </div>
+                    <Button color="black" className="self-center !py-10 !px-36 flex-shrink-0 ">
+                        Apply
+                    </Button>
+                </div>
+                <p className="text-body5 text-gray-600 mt-8">{bounty.excerpt}</p>
+
+                <div className="flex gap-8 mt-8">
+                    {bounty.tags.map(tag => <Badge key={tag.id} size='sm'>
+                        {tag.title}
+                    </Badge>)}
+                </div>
+
+                <hr className="my-16 bg-gray-200" />
+                <div className="flex gap-24">
+                    <VotesCount count={bounty.votes_count} />
+                    <div className="text-gray-600">
+                        <FiUsers /> <span className="align-middle text-body5">{bounty.applicants_count} Applicants</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Posts/Components/PostCard/Header.tsx b/src/features/Posts/Components/PostCard/Header.tsx
index f149061..5c6c7e7 100644
--- a/src/features/Posts/Components/PostCard/Header.tsx
+++ b/src/features/Posts/Components/PostCard/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import dayjs from 'dayjs'
 
 interface Props {
     name: string;
@@ -8,12 +9,13 @@ interface Props {
 }
 
 export default function Header(props: Props) {
+
     return (
         <div className='flex gap-8'>
             <Avatar width={40} src={props.avatar} />
             <div>
                 <p className='text-body4 text-black font-medium'>{props.name}</p>
-                <p className='text-body6 text-gray-600'>{props.date}</p>
+                <p className='text-body6 text-gray-600'>{dayjs(props.date).format('MMMM DD')}</p>
             </div>
             <p className="text-body5 text-gray-500 ml-auto ">
                 3h ago
diff --git a/src/features/Posts/Components/PostCard/QuestionCard.stories.tsx b/src/features/Posts/Components/PostCard/QuestionCard.stories.tsx
new file mode 100644
index 0000000..356898d
--- /dev/null
+++ b/src/features/Posts/Components/PostCard/QuestionCard.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import QuestionCard from './QuestionCard';
+
+export default {
+    title: 'Posts/Components/QuestionCard',
+    component: QuestionCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof QuestionCard>;
+
+
+const Template: ComponentStory<typeof QuestionCard> = (args) => <div className="max-w-[660px]"><QuestionCard {...args} ></QuestionCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    question: MOCK_DATA['posts'].questions[0]
+}
+
+
diff --git a/src/features/Posts/Components/PostCard/QuestionCard.tsx b/src/features/Posts/Components/PostCard/QuestionCard.tsx
new file mode 100644
index 0000000..0359d01
--- /dev/null
+++ b/src/features/Posts/Components/PostCard/QuestionCard.tsx
@@ -0,0 +1,62 @@
+import VotesCount from "src/Components/VotesCount/VotesCount"
+import { Question } from "src/features/Posts/types"
+import Header from "./Header"
+import { FiUsers } from "react-icons/fi"
+import Badge from "src/Components/Badge/Badge"
+import Avatar from "src/features/Profiles/Components/Avatar/Avatar"
+import dayjs from "dayjs"
+import { Link } from "react-router-dom"
+
+interface Props {
+    question: Question
+}
+export default function QuestionCard({ question }: Props) {
+    return (
+        <div className="bg-white rounded-12 overflow-hidden border">
+            {/* <img src={question.cover_image} className='h-[200px] w-full object-cover' alt="" /> */}
+            <div className="p-24">
+                <Header name={question.author.name} avatar={question.author.image} date={question.date} />
+                <div className="flex justify-between">
+                    <h2 className="text-h5 font-medium mt-16">{question.title}</h2>
+                </div>
+                <p className="text-body5 text-gray-600 mt-8">{question.excerpt}</p>
+
+                <div className="flex gap-8 mt-8">
+                    <Badge key={'991199'} size='sm' color="none" className="bg-red-200 text-red-600">
+                        Help
+                    </Badge>
+                    {question.tags.map(tag => <Badge key={tag.id} size='sm'>
+                        {tag.title}
+                    </Badge>)}
+                </div>
+
+                <hr className="my-16 bg-gray-200" />
+                <div className="flex gap-24">
+                    <VotesCount count={question.votes_count} />
+                    <div className="text-gray-600">
+                        <FiUsers /> <span className="align-middle text-body5">{question.answers_count} Answers</span>
+                    </div>
+                </div>
+
+                <div className="flex p-16 mt-16 flex-col gap-10 bg-gray-50">
+                    {question.comments.map(comment => <div className="border-b last-of-type:border-b-0 pb-8 ">
+                        <div className='flex gap-8'>
+                            <Avatar width={32} src={comment.author.image} />
+                            <div>
+                                <p className='text-body4 text-black font-medium'>{comment.author.name}</p>
+                                <p className='text-body6 text-gray-600'>{dayjs(comment.date).format('MMMM DD')}</p>
+                            </div>
+                        </div>
+                        <p className="text-body5 text-gray-600 mt-8">{comment.body}</p>
+                    </div>)}
+
+                    <div className="flex">
+                        <Link to='#' className="text-black font-medium p-8 hover:bg-gray-100 rounded">
+                            See all {question.answers_count} comments
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Posts/types/index.ts b/src/features/Posts/types/index.ts
index e18c8b8..868b6f4 100644
--- a/src/features/Posts/types/index.ts
+++ b/src/features/Posts/types/index.ts
@@ -1,14 +1,20 @@
 import { Tag } from "src/utils/interfaces"
 
+export type User = {
+    id: number
+    name: string
+    image: string
+}
+
+export type Author = User & {
+    join_date: string
+}
+
 export type PostBase = {
     id: number
     title: string
     date: string
-    author: {
-        id: number
-        name: string
-        image: string
-    }
+    author: Author
     excerpt: string
     tags: Tag[]
     votes_count: number
@@ -31,6 +37,14 @@ export type Bounty = PostBase & {
 export type Question = PostBase & {
     type: 'question'
     answers_count: number
+    comments: PostComment[]
+}
+
+export type PostComment = {
+    id: number;
+    author: Author
+    date: string
+    body: string
 }
 
 export type Post = Story | Question | Bounty
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index f32b49b..98dab99 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -1,602 +1,9 @@
-import ASSETS from "src/assets";
-import { Story } from "src/features/Posts/types";
 import { Project, ProjectCategory } from "src/utils/interfaces";
-
-let categories = [
-    {
-        "title": "Shock the Web ⚡️",
-        "id": 11,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "⚡",
-        "votes_sum": 0
-    },
-    {
-        "title": "Finance",
-        "id": 1,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "💸",
-        "votes_sum": 452
-    },
-    {
-        "title": "Gaming",
-        "id": 4,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🎮",
-        "votes_sum": 15
-    },
-    {
-        "title": "Media & News",
-        "id": 7,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🚨",
-        "votes_sum": 250
-    },
-    {
-        "title": "Shopping",
-        "id": 8,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🛒",
-        "votes_sum": 35
-    },
-    {
-        "title": "Misc / Other",
-        "id": 9,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🎁",
-        "votes_sum": 345
-    },
-    {
-        "title": "Art & Collectibles",
-        "id": 3,
-        "cover_image": "https://s3-alpha-sig.figma.com/img/6edc/d1e4/8683ae2aa5c60526b5eaaf40a201a08a?Expires=1649030400&Signature=TAO9e3rlHC1TD3AKWOcxZr0t9YZW~q5AOj5deqXDFPqHvtbsTbaJXjKDo5LLp~H6V0OvbAmP6G2ab~9qrQitnJYogcpXO-mTLlpnUmKU1aA-Ipp5jQIfUvCMLQEGm4dJmgqoDINae3AJCj7dUIqnQaT79oHsUTy1jIPaVPcHj0dnm1Gj2WO06E-bX-wcJ~7yIuqZ6VXXbYPehfTpoEybmMPFuWP0b7wO-LklHT~CQ3k9Zeg4Gd1xM63p7kGLyVJng1Zwz5XuZ9Yasv~eQpz5W~L5TUx8afw1TgdiA4RigdSq6tM9wskbpPnyN~AODDUkkrrbDUtppfOTKAWmAlEXBQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
-        "icon": "🎨",
-        "votes_sum": 11
-    },
-    {
-        "title": "Social",
-        "id": 2,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🎭",
-        "votes_sum": 0
-    },
-    {
-        "title": "Analytics",
-        "id": 6,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "💹",
-        "votes_sum": 0
-    },
-    {
-        "title": "Wallet",
-        "id": 5,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "💳",
-        "votes_sum": 0
-    },
-    {
-        "title": "Exchange",
-        "id": 10,
-        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
-        "icon": "🔁",
-        "votes_sum": 0
-    }
-]
-
-let projects = [
-    {
-        "id": 16,
-        "title": "Alby",
-        "description": "Alby is wallet for your browser to send and receive bitcoin over the Lightning Network and login to websites. It let's you connect your own Lightning wallet. ",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/alby_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/alby_thumbnail.png",
-        "screenshots": [],
-        "website": "https://getalby.com/",
-        "lightning_address": "hello@getalby.com",
-        "votes_count": 335,
-        "category": {
-            "id": 9,
-            "title": "Misc / Other"
-        }
-    },
-    {
-        "id": 22,
-        "title": "Geyser Fund",
-        "description": "On Geyser fund you can explore live crowdfunding projects, fund them on Bitcoin’s Lightning Network, and keep track of the projects.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/geyser-fund_cover.png",
-        "thumbnail_image": "https://user-images.githubusercontent.com/36778205/157433567-4b1e41db-23d4-4a80-b48f-ee248ee87f1e.jpg",
-        "screenshots": [],
-        "website": "https://geyser.fund/",
-        "lightning_address": "divineorgan67@walletofsatoshi.com",
-        "votes_count": 232,
-        "category": {
-            "id": 1,
-            "title": "Finance"
-        }
-    },
-    {
-        "id": 1,
-        "title": "Kollider",
-        "description": "The first real-time settled derivative exchange",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/kollider_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/kollider_thumbnail.png",
-        "screenshots": [
-            "https://t18307877.p.clickup-attachments.com/t18307877/87f5f10f-f462-4ec7-a0e7-65ac43f39d97/Screenshot%202022-03-01%20at%2023.34.23.png?view=open",
-            "https://t18307877.p.clickup-attachments.com/t18307877/7a17965b-30d3-473a-85ee-f7a1698f44e4/Screenshot%202022-03-01%20at%2023.35.06.png?view=open",
-            "https://t18307877.p.clickup-attachments.com/t18307877/8f75cdbb-de05-49c5-8f3c-4fcb260a49bf/Screenshot%202022-03-01%20at%2023.36.19.png?view=open"
-        ],
-        "website": "https://kollider.xyz/",
-        "lightning_address": "johns@getalby.com",
-        "votes_count": 220,
-        "category": {
-            "id": 1,
-            "title": "Finance"
-        }
-    },
-    {
-        "id": 20,
-        "title": "Lightning.Video",
-        "description": "Lightning.Video allows to paywall videos and receive payments for comments, subscriptions and tips.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-video_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-video_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lightning.video/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 205,
-        "category": {
-            "id": 7,
-            "title": "Media & News"
-        }
-    },
-    {
-        "id": 7,
-        "title": "Wavlake",
-        "description": "Wavlake directly connects artists and listeners on an open-source payment platform powered by Bitcoin & Lightning.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/wavlake_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/wavlake_thumbnail.png",
-        "screenshots": [],
-        "website": "https://www.wavlake.com/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 45,
-        "category": {
-            "id": 7,
-            "title": "Media & News"
-        }
-    },
-    {
-        "id": 12,
-        "title": "Bitrefill",
-        "description": "Bitrefill lets you buy vouchers, refill your phone, pay your bills and purchase incoming capacity for your Lightning node.",
-        "cover_image": "http://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/bitrefill_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/bitrefill_thumbnail.png",
-        "screenshots": [],
-        "website": "https://www.bitrefill.com/buy",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 25,
-        "category": {
-            "id": 8,
-            "title": "Shopping"
-        }
-    },
-    {
-        "id": 3,
-        "title": "Sparkshot",
-        "description": " Sparkshot is an art hosting platform that requires users to reveal the art by purchasing pixels in groups of one or more. Each purchase reveals those pixels and more of the underlying art.\r\n\r\nOnce all pixels have been purchased the art is fully revealled and we unlock the ability for the art to be downloaded and made free to go and live a life of its own. The art's page will remain on Sparkshot with the comments and metadata provided by the patrons. ",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sparkshot_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sparkshot_thumbnail.png",
-        "screenshots": [],
-        "website": "https://sparkshot.io/",
-        "lightning_address": "johns@getalby.com",
-        "votes_count": 11,
-        "category": {
-            "id": 3,
-            "title": "Art & Collectibles"
-        }
-    },
-    {
-        "id": 10,
-        "title": "Lightning Roulette",
-        "description": "Lightning Roulette is a website to win bitcoin by playing Roulette.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-roulette_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-roulette_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lightning-roulette.com/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 10,
-        "category": {
-            "id": 4,
-            "title": "Gaming"
-        }
-    },
-    {
-        "id": 15,
-        "title": "lnshort.it",
-        "description": "lnshort.it is a service to redirect URLs and generate QR codes using the Lightning Network for payments and logins.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnshort-it_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnshort-it_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lnshort.it/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 10,
-        "category": {
-            "id": 9,
-            "title": "Misc / Other"
-        }
-    },
-    {
-        "id": 17,
-        "title": "Lightning Gifts",
-        "description": "On Lightning Gifts you can create fee-less Bitcoin gift vouchers to share with friends, family, and your haters.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-gifts_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-gifts_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lightning.gifts/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 10,
-        "category": {
-            "id": 8,
-            "title": "Shopping"
-        }
-    },
-    {
-        "id": 5,
-        "title": "LN Blackjack",
-        "description": "LN Blackjack lets you play Blackjack and win bitcoin over the Lightning Network.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnblackjack_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnblackjack_thumbnail.png",
-        "screenshots": [],
-        "website": "https://www.lnblackjack.com/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 5,
-        "category": {
-            "id": 4,
-            "title": "Gaming"
-        }
-    },
-    {
-        "id": 23,
-        "title": "Bolt Boosters",
-        "description": "I wanted to create a way to monetize any video instantly and for free. A creator is able to create a unique link tied to their LN address to share with friends & followers. The user is able to stream sats instantly and for free after signing in with their @getalby LN address. \r\n\r\nThe market potential for this type of app is endless!",
-        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/27474095d5fea78afdf385c30ed3f761/6b6d831a",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/27474095d5fea78afdf385c30ed3f761/6b6d831a",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/dadd6fe367f993137972415dd3ba5b6d/46dde8e2",
-            "https://dl.airtable.com/.attachmentThumbnails/ad0410f4c8bf05073a8484d4eb7146ed/d0946f0a",
-            "https://dl.airtable.com/.attachmentThumbnails/815c6a76bd1aa7b07d2b92d47cbc4a78/b352fc1b"
-        ],
-        "website": "https://satsbuster.herokuapp.com/",
-        "lightning_address": "subirachs@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 24,
-        "title": "Sat Streamer",
-        "description": "Interact with the audience of your livestream through Lightning donations.\r\n- Lightning Address compatible\r\n- Text-to-speech: comedy ensured by reading out the messages or questions from you audience.\r\n- Crowdsource gifs from your audience \r\n\r\nIf you want to test out the live application, please use the regtest server, do not make an account on the mainnet experimental lndhub instance.\r\n\r\nLive Youtube example: https://www.youtube.com/watch?v=zAY8od3Z_LA&t=6015s",
-        "cover_image": "",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/fb4467e1e0a0a4baeaaed2a58cf9e2cd/e100876e",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/bbb72c8861bc8152bb1400b0ca0e4c5a/742bd6f6"
-        ],
-        "website": "https://satstreamer.vercel.app",
-        "lightning_address": "kiwiidb@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 25,
-        "title": "The Lightning tip gallery",
-        "description": "The Lightning tip gallery\r\nsend a stranger a tip. get your tip request listed here\r\n\r\nhttps://github.com/Zrce/tipwall-backend\r\nhttps://github.com/Zrce/tipwall-frontend",
-        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/2529b036b046446c1502ee110598b5da/bbecacbc",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/dbc9138739627cbe0598063c0d235f18/d7b0c9c2",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/51d39bf8493a38cff3de85de6e6a47e0/9a1f5b74",
-            "https://dl.airtable.com/.attachmentThumbnails/eb55a5a85d21d6c2ddcfe0895baf413b/2e5971a3"
-        ],
-        "website": "https://github.com/Zrce/tipwall-frontend",
-        "lightning_address": "tobitcoin@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 26,
-        "title": "Arion",
-        "description": "A fast, easy, bitcoin powered parking app that's on the user's side. Users can get on their way quicker, cities enforce parking easier, and local businesses benefit.",
-        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/4a63e4bf9523de039fcca7bbb5d39b38/b799bb27",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/4a63e4bf9523de039fcca7bbb5d39b38/b799bb27",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/640706bbf4fe82f554e47313dcffdb03/fd421db7",
-            "https://dl.airtable.com/.attachmentThumbnails/ee696150c36ab7625582b768c4ee023f/7eba66f5",
-            "https://dl.airtable.com/.attachmentThumbnails/36d5e53432f94e8ba50649b5fc875b0f/7da5dc98",
-            "https://dl.airtable.com/.attachmentThumbnails/c56a91e4b77d51bd8ab283296e73bc7c/83c550f2",
-            "https://dl.airtable.com/.attachmentThumbnails/72b3e88b2bb67586f4616fbdc76574f7/ab159627",
-            "https://dl.airtable.com/.attachmentThumbnails/d2a02c77483cbe2679b3e35b78a216df/ca05ec1c",
-            "https://dl.airtable.com/.attachmentThumbnails/077493b1d9397bca8a3daa993e880529/6187ca63",
-            "https://dl.airtable.com/.attachmentThumbnails/ea1f5386080334b95965b09d33cdc03f/d47eda7f",
-            "https://dl.airtable.com/.attachmentThumbnails/9f22802092bb26522ea1c7ae889b82f4/ae0de49b"
-        ],
-        "website": "https://arionparking.tech/",
-        "lightning_address": "atlantabitdevs@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 27,
-        "title": "⚡ Payment Widgets",
-        "description": "Payment widgets make integrating ⚡ payments into your website a breeze. \r\n\r\n1. Go to https://webln.twentyuno.net/widget\r\n2. Fill in the form\r\n3. Generate embed code\r\n4. Embed the code into your website and start receiving payments today\r\n\r\nThis is how that would look on your website:\r\nhttps://codepen.io/reneaaron/full/VwybrvO \r\n\r\nThe widget supports WebLN but also provides fallback options (QR, Invoice) where WebLN is not available.",
-        "cover_image": "",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/34984c4a4e366373c3410887fab001ba/f1121463",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/73b6da7fb9802bf8aa4bdd212e4b1cbe/ebc0a61a"
-        ],
-        "website": "https://webln.twentyuno.net/widget",
-        "lightning_address": "reneaaron@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 28,
-        "title": "LNShop",
-        "description": "LNShop aims to provide a one-click, lightweight, e-commerce solution for the lightning network.\r\n\r\nWe built it from the ground up to be easy to setup as a static website that can allow free hosting and little to no maintenance.\r\n\r\nI supports easy setup where the client only needs to Create a spreadsheet of their inventory and provide a lighting address and have their shop up and running in as little as 15 minutes.\r\n\r\nhttps://www.figma.com/proto/6BWuYddHvFySbdikxll9tj/Ln-shop-Presentation?node-id=1010%3A2200&scaling=min-zoom&page-id=801%3A6671&starting-point-node-id=1009%3A1337\r\n\r\nhttps://www.loom.com/share/8b608dc58a6d489ab8f541641060111b",
-        "cover_image": "",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/b98eae93eaca66e2e006eab594a4c8d8/3f981698",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/a681f9f056ac0bc29ab39730d2db9bda/2279dcb8",
-            "https://dl.airtable.com/.attachmentThumbnails/bcbe86a0096e384a54900c0e04f89448/d6341045",
-            "https://dl.airtable.com/.attachmentThumbnails/e90632192df8d5b6d9dea9dc8cd80c51/e59c749a",
-            "https://dl.airtable.com/.attachmentThumbnails/bfffa80f1a76cfdfaaa29b5e44346f2b/57eccaf6",
-            "https://dl.airtable.com/.attachmentThumbnails/0e0881d4f0d3459cbbf270c760ca3e94/088f4023",
-            "https://dl.airtable.com/.attachmentThumbnails/f6ab4891cbe033fea641e34f2f05853f/1fb9d921"
-        ],
-        "website": "https://lnshop.github.io/lnshop/",
-        "lightning_address": "alivesession77@walletofsatoshi.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 2,
-        "title": "LN Markets",
-        "description": "LN Markets is a new type of Bitcoin derivatives trading platform, one that can only be accessed via the Lightning Network, a payment protocol running on top of Bitcoin.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnmarkets_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnmarkets_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lnmarkets.com/",
-        "lightning_address": "johns@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 1,
-            "title": "Finance"
-        }
-    },
-    {
-        "id": 29,
-        "title": "Geyser Grants",
-        "description": "Geyser Grants makes it easy for anyone to contribute to a cause without having to look into every crowdfunding campaign. The Geyser Fund Board will search within and beyond Geyserfund campaigns to distribute them to the most relevant and impactful projects.\r\n\r\nhttps://www.loom.com/share/6442574f45344345abf0b5ae303b35a3",
-        "cover_image": "",
-        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/f62e158661995a11b6119e8ff4cc4ac2/fe0219e9",
-        "screenshots": [
-            "https://dl.airtable.com/.attachmentThumbnails/3e2d4e49d8aa7d6fb62c5a278b7bff68/249829a6",
-            "https://dl.airtable.com/.attachmentThumbnails/7540606967a04f51637731c0c6eb29c0/1abf8a61",
-            "https://dl.airtable.com/.attachmentThumbnails/f7cfff3ea2d125ebfa3ce9a1ac49df00/d7253e98",
-            "https://dl.airtable.com/.attachmentThumbnails/39492c2dabe7ebc78d62617cfd41103d/ae42cc14",
-            "https://dl.airtable.com/.attachmentThumbnails/7e86771958c7c5949bdbaa54545b341c/a7dd3e02"
-        ],
-        "website": "https://geyser.fund",
-        "lightning_address": "divineorgan67@walletofsatoshi.com",
-        "votes_count": 0,
-        "category": {
-            "id": 11,
-            "title": "Shock the Web ⚡️"
-        }
-    },
-    {
-        "id": 8,
-        "title": "LOFT",
-        "description": "LOFT allows you to trade investment products with bitcoin and uses the Lightning Network for a seamless user experience.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/loft-trade_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/loft-trade_thumbnail.png",
-        "screenshots": [],
-        "website": "https://loft.trade/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 1,
-            "title": "Finance"
-        }
-    },
-    {
-        "id": 14,
-        "title": "Sats 4 Likes",
-        "description": "Sats 4 Likes allows you to provide rewards for various tasks such as Twitter likes and followers or app reviews.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sats-4-likes-cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sats-4-likes_thumbnail.png",
-        "screenshots": [],
-        "website": "https://kriptode.com/satsforlikes/index.html",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 9,
-            "title": "Misc / Other"
-        }
-    },
-    {
-        "id": 18,
-        "title": "Scarce City",
-        "description": "Scarce City is an auction marketplace for art. Bidders collateralize their bids with minimal fee lightning payments.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/scarce-city_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/scarce-city_thumbnail.png",
-        "screenshots": [],
-        "website": "https://scarce.city/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 3,
-            "title": "Art & Collectibles"
-        }
-    },
-    {
-        "id": 11,
-        "title": "Stacker News",
-        "description": "Stacker News is a crowd-sourced news aggregator with a Reddit-style voting mechanism using bitcoin.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/stacker-news_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/stacker-news_thumbnail.png",
-        "screenshots": [],
-        "website": "https://stacker.news/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 7,
-            "title": "Media & News"
-        }
-    },
-    {
-        "id": 21,
-        "title": "Starbackr",
-        "description": "Starbackr's plattform allows to post, follow, like, comment and support your favorite creators",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/starbackr_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/starbackr_thumbail.png",
-        "screenshots": [],
-        "website": "https://www.starbackr.com/",
-        "lightning_address": "moritz@geralby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 7,
-            "title": "Media & News"
-        }
-    },
-    {
-        "id": 4,
-        "title": "Amboss Space",
-        "description": "Amboss Space is a Lightning Network Explorer leveraging the Lightning Network for secure and seamless logins.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/amboss-space_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/amboss-space_thumbnail.png",
-        "screenshots": [],
-        "website": "https://amboss.space/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 6,
-            "title": "Analytics"
-        }
-    },
-    {
-        "id": 19,
-        "title": "Y'alls ",
-        "description": "Visitors on Y'alls can read and write articles with Lightning Network micropayments.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/yalls_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/yalls_thumbnail.png",
-        "screenshots": [],
-        "website": "https://yalls.org/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 2,
-            "title": "Social"
-        }
-    },
-    {
-        "id": 13,
-        "title": "Lightning Network Stores",
-        "description": "Lightning Network Stores provides a collection of stores and websites accepting Bitcoin payments over the Lightning Network.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-network-stores_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-network-stores_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lightningnetworkstores.com/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 8,
-            "title": "Shopping"
-        }
-    },
-    {
-        "id": 9,
-        "title": "Lightning Poker",
-        "description": "Lightning Poker is platform to play poker games with bitcoin over the Lightning Network.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-poker_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-poker_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lightning-poker.com/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 4,
-            "title": "Gaming"
-        }
-    },
-    {
-        "id": 6,
-        "title": "LNGames",
-        "description": "LNGames is platform with several provably fair simple games integrating payments over the Lightning Network.",
-        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lngames_cover.png",
-        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lngames_thumbnail.png",
-        "screenshots": [],
-        "website": "https://lngames.net/",
-        "lightning_address": "moritz@getalby.com",
-        "votes_count": 0,
-        "category": {
-            "id": 4,
-            "title": "Gaming"
-        }
-    }
-]
-
-
-let posts = {
-    stories: [
-        {
-            id: 1,
-            title: 'Digital Editor, Mars Review of Books',
-            cover_image: "https://picsum.photos/id/10/1660/1200",
-            comments_count: 31,
-            date: 'April 13',
-            votes_count: 120,
-            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
-            type: "story",
-            tags: [
-                { id: 1, title: "lnurl" },
-                { id: 2, title: "webln" },
-                { id: 3, title: "guide" },
-            ],
-            author: {
-                id: 12,
-                name: "John Doe",
-                image: "https://i.pravatar.cc/300?img=3"
-            }
-        }
-    ] as Story[],
-}
-
-// Process Data
-// ------------
-
-
-// 1- Add Typenames
-categories = categories.map(c => ({ ...c, __typename: "Category" }))
-projects = projects.map(p => ({ ...p, __typename: "Project" }))
-
-// 2- Computed Fields
-categories = categories.map(c => ({ ...c, apps_count: projects.reduce((acc, p) => acc + (p.category.id === c.id ? 1 : 0), 0) }))
+import { posts } from "./data/posts";
+import { categories, projects } from "./data/projects";
 
 export const MOCK_DATA = {
-    projects: projects as Project[],
-    categories: categories as ProjectCategory[],
+    projects: projects,
+    categories: categories,
     posts: posts
 }
\ No newline at end of file
diff --git a/src/mocks/data/posts.ts b/src/mocks/data/posts.ts
new file mode 100644
index 0000000..7d22ecf
--- /dev/null
+++ b/src/mocks/data/posts.ts
@@ -0,0 +1,92 @@
+
+import { Bounty, Question, Story } from "src/features/Posts/types";
+import { getAvatarImage, getCoverImage } from "./utils";
+
+const getAuthor = () => ({
+    id: 12,
+    name: "John Doe",
+    image: getAvatarImage()
+})
+
+const date = 'Mon Mar 14 2022 20:33:17 GMT+0200 (Eastern European Standard Time)'
+
+let posts = {
+    stories: [
+        {
+            id: 1,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
+        }
+    ] as Story[],
+    bounties: [
+        {
+            type: "bounty",
+            id: 1,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            applicants_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor(),
+            deadline: "25 May",
+            reward_amount: 200_000,
+        }
+    ] as Bounty[],
+    questions: [
+        {
+            type: "question",
+            id: 1,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        }
+    ] as Question[]
+}
+
+
+posts.bounties = posts.bounties.map(b => ({ ...b, __typename: "Bounty" }))
+posts.questions = posts.questions.map(b => ({ ...b, __typename: "Question" }))
+posts.stories = posts.stories.map(b => ({ ...b, __typename: "Story" }))
+
+
+export {
+    posts,
+}
\ No newline at end of file
diff --git a/src/mocks/data/projects.ts b/src/mocks/data/projects.ts
new file mode 100644
index 0000000..9b928fa
--- /dev/null
+++ b/src/mocks/data/projects.ts
@@ -0,0 +1,570 @@
+import { Project, ProjectCategory } from "src/utils/interfaces";
+
+
+let categories = [
+    {
+        "title": "Shock the Web ⚡️",
+        "id": 11,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "⚡",
+        "votes_sum": 0
+    },
+    {
+        "title": "Finance",
+        "id": 1,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "💸",
+        "votes_sum": 452
+    },
+    {
+        "title": "Gaming",
+        "id": 4,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🎮",
+        "votes_sum": 15
+    },
+    {
+        "title": "Media & News",
+        "id": 7,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🚨",
+        "votes_sum": 250
+    },
+    {
+        "title": "Shopping",
+        "id": 8,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🛒",
+        "votes_sum": 35
+    },
+    {
+        "title": "Misc / Other",
+        "id": 9,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🎁",
+        "votes_sum": 345
+    },
+    {
+        "title": "Art & Collectibles",
+        "id": 3,
+        "cover_image": "https://s3-alpha-sig.figma.com/img/6edc/d1e4/8683ae2aa5c60526b5eaaf40a201a08a?Expires=1649030400&Signature=TAO9e3rlHC1TD3AKWOcxZr0t9YZW~q5AOj5deqXDFPqHvtbsTbaJXjKDo5LLp~H6V0OvbAmP6G2ab~9qrQitnJYogcpXO-mTLlpnUmKU1aA-Ipp5jQIfUvCMLQEGm4dJmgqoDINae3AJCj7dUIqnQaT79oHsUTy1jIPaVPcHj0dnm1Gj2WO06E-bX-wcJ~7yIuqZ6VXXbYPehfTpoEybmMPFuWP0b7wO-LklHT~CQ3k9Zeg4Gd1xM63p7kGLyVJng1Zwz5XuZ9Yasv~eQpz5W~L5TUx8afw1TgdiA4RigdSq6tM9wskbpPnyN~AODDUkkrrbDUtppfOTKAWmAlEXBQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        "icon": "🎨",
+        "votes_sum": 11
+    },
+    {
+        "title": "Social",
+        "id": 2,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🎭",
+        "votes_sum": 0
+    },
+    {
+        "title": "Analytics",
+        "id": 6,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "💹",
+        "votes_sum": 0
+    },
+    {
+        "title": "Wallet",
+        "id": 5,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "💳",
+        "votes_sum": 0
+    },
+    {
+        "title": "Exchange",
+        "id": 10,
+        "cover_image": "https://via.placeholder.com/1920x850.png?text=Category+Cover+Image",
+        "icon": "🔁",
+        "votes_sum": 0
+    }
+]
+
+let projects = [
+    {
+        "id": 16,
+        "title": "Alby",
+        "description": "Alby is wallet for your browser to send and receive bitcoin over the Lightning Network and login to websites. It let's you connect your own Lightning wallet. ",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/alby_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/alby_thumbnail.png",
+        "screenshots": [],
+        "website": "https://getalby.com/",
+        "lightning_address": "hello@getalby.com",
+        "votes_count": 335,
+        "category": {
+            "id": 9,
+            "title": "Misc / Other"
+        }
+    },
+    {
+        "id": 22,
+        "title": "Geyser Fund",
+        "description": "On Geyser fund you can explore live crowdfunding projects, fund them on Bitcoin’s Lightning Network, and keep track of the projects.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/geyser-fund_cover.png",
+        "thumbnail_image": "https://user-images.githubusercontent.com/36778205/157433567-4b1e41db-23d4-4a80-b48f-ee248ee87f1e.jpg",
+        "screenshots": [],
+        "website": "https://geyser.fund/",
+        "lightning_address": "divineorgan67@walletofsatoshi.com",
+        "votes_count": 232,
+        "category": {
+            "id": 1,
+            "title": "Finance"
+        }
+    },
+    {
+        "id": 1,
+        "title": "Kollider",
+        "description": "The first real-time settled derivative exchange",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/kollider_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/kollider_thumbnail.png",
+        "screenshots": [
+            "https://t18307877.p.clickup-attachments.com/t18307877/87f5f10f-f462-4ec7-a0e7-65ac43f39d97/Screenshot%202022-03-01%20at%2023.34.23.png?view=open",
+            "https://t18307877.p.clickup-attachments.com/t18307877/7a17965b-30d3-473a-85ee-f7a1698f44e4/Screenshot%202022-03-01%20at%2023.35.06.png?view=open",
+            "https://t18307877.p.clickup-attachments.com/t18307877/8f75cdbb-de05-49c5-8f3c-4fcb260a49bf/Screenshot%202022-03-01%20at%2023.36.19.png?view=open"
+        ],
+        "website": "https://kollider.xyz/",
+        "lightning_address": "johns@getalby.com",
+        "votes_count": 220,
+        "category": {
+            "id": 1,
+            "title": "Finance"
+        }
+    },
+    {
+        "id": 20,
+        "title": "Lightning.Video",
+        "description": "Lightning.Video allows to paywall videos and receive payments for comments, subscriptions and tips.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-video_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-video_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lightning.video/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 205,
+        "category": {
+            "id": 7,
+            "title": "Media & News"
+        }
+    },
+    {
+        "id": 7,
+        "title": "Wavlake",
+        "description": "Wavlake directly connects artists and listeners on an open-source payment platform powered by Bitcoin & Lightning.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/wavlake_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/wavlake_thumbnail.png",
+        "screenshots": [],
+        "website": "https://www.wavlake.com/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 45,
+        "category": {
+            "id": 7,
+            "title": "Media & News"
+        }
+    },
+    {
+        "id": 12,
+        "title": "Bitrefill",
+        "description": "Bitrefill lets you buy vouchers, refill your phone, pay your bills and purchase incoming capacity for your Lightning node.",
+        "cover_image": "http://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/bitrefill_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/bitrefill_thumbnail.png",
+        "screenshots": [],
+        "website": "https://www.bitrefill.com/buy",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 25,
+        "category": {
+            "id": 8,
+            "title": "Shopping"
+        }
+    },
+    {
+        "id": 3,
+        "title": "Sparkshot",
+        "description": " Sparkshot is an art hosting platform that requires users to reveal the art by purchasing pixels in groups of one or more. Each purchase reveals those pixels and more of the underlying art.\r\n\r\nOnce all pixels have been purchased the art is fully revealled and we unlock the ability for the art to be downloaded and made free to go and live a life of its own. The art's page will remain on Sparkshot with the comments and metadata provided by the patrons. ",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sparkshot_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sparkshot_thumbnail.png",
+        "screenshots": [],
+        "website": "https://sparkshot.io/",
+        "lightning_address": "johns@getalby.com",
+        "votes_count": 11,
+        "category": {
+            "id": 3,
+            "title": "Art & Collectibles"
+        }
+    },
+    {
+        "id": 10,
+        "title": "Lightning Roulette",
+        "description": "Lightning Roulette is a website to win bitcoin by playing Roulette.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-roulette_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-roulette_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lightning-roulette.com/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 10,
+        "category": {
+            "id": 4,
+            "title": "Gaming"
+        }
+    },
+    {
+        "id": 15,
+        "title": "lnshort.it",
+        "description": "lnshort.it is a service to redirect URLs and generate QR codes using the Lightning Network for payments and logins.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnshort-it_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnshort-it_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lnshort.it/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 10,
+        "category": {
+            "id": 9,
+            "title": "Misc / Other"
+        }
+    },
+    {
+        "id": 17,
+        "title": "Lightning Gifts",
+        "description": "On Lightning Gifts you can create fee-less Bitcoin gift vouchers to share with friends, family, and your haters.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-gifts_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-gifts_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lightning.gifts/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 10,
+        "category": {
+            "id": 8,
+            "title": "Shopping"
+        }
+    },
+    {
+        "id": 5,
+        "title": "LN Blackjack",
+        "description": "LN Blackjack lets you play Blackjack and win bitcoin over the Lightning Network.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnblackjack_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnblackjack_thumbnail.png",
+        "screenshots": [],
+        "website": "https://www.lnblackjack.com/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 5,
+        "category": {
+            "id": 4,
+            "title": "Gaming"
+        }
+    },
+    {
+        "id": 23,
+        "title": "Bolt Boosters",
+        "description": "I wanted to create a way to monetize any video instantly and for free. A creator is able to create a unique link tied to their LN address to share with friends & followers. The user is able to stream sats instantly and for free after signing in with their @getalby LN address. \r\n\r\nThe market potential for this type of app is endless!",
+        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/27474095d5fea78afdf385c30ed3f761/6b6d831a",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/27474095d5fea78afdf385c30ed3f761/6b6d831a",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/dadd6fe367f993137972415dd3ba5b6d/46dde8e2",
+            "https://dl.airtable.com/.attachmentThumbnails/ad0410f4c8bf05073a8484d4eb7146ed/d0946f0a",
+            "https://dl.airtable.com/.attachmentThumbnails/815c6a76bd1aa7b07d2b92d47cbc4a78/b352fc1b"
+        ],
+        "website": "https://satsbuster.herokuapp.com/",
+        "lightning_address": "subirachs@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 24,
+        "title": "Sat Streamer",
+        "description": "Interact with the audience of your livestream through Lightning donations.\r\n- Lightning Address compatible\r\n- Text-to-speech: comedy ensured by reading out the messages or questions from you audience.\r\n- Crowdsource gifs from your audience \r\n\r\nIf you want to test out the live application, please use the regtest server, do not make an account on the mainnet experimental lndhub instance.\r\n\r\nLive Youtube example: https://www.youtube.com/watch?v=zAY8od3Z_LA&t=6015s",
+        "cover_image": "",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/fb4467e1e0a0a4baeaaed2a58cf9e2cd/e100876e",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/bbb72c8861bc8152bb1400b0ca0e4c5a/742bd6f6"
+        ],
+        "website": "https://satstreamer.vercel.app",
+        "lightning_address": "kiwiidb@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 25,
+        "title": "The Lightning tip gallery",
+        "description": "The Lightning tip gallery\r\nsend a stranger a tip. get your tip request listed here\r\n\r\nhttps://github.com/Zrce/tipwall-backend\r\nhttps://github.com/Zrce/tipwall-frontend",
+        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/2529b036b046446c1502ee110598b5da/bbecacbc",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/dbc9138739627cbe0598063c0d235f18/d7b0c9c2",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/51d39bf8493a38cff3de85de6e6a47e0/9a1f5b74",
+            "https://dl.airtable.com/.attachmentThumbnails/eb55a5a85d21d6c2ddcfe0895baf413b/2e5971a3"
+        ],
+        "website": "https://github.com/Zrce/tipwall-frontend",
+        "lightning_address": "tobitcoin@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 26,
+        "title": "Arion",
+        "description": "A fast, easy, bitcoin powered parking app that's on the user's side. Users can get on their way quicker, cities enforce parking easier, and local businesses benefit.",
+        "cover_image": "https://dl.airtable.com/.attachmentThumbnails/4a63e4bf9523de039fcca7bbb5d39b38/b799bb27",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/4a63e4bf9523de039fcca7bbb5d39b38/b799bb27",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/640706bbf4fe82f554e47313dcffdb03/fd421db7",
+            "https://dl.airtable.com/.attachmentThumbnails/ee696150c36ab7625582b768c4ee023f/7eba66f5",
+            "https://dl.airtable.com/.attachmentThumbnails/36d5e53432f94e8ba50649b5fc875b0f/7da5dc98",
+            "https://dl.airtable.com/.attachmentThumbnails/c56a91e4b77d51bd8ab283296e73bc7c/83c550f2",
+            "https://dl.airtable.com/.attachmentThumbnails/72b3e88b2bb67586f4616fbdc76574f7/ab159627",
+            "https://dl.airtable.com/.attachmentThumbnails/d2a02c77483cbe2679b3e35b78a216df/ca05ec1c",
+            "https://dl.airtable.com/.attachmentThumbnails/077493b1d9397bca8a3daa993e880529/6187ca63",
+            "https://dl.airtable.com/.attachmentThumbnails/ea1f5386080334b95965b09d33cdc03f/d47eda7f",
+            "https://dl.airtable.com/.attachmentThumbnails/9f22802092bb26522ea1c7ae889b82f4/ae0de49b"
+        ],
+        "website": "https://arionparking.tech/",
+        "lightning_address": "atlantabitdevs@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 27,
+        "title": "⚡ Payment Widgets",
+        "description": "Payment widgets make integrating ⚡ payments into your website a breeze. \r\n\r\n1. Go to https://webln.twentyuno.net/widget\r\n2. Fill in the form\r\n3. Generate embed code\r\n4. Embed the code into your website and start receiving payments today\r\n\r\nThis is how that would look on your website:\r\nhttps://codepen.io/reneaaron/full/VwybrvO \r\n\r\nThe widget supports WebLN but also provides fallback options (QR, Invoice) where WebLN is not available.",
+        "cover_image": "",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/34984c4a4e366373c3410887fab001ba/f1121463",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/73b6da7fb9802bf8aa4bdd212e4b1cbe/ebc0a61a"
+        ],
+        "website": "https://webln.twentyuno.net/widget",
+        "lightning_address": "reneaaron@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 28,
+        "title": "LNShop",
+        "description": "LNShop aims to provide a one-click, lightweight, e-commerce solution for the lightning network.\r\n\r\nWe built it from the ground up to be easy to setup as a static website that can allow free hosting and little to no maintenance.\r\n\r\nI supports easy setup where the client only needs to Create a spreadsheet of their inventory and provide a lighting address and have their shop up and running in as little as 15 minutes.\r\n\r\nhttps://www.figma.com/proto/6BWuYddHvFySbdikxll9tj/Ln-shop-Presentation?node-id=1010%3A2200&scaling=min-zoom&page-id=801%3A6671&starting-point-node-id=1009%3A1337\r\n\r\nhttps://www.loom.com/share/8b608dc58a6d489ab8f541641060111b",
+        "cover_image": "",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/b98eae93eaca66e2e006eab594a4c8d8/3f981698",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/a681f9f056ac0bc29ab39730d2db9bda/2279dcb8",
+            "https://dl.airtable.com/.attachmentThumbnails/bcbe86a0096e384a54900c0e04f89448/d6341045",
+            "https://dl.airtable.com/.attachmentThumbnails/e90632192df8d5b6d9dea9dc8cd80c51/e59c749a",
+            "https://dl.airtable.com/.attachmentThumbnails/bfffa80f1a76cfdfaaa29b5e44346f2b/57eccaf6",
+            "https://dl.airtable.com/.attachmentThumbnails/0e0881d4f0d3459cbbf270c760ca3e94/088f4023",
+            "https://dl.airtable.com/.attachmentThumbnails/f6ab4891cbe033fea641e34f2f05853f/1fb9d921"
+        ],
+        "website": "https://lnshop.github.io/lnshop/",
+        "lightning_address": "alivesession77@walletofsatoshi.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 2,
+        "title": "LN Markets",
+        "description": "LN Markets is a new type of Bitcoin derivatives trading platform, one that can only be accessed via the Lightning Network, a payment protocol running on top of Bitcoin.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnmarkets_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lnmarkets_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lnmarkets.com/",
+        "lightning_address": "johns@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 1,
+            "title": "Finance"
+        }
+    },
+    {
+        "id": 29,
+        "title": "Geyser Grants",
+        "description": "Geyser Grants makes it easy for anyone to contribute to a cause without having to look into every crowdfunding campaign. The Geyser Fund Board will search within and beyond Geyserfund campaigns to distribute them to the most relevant and impactful projects.\r\n\r\nhttps://www.loom.com/share/6442574f45344345abf0b5ae303b35a3",
+        "cover_image": "",
+        "thumbnail_image": "https://dl.airtable.com/.attachmentThumbnails/f62e158661995a11b6119e8ff4cc4ac2/fe0219e9",
+        "screenshots": [
+            "https://dl.airtable.com/.attachmentThumbnails/3e2d4e49d8aa7d6fb62c5a278b7bff68/249829a6",
+            "https://dl.airtable.com/.attachmentThumbnails/7540606967a04f51637731c0c6eb29c0/1abf8a61",
+            "https://dl.airtable.com/.attachmentThumbnails/f7cfff3ea2d125ebfa3ce9a1ac49df00/d7253e98",
+            "https://dl.airtable.com/.attachmentThumbnails/39492c2dabe7ebc78d62617cfd41103d/ae42cc14",
+            "https://dl.airtable.com/.attachmentThumbnails/7e86771958c7c5949bdbaa54545b341c/a7dd3e02"
+        ],
+        "website": "https://geyser.fund",
+        "lightning_address": "divineorgan67@walletofsatoshi.com",
+        "votes_count": 0,
+        "category": {
+            "id": 11,
+            "title": "Shock the Web ⚡️"
+        }
+    },
+    {
+        "id": 8,
+        "title": "LOFT",
+        "description": "LOFT allows you to trade investment products with bitcoin and uses the Lightning Network for a seamless user experience.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/loft-trade_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/loft-trade_thumbnail.png",
+        "screenshots": [],
+        "website": "https://loft.trade/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 1,
+            "title": "Finance"
+        }
+    },
+    {
+        "id": 14,
+        "title": "Sats 4 Likes",
+        "description": "Sats 4 Likes allows you to provide rewards for various tasks such as Twitter likes and followers or app reviews.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sats-4-likes-cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/sats-4-likes_thumbnail.png",
+        "screenshots": [],
+        "website": "https://kriptode.com/satsforlikes/index.html",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 9,
+            "title": "Misc / Other"
+        }
+    },
+    {
+        "id": 18,
+        "title": "Scarce City",
+        "description": "Scarce City is an auction marketplace for art. Bidders collateralize their bids with minimal fee lightning payments.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/scarce-city_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/scarce-city_thumbnail.png",
+        "screenshots": [],
+        "website": "https://scarce.city/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 3,
+            "title": "Art & Collectibles"
+        }
+    },
+    {
+        "id": 11,
+        "title": "Stacker News",
+        "description": "Stacker News is a crowd-sourced news aggregator with a Reddit-style voting mechanism using bitcoin.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/stacker-news_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/stacker-news_thumbnail.png",
+        "screenshots": [],
+        "website": "https://stacker.news/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 7,
+            "title": "Media & News"
+        }
+    },
+    {
+        "id": 21,
+        "title": "Starbackr",
+        "description": "Starbackr's plattform allows to post, follow, like, comment and support your favorite creators",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/starbackr_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/starbackr_thumbail.png",
+        "screenshots": [],
+        "website": "https://www.starbackr.com/",
+        "lightning_address": "moritz@geralby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 7,
+            "title": "Media & News"
+        }
+    },
+    {
+        "id": 4,
+        "title": "Amboss Space",
+        "description": "Amboss Space is a Lightning Network Explorer leveraging the Lightning Network for secure and seamless logins.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/amboss-space_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/amboss-space_thumbnail.png",
+        "screenshots": [],
+        "website": "https://amboss.space/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 6,
+            "title": "Analytics"
+        }
+    },
+    {
+        "id": 19,
+        "title": "Y'alls ",
+        "description": "Visitors on Y'alls can read and write articles with Lightning Network micropayments.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/yalls_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/yalls_thumbnail.png",
+        "screenshots": [],
+        "website": "https://yalls.org/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 2,
+            "title": "Social"
+        }
+    },
+    {
+        "id": 13,
+        "title": "Lightning Network Stores",
+        "description": "Lightning Network Stores provides a collection of stores and websites accepting Bitcoin payments over the Lightning Network.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-network-stores_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-network-stores_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lightningnetworkstores.com/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 8,
+            "title": "Shopping"
+        }
+    },
+    {
+        "id": 9,
+        "title": "Lightning Poker",
+        "description": "Lightning Poker is platform to play poker games with bitcoin over the Lightning Network.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-poker_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lightning-poker_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lightning-poker.com/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 4,
+            "title": "Gaming"
+        }
+    },
+    {
+        "id": 6,
+        "title": "LNGames",
+        "description": "LNGames is platform with several provably fair simple games integrating payments over the Lightning Network.",
+        "cover_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lngames_cover.png",
+        "thumbnail_image": "https://fra1.digitaloceanspaces.com/alby-storage/makers-bolt-fun/bolt.fund_thumbnails_covers/lngames_thumbnail.png",
+        "screenshots": [],
+        "website": "https://lngames.net/",
+        "lightning_address": "moritz@getalby.com",
+        "votes_count": 0,
+        "category": {
+            "id": 4,
+            "title": "Gaming"
+        }
+    }
+]
+
+
+categories = categories.map(c => ({ ...c, __typename: "Category" }))
+projects = projects.map(p => ({ ...p, __typename: "Project" }))
+
+// 2- Computed Fields
+categories = categories.map(c => ({ ...c, apps_count: projects.reduce((acc, p) => acc + (p.category.id === c.id ? 1 : 0), 0) }))
+
+export {
+    projects,
+    categories
+}
\ No newline at end of file
diff --git a/src/mocks/data/utils.ts b/src/mocks/data/utils.ts
new file mode 100644
index 0000000..bf38122
--- /dev/null
+++ b/src/mocks/data/utils.ts
@@ -0,0 +1,25 @@
+
+let coverImgsCntr = -1;
+
+export function getCoverImage() {
+    const coverImgs = [
+        'https://picsum.photos/id/10/1660/1200',
+        'https://picsum.photos/id/1000/1660/1200',
+        'https://picsum.photos/id/1002/1660/1200',
+        'https://picsum.photos/id/1008/1660/1200',
+    ]
+
+    return coverImgs[(++coverImgsCntr) % coverImgs.length]
+}
+let avatarImgsCntr = -1;
+
+export function getAvatarImage() {
+    const avatarImgs = [
+        'https://i.pravatar.cc/150?img=1',
+        'https://i.pravatar.cc/150?img=2',
+        'https://i.pravatar.cc/150?img=3',
+        'https://i.pravatar.cc/150?img=4',
+    ]
+
+    return avatarImgs[(++avatarImgsCntr) % avatarImgs.length]
+}
\ No newline at end of file