diff --git a/.gitignore b/.gitignore
index 8485e98..df68c0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-ignore
\ No newline at end of file
+ignore
+node_modules
\ No newline at end of file
diff --git a/globals.d.ts b/globals.d.ts
new file mode 100644
index 0000000..5baf3c5
--- /dev/null
+++ b/globals.d.ts
@@ -0,0 +1,6 @@
+import { useState as useReactState, useEffect as useReactEffect } from "react";
+
+declare global {
+  const useState: typeof useReactState;
+  const useEffect: typeof useReactEffect;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f74f4cc
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "bwe-demos",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.2.34"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..e01a2c5
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,28 @@
+lockfileVersion: '6.0'
+
+devDependencies:
+  '@types/react':
+    specifier: ^18.2.34
+    version: 18.2.34
+
+packages:
+
+  /@types/prop-types@15.7.9:
+    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
+    dev: true
+
+  /@types/react@18.2.34:
+    resolution: {integrity: sha512-U6eW/alrRk37FU/MS2RYMjx0Va2JGIVXELTODaTIYgvWGCV4Y4TfTUzG8DdmpDNIT0Xpj/R7GfyHOJJrDttcvg==}
+    dependencies:
+      '@types/prop-types': 15.7.9
+      '@types/scheduler': 0.16.5
+      csstype: 3.1.2
+    dev: true
+
+  /@types/scheduler@0.16.5:
+    resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
+    dev: true
+
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
diff --git a/src/LandingPage.jsx b/src/LandingPage.jsx
index a4ded95..ab114b8 100644
--- a/src/LandingPage.jsx
+++ b/src/LandingPage.jsx
@@ -1,7 +1,8 @@
-State.init({ isDebug: true, showMonitor: true });
+const [isDebug, setIsDebug] = useState<bool>(true);
+const [showMonitor, setShowMonitor] = useState<bool>(true);
 
 const buildUrl = (componentPath) => {
-  return `/${componentPath}?isDebug=${state.isDebug}&showMonitor=${state.showMonitor}`;
+  return `/${componentPath}?isDebug=${isDebug}&showMonitor=${showMonitor}`;
 };
 
 return (
@@ -49,8 +50,8 @@ return (
               type="checkbox"
               value=""
               id="flexCheckDefault"
-              checked={state.isDebug}
-              onChange={() => State.update({ isDebug: !state.isDebug })}
+              checked={isDebug}
+              onChange={() => setIsDebug(!isDebug)}
             />
             <label className="form-check-label" for="flexCheckDefault">
               Enable debug mode
@@ -62,8 +63,8 @@ return (
               type="checkbox"
               value=""
               id="flexCheckChecked"
-              checked={state.showMonitor}
-              onChange={() => State.update({ showMonitor: !state.showMonitor })}
+              checked={showMonitor}
+              onChange={() => setShowMonitor(!showMonitor)}
             />
             <label className="form-check-label" for="flexCheckChecked">
               Display Component monitor
diff --git a/src/Posts/Feed.jsx b/src/Posts/Feed.tsx
similarity index 84%
rename from src/Posts/Feed.jsx
rename to src/Posts/Feed.tsx
index 96999ca..876e6bf 100644
--- a/src/Posts/Feed.jsx
+++ b/src/Posts/Feed.tsx
@@ -1,10 +1,49 @@
 const GRAPHQL_ENDPOINT = "https://near-queryapi.api.pagoda.co";
 
-const [sort, setSort] = useState(null);
+const [sort, setSort] = useState("");
 const [loading, setLoading] = useState(false);
-const [posts, setPosts] = useState([]);
+const [posts, setPosts] = useState<Post[]>([]);
 
-async function fetchGraphQL(operationsDoc, operationName, variables) {
+interface PostsResponse {
+  data: {
+    dataplatform_near_social_feed_moderated_posts: Post[];
+    dataplatform_near_social_feed_moderated_posts_aggregate: {
+      aggregate: {
+        count: number;
+      };
+    };
+  };
+}
+
+interface Post {
+  account_id: string;
+  block_height: number;
+  block_timestamp: number;
+  content: string;
+  receipt_id: string;
+  accounts_liked: string[];
+  last_comment_timestamp: number;
+  comments: {
+    account_id: string;
+    block_height: number;
+    block_timestamp: string;
+    content: string;
+  }[];
+  verifications: {
+    human_provider: string;
+    human_valid_until: string;
+    human_verification_level: string;
+  }[];
+}
+
+const a = 1;
+console.log(a);
+
+async function fetchGraphQL(
+  operationsDoc,
+  operationName,
+  variables
+): Promise<PostsResponse> {
   const response = await fetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
     method: "POST",
     headers: { "x-hasura-role": "dataplatform_near" },
@@ -14,7 +53,7 @@ async function fetchGraphQL(operationsDoc, operationName, variables) {
       operationName: operationName,
     }),
   });
-  const result = await response.json();
+  const result: PostsResponse = await response.json();
   return result;
 }