Language-Mapping · ankit0504 · Apr 20, 2026 · Apr 20, 2026 · Apr 22, 2026 · Apr 27, 2026
diff --git a/.eslintrc b/.eslintrc
@@ -27,7 +27,6 @@
   "extends": [
     "airbnb-typescript",
     "airbnb/hooks",
-    "react-app",
     "prettier/react",
     "plugin:jest/recommended",
     "plugin:react/recommended",
@@ -40,7 +39,12 @@
     // last configuration in the extends array.
     "plugin:prettier/recommended"
   ],
-  "ignorePatterns": ["scratch", "src/serviceWorker.ts", "build"],
+  "ignorePatterns": [
+    "scratch",
+    "build",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ],
   "rules": {
     "array-bracket-newline": [
       "error",
@@ -178,6 +182,6 @@
     "import/newline-after-import": "error",
     "import/extensions": 0,
     "import/prefer-default-export": 0,
-    "@typescript-eslint/no-unused-vars": ["error"]
+    "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }]
   }
 }
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -17,9 +17,9 @@
     <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <!-- CRED: favicon stuff: https://realfavicongenerator.net/ -->
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v=2.1">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v=2.1">
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico?v=2.1" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2.1">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2.1">
+    <link rel="icon" href="/favicon.ico?v=2.1" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-title" content="Languages of NYC">
@@ -29,7 +29,7 @@
       name="description"
       content="An interactive language diversity map of New York City"
     />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v=2.2">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2.2">
     <meta property="og:title" content="Languages of New York City Map" />
     <meta property="og:site_name" content="Languages of New York City Map" />
     <meta property="og:url" content="https://languagemap.nyc/" />
@@ -56,17 +56,8 @@
       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/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json?v=2.1" />
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v=2.1" color="#379587">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json?v=2.1" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2.1" color="#379587">
     <title>Languages of New York City</title>
   </head>
   <body>
@@ -82,6 +73,7 @@
     <!-- End Google Tag Manager (noscript) -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
   <script>
     const earlyAccessPath = 'https://fonts.googleapis.com/earlyaccess/'

diff --git a/package.json b/package.json
@@ -3,40 +3,46 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.10.2",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/lab": "^5.0.0-alpha.176",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
     "@sentry/react": "^5.24.2",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.5",
     "@testing-library/user-event": "^7.1.2",
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^24.0.0",
     "@types/match-sorter": "^4.0.0",
     "@types/node": "^14.0.13",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.26",
     "@types/react-map-gl": "^5.2.7",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/react-swipeable-views": "^0.13.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^1.8.2",
     "@types/webfontloader": "^1.6.32",
     "airtable": "^0.10.1",
+    "clsx": "^1.1.1",
+    "filefy": "^0.1.10",
+    "history": "^5.0.0",
     "jest-canvas-mock": "^2.2.0",
+    "jspdf": "^2.1.0",
+    "jspdf-autotable": "^3.5.13",
+    "mapbox-gl": "^1.11.1",
     "match-sorter": "^4.2.0",
-    "material-table": "1.68.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-device-detect": "^1.17.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-map-gl": "^5.2.7",
     "react-map-gl-geocoder": "^2.0.16",
     "react-markdown": "^5.0.3",
     "react-query": "^2.12.1",
     "react-query-devtools": "^2.6.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
     "react-share": "^4.2.1",
-    "react-swipeable-views": "^0.13.9",
     "react-transition-group": "^4.4.1",
     "react-window": "^1.8.5",
     "simple-statistics": "^7.3.2",
@@ -46,12 +52,12 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-airbnb-typescript": "^8.0.2",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
     "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^23.18.0",
@@ -64,18 +70,17 @@
     "lint-staged": "^10.2.11",
     "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
-    "prettier-eslint-cli": "^5.0.0"
+    "prettier-eslint-cli": "^5.0.0",
+    "vite": "^6.0.7",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -88,15 +93,6 @@
       "last 1 safari version"
     ]
   },
-  "peerDependencies": {
-    "@material-ui/styles": "^4.10.0",
-    "clsx": "^1.1.1",
-    "filefy": "^0.1.10",
-    "history": "^5.0.0",
-    "jspdf": "^2.1.0",
-    "jspdf-autotable": "^3.5.13",
-    "mapbox-gl": "^1.11.1"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -107,6 +103,8 @@
   },
   "resolutions": {
     "material-table/jspdf": "^2.1.0",
-    "material-table/jspdf-autotable": "^3.5.13"
+    "material-table/jspdf-autotable": "^3.5.13",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.26"
   }
 }
diff --git a/src/components/AppWrap.tsx b/src/components/AppWrap.tsx
@@ -1,7 +1,9 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import { InteractiveMap } from 'react-map-gl'
-import { Hidden } from '@material-ui/core'
+import { Hidden } from '@mui/material'
 
 import { panelWidths } from 'components/panels/config'
 import { PanelWrap, usePanelState, ShowPanelBtn } from 'components/panels'
@@ -45,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) =>
         [theme.breakpoints.up('xl')]: {
           left: (props: Style) => (props.open ? panelWidths.midLarge : 0),
         },
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
           top: PANEL_TITLE_BAR_HT_MOBILE,
           width: '100%',
           bottom: (props: Style) =>

diff --git a/src/components/about/AboutPageView.tsx b/src/components/about/AboutPageView.tsx
@@ -1,6 +1,9 @@
 import React, { FC } from 'react'
 import { useQuery } from 'react-query'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 
 import { LoadingIndicator } from 'components/generic/modals'
 import { AboutPageProps, WpApiPageResponse } from './types'
@@ -19,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
         boxShadow: theme.shadows[8],
         // Prevent screenshots from getting lost in Paper bg if same color:
         // outline: 'solid 1px hsl(0deg 0% 40%)',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
           margin: '0.5rem 0',
         },
       },

diff --git a/src/components/about/FeedbackForm.tsx b/src/components/about/FeedbackForm.tsx
@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import makeStyles from '@mui/styles/makeStyles'
+import createStyles from '@mui/styles/createStyles'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/src/components/about/FeedbackModal.tsx b/src/components/about/FeedbackModal.tsx
@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 
 import { SimpleDialog } from 'components/generic/modals'
 import { FeedbackForm } from 'components/about'

diff --git a/src/components/about/FeedbackToggle.tsx b/src/components/about/FeedbackToggle.tsx
@@ -1,6 +1,8 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Button } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
+import { Button } from '@mui/material'
 
 import { FeedbackModal } from 'components/about'
 import { Explanation, UItextFromAirtable } from 'components/generic'

diff --git a/src/components/about/WaysToHelp.tsx b/src/components/about/WaysToHelp.tsx
@@ -1,5 +1,8 @@
 import React, { FC } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+
+import makeStyles from '@mui/styles/makeStyles'
+import createStyles from '@mui/styles/createStyles'
 
 import { BasicExploreIntro } from 'components/explore'
 import { UItextFromAirtable } from 'components/generic'

diff --git a/src/components/about/WelcomeDialog.tsx b/src/components/about/WelcomeDialog.tsx
@@ -1,12 +1,14 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   Typography,
   Backdrop,
-} from '@material-ui/core'
+} from '@mui/material'
 
 import { MarkdownWithRouteLinks, useUItext, Logo } from 'components/generic'
 import { WelcomeFooter } from './WelcomeFooter'
@@ -20,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       justifyContent: 'center',
       paddingTop: '1rem',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         padding: '1rem 0.75rem 0.75rem',
       },
     },
@@ -42,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
       fontSize: '1rem',
       paddingTop: '1.5rem',
       paddingBottom: '1.5rem',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         paddingLeft: '1.25rem',
         paddingRight: '1.25rem',
         '& p': {
@@ -56,10 +58,10 @@ const useStyles = makeStyles((theme: Theme) =>
         marginLeft: theme.spacing(3),
         marginRight: theme.spacing(3),
       },
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         marginBottom: 0,
         marginTop: 0,
-        maxHeight: `calc(100% - ${theme.spacing(4)}px)`,
+        maxHeight: `calc(100% - ${theme.spacing(4)})`,
       },
     },
   })
@@ -112,14 +114,13 @@ export const WelcomeDialog: FC = () => {
       open={open}
       onClose={handleClose}
       disableEscapeKeyDown
-      disableBackdropClick
       aria-labelledby="welcome-dialog-title"
       aria-describedby="welcome-dialog-description"
       maxWidth="sm"
       BackdropProps={{ classes: { root: backdrop } }}
       PaperProps={{ classes: { root: paper }, elevation: 24 }}
     >
-      <DialogTitle disableTypography className={dialogTitle}>
+      <DialogTitle className={dialogTitle}>
         <WelcomeDialogTitle />
       </DialogTitle>
       <DialogContent dividers className={dialogContent}>

diff --git a/src/components/about/WelcomeFooter.tsx b/src/components/about/WelcomeFooter.tsx
@@ -1,12 +1,14 @@
 import React, { FC, useState } from 'react'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import createStyles from '@mui/styles/createStyles'
+import makeStyles from '@mui/styles/makeStyles'
 import {
   Button,
   Checkbox,
   DialogActions,
   FormControlLabel,
   Typography,
-} from '@material-ui/core'
+} from '@mui/material'
 
 import { HIDE_WELCOME_LOCAL_STG_KEY } from './config'
 

diff --git a/src/components/config/api.ts b/src/components/config/api.ts
@@ -1,6 +1,7 @@
 import { RouteLocation } from './types'
 
-export const AIRTABLE_API_KEY = process.env.REACT_APP_AIRTABLE_API_KEY as string
+export const AIRTABLE_API_KEY = import.meta.env
+  .REACT_APP_AIRTABLE_API_KEY as string
 export const AIRTABLE_BASE = 'applPEl3BsnpuszQu'
 export const AIRTABLE_CENSUS_BASE = 'appjb6Qnp4lTNz7Gn'