phlask · AnilKumar3494 · May 10, 2026 · May 11, 2026 · May 11, 2026 · May 12, 2026
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,6 @@
   "editor.acceptSuggestionOnEnter": "on",
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "cSpell.words": ["PHLASK", "supabase"]
 }
diff --git a/index.html b/index.html
@@ -2,7 +2,76 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#000000" />
+
+    <meta
+      name="description"
+      content="An ecosystem for finding and sharing free water, food, bathrooms, and foraging resources in Philadelphia."
+    />
+    <meta
+      name="keywords"
+      content="Free, free stuff, philadelphia, free stuff philadelphia, free resources, free resources philadelphia, free stuff philly, free resources philly, free water, free food, foraging, food foraging, free bathrooms, phlask, phlask philadelphia"
+    />
+    <meta name="robots" content="index, follow" />
+
+    <meta
+      property="og:title"
+      content="PHLASK - Sharing Free Resources in Philadelphia"
+    />
+    <meta
+      property="og:description"
+      content="PHLASK is an ecosystem for finding and sharing free resources (water, food, bathrooms, foraging) in Philadelphia."
+    />
+    <meta property="og:url" content="https://phlask.me" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://phlask.me/assets/images/phlask-tessellation.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="PHLASK - Sharing Free Resources in Philadelphia"
+    />
+    <meta
+      name="twitter:description"
+      content="An ecosystem for finding and sharing free resources in Philadelphia."
+    />
+    <meta
+      name="twitter:image"
+      content="https://phlask.me/assets/images/phlask-tessellation.png"
+    />
+
+    <link rel="canonical" href="https://phlask.me" />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "PHLASK",
+        "url": "https://phlask.me",
+        "description": "An ecosystem for finding and sharing free resources in Philadelphia",
+        "applicationCategory": "MapApplication",
+        "operatingSystem": "Web",
+        "about": {
+          "@type": "Organization",
+          "name": "PHLASK",
+          "url": "https://phlask.me",
+          "location": {
+            "@type": "Place",
+            "name": "Philadelphia"
+          }
+        }
+      }
+    </script>
+
+    <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <link
       rel="preload"
       as="image"
@@ -15,20 +84,12 @@
       href="https://fonts.googleapis.com/css2?family=Exo:wght@600;700&family=Inter:wght@500;600;700&family=Roboto:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
-
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/manifest.json b/manifest.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-dropzone": "^14.4.1",
+    "react-helmet-async": "^3.0.0",
     "react-hook-form": "7.69.0",
     "react-router": "^7.13.0",
     "react-toastify": "^11.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/favicon.png → public/assets/favicon.png b/src/assets/favicon.png → public/assets/favicon.png
diff --git a/src/assets/images/phlask-tessellation.png → public/assets/images/phlask-tessellation.png b/src/assets/images/phlask-tessellation.png → public/assets/images/phlask-tessellation.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,23 @@
+{
+  "short_name": "PHLASK",
+  "name": "PHLASK - Finding and sharing free resources in Philadelphia",
+  "description": "An ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia.",
+  "icons": [
+    {
+      "src": "/assets/favicon.png",
+      "type": "image/png",
+      "sizes": "800x808"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#26A9E0",
+  "background_color": "#FFFFFF",
+  "orientation": "portrait",
+  "categories": [
+    "utilities",
+    "social",
+    "maps"
+  ],
+  "lang": "en-US"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://phlask.me/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://phlask.me/</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/about</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/contact</loc>
+  </url>
+  <url>
+    <loc>https://phlask.me/join</loc>
+  </url>
+</urlset>
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
@@ -1,6 +1,7 @@
 import { Stack, Typography } from '@mui/material';
 import Page from 'components/Page/Page';
 import PhlaskNameVisualExplainer from 'components/PhlaskNameVisualExplainer/PhlaskNameVisualExplainer';
+import SEO from 'components/SEO/SEO';
 import type { ReactNode } from 'react';
 
 type PageSectionProps = {
@@ -28,6 +29,11 @@ const PageSection = ({ title = null, children }: PageSectionProps) => {
 
 const About = () => (
   <Page title="About PHLASK" data-cy="about">
+    <SEO
+      title="About"
+      description="Learn about PHLASK, an ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia."
+      canonicalUrl="https://phlask.me/about"
+    />
     <PageSection title="What is PHLASK?">
       PHLASK is an app that connects people in Philadelphia to free,
       life-sustaining resources. The interactive map shows users where to find

diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
@@ -6,6 +6,7 @@ import EmailConnect from 'components/EmailConnect/EmailConnect';
 import useIsMobile from 'hooks/useIsMobile';
 import FeedbackFormSuccess from 'components/forms/FeedbackFromSuccess/FeedbackFormSuccess';
 import useAddFeedbackMutation from 'hooks/mutations/useAddFeedbackMutation';
+import SEO from 'components/SEO/SEO';
 
 const TITLE = 'Contact';
 
@@ -19,6 +20,11 @@ const Contact = () => {
 
   return (
     <Page title={TITLE} data-cy="contact">
+      <SEO
+        title="Contact"
+        description="Get in touch with the PHLASK team to provide feedback, report issues, or ask questions about our free resource ecosystem in Philadelphia."
+        canonicalUrl="https://phlask.me/contact"
+      />
       {isSuccess ? (
         <FeedbackFormSuccess />
       ) : (

diff --git a/src/components/JoinTheTeam/JoinTheTeam.tsx b/src/components/JoinTheTeam/JoinTheTeam.tsx
@@ -3,10 +3,16 @@ import { Box, Link, List, ListItem, Stack, Typography } from '@mui/material';
 import Page from 'components/Page/Page';
 import PhlaskCirclesExplainer from 'components/PhlaskCircleExplainer/PhlaskCirclesExplainer';
 import AcknowledgementsSection from 'components/AcknowledgementsSection/AcknowledgementsSection';
+import SEO from 'components/SEO/SEO';
 
 const JoinTheTeam = () => {
   return (
     <Page title="Join the team" data-cy="join-team">
+      <SEO
+        title="Join the Team"
+        description="Become a volunteer with PHLASK. Join our community of developers, designers, and advocates working to make life-sustaining resources accessible to all in Philadelphia."
+        canonicalUrl="https://phlask.me/join"
+      />
       <Stack sx={{ color: '#2d3748', fontSize: 14, lineHeight: '24px' }}>
         PHLASK volunteers come from a wide array of socioeconomic, educational
         and technical backgrounds. The team is committed to non-hierarchical,

diff --git a/src/components/Providers/Providers.tsx b/src/components/Providers/Providers.tsx
@@ -7,23 +7,26 @@ import queryClient from 'services/queryClient';
 import ThemeProvider from './ThemeProvider';
 import { env } from 'config';
 import AnalyticsProvider from './AnalyticsProvider';
+import { HelmetProvider } from 'react-helmet-async';
 
 const REACT_GOOGLE_MAPS_API_KEY = env.VITE_REACT_GOOGLE_MAPS_API_KEY;
 
 const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <AnalyticsProvider>
-      <QueryClientProvider client={queryClient}>
-        <APIProvider apiKey={REACT_GOOGLE_MAPS_API_KEY} libraries={['places']}>
-          <ToolbarContextProvider>
-            <ThemeProvider>
-              <CssBaseline />
-              {children}
-            </ThemeProvider>
-          </ToolbarContextProvider>
-        </APIProvider>
-      </QueryClientProvider>
-    </AnalyticsProvider>
+    <HelmetProvider>
+      <AnalyticsProvider>
+        <QueryClientProvider client={queryClient}>
+          <APIProvider apiKey={REACT_GOOGLE_MAPS_API_KEY} libraries={['places']}>
+            <ToolbarContextProvider>
+              <ThemeProvider>
+                <CssBaseline />
+                {children}
+              </ThemeProvider>
+            </ToolbarContextProvider>
+          </APIProvider>
+        </QueryClientProvider>
+      </AnalyticsProvider>
+    </HelmetProvider>
   );
 };
 

diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx
@@ -0,0 +1,46 @@
+import { Helmet } from 'react-helmet-async';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  ogType?: string;
+  ogImage?: string;
+  canonicalUrl?: string;
+}
+
+const SEO = ({
+  title,
+  description,
+  ogType = 'website',
+  ogImage = 'https://phlask.me/assets/images/phlask-tessellation.png',
+  canonicalUrl
+}: SEOProps) => {
+  const siteTitle = 'PHLASK';
+  const fullTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  const defaultDescription =
+    'An ecosystem for finding and sharing free resources like water, food, bathrooms, and foraging in Philadelphia.';
+  const metaDescription = description || defaultDescription;
+  const url = canonicalUrl || 'https://phlask.me';
+
+  return (
+    <Helmet>
+      <title>{fullTitle}</title>
+      <meta name="description" content={metaDescription} />
+
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:type" content={ogType} />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={ogImage} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={fullTitle} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="twitter:image" content={ogImage} />
+
+      <link rel="canonical" href={url} />
+    </Helmet>
+  );
+};
+
+export default SEO;