Language-Mapping · ankit0504 · Apr 20, 2026 · Apr 20, 2026 · Apr 20, 2026 · Apr 22, 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
@@ -24,34 +24,33 @@
     "jest-canvas-mock": "^2.2.0",
     "match-sorter": "^4.2.0",
     "material-table": "1.68.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-device-detect": "^1.17.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.14.0",
     "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",
-    "typescript": "3.9.5",
+    "typescript": "4.9.5",
     "webfontloader": "^1.6.28"
   },
   "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 +63,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%",

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'
 

diff --git a/src/components/details/DetailedIntro.tsx b/src/components/details/DetailedIntro.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export const DetailedIntro: FC<DetailedIntroProps> = (props) => {
   const { data, shareNoun, isInstance, langDescripID, children } = props
   const classes = useStyles()
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   return (
     <Grow in timeout={500} style={{ transformOrigin: 'top center' }}>

diff --git a/src/components/details/LocationLink.tsx b/src/components/details/LocationLink.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Link, Popover } from '@material-ui/core'
+import { Button, Popover } from '@material-ui/core'
 import { BiMapPin } from 'react-icons/bi'
 
 import { NeighborhoodList } from 'components/details'
@@ -42,7 +42,7 @@ export const LocationLink: FC<LocationLinkProps> = (props) => {
   const id = open ? 'neighbs-menu-popover' : undefined
   const handleClose = () => setAnchorEl(null)
 
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     setAnchorEl(event.currentTarget)
   }
@@ -77,18 +77,14 @@ export const LocationLink: FC<LocationLinkProps> = (props) => {
           onClose={() => handleClose()}
         />
       </Popover>
-      <Link
-        href="#"
-        role="button"
+      <Button
         className={classes.link}
         title="Show neighborhood or town options"
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore // TODO: mas tarde...
         onClick={handleClick}
       >
         <BiMapPin />
         {linkText}
-      </Link>
+      </Button>
     </>
   )
 }
diff --git a/src/components/details/types.ts b/src/components/details/types.ts
@@ -23,8 +23,8 @@ export type DetailedIntroProps = TonsOfData & {
 }
 
 export type LocationLinkProps = TonsOfData & {
-  anchorEl: HTMLDivElement | null
-  setAnchorEl: React.Dispatch<HTMLDivElement | null>
+  anchorEl: HTMLElement | null
+  setAnchorEl: React.Dispatch<HTMLElement | null>
 }
 
 export type DetailsProps = {

diff --git a/src/components/explore/hooks.tsx b/src/components/explore/hooks.tsx
@@ -1,7 +1,11 @@
 import { useQuery } from 'react-query'
 import Airtable from 'airtable'
 
-import { AIRTABLE_BASE, reactQueryDefaults } from 'components/config'
+import {
+  AIRTABLE_API_KEY,
+  AIRTABLE_BASE,
+  reactQueryDefaults,
+} from 'components/config'
 import {
   AirtableOptions,
   TonsOfFields,
@@ -10,7 +14,9 @@ import {
 } from './types'
 
 const airtableQuery = async (tableName: string, options: AirtableOptions) => {
-  const base = new Airtable().base(options?.baseID || AIRTABLE_BASE)
+  const base = new Airtable({ apiKey: AIRTABLE_API_KEY }).base(
+    options?.baseID || AIRTABLE_BASE
+  )
 
   // CRED: github.com/Airtable/airtable.js/issues/69#issuecomment-414394657
   return base(tableName).select(options).all()

diff --git a/src/components/generic/Logo.tsx b/src/components/generic/Logo.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ReactComponent as ProjectLogo } from '../../img/logo.svg'
+import ProjectLogo from '../../img/logo.svg?react'
 
 type LogoProps = {
   darkTheme?: boolean

diff --git a/src/components/generic/ReadMore.tsx b/src/components/generic/ReadMore.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Link } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 
 import { ToggleableSection, MarkdownWithRouteLinks } from 'components/generic'
 
@@ -69,18 +69,16 @@ export const ReadMore: FC<ReadMoreProps> = (props) => {
   })
 
   const ToggleDescription = (
-    <Link
-      href="#"
+    <Button
       className={classes.link}
-      onClick={(e: React.MouseEvent) => {
-        e.preventDefault()
+      onClick={() => {
         setShowDescrip(!showDescrip)
       }}
     >
       <span className={classes.innerText}>{`Read ${
         showDescrip ? 'less' : 'more'
       }`}</span>
-    </Link>
+    </Button>
   )
 
   return (

diff --git a/src/components/home/FiltersWarning.tsx b/src/components/home/FiltersWarning.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useContext } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Link } from '@material-ui/core'
+import { Button, Link } from '@material-ui/core'
 
 import { GlobalContext } from 'components/context'
 import { Explanation } from 'components/generic'
@@ -36,18 +36,15 @@ export const FiltersWarning: FC = () => {
   const BadgeDot = <div className={classes.badgeDot} />
 
   const ClearFilters = (
-    <Link
+    <Button
       title="Clear table filters"
-      href="#"
       color="primary"
-      onClick={(e: React.MouseEvent) => {
-        e.preventDefault()
-
+      onClick={() => {
         dispatch({ type: 'CLEAR_FILTERS', payload: 555 }) // TODO: fix, obvi
       }}
     >
       clear
-    </Link>
+    </Button>
   )
 
   const TableLink = (

diff --git a/src/components/legend/WorldRegionMap.tsx b/src/components/legend/WorldRegionMap.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import { Link } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 
 import { ToggleableSection, Explanation } from 'components/generic'
@@ -27,15 +27,13 @@ export const WorldRegionMap: FC = () => {
   const [showWorldMap, setShowWorldMap] = useState<boolean>(false)
 
   const WorldMapToggle = (
-    <Link
-      href="#"
-      onClick={(e: React.MouseEvent) => {
-        e.preventDefault()
+    <Button
+      onClick={() => {
         setShowWorldMap(!showWorldMap)
       }}
     >
       {showWorldMap ? 'Hide' : 'Show'} world map
-    </Link>
+    </Button>
   )
 
   const WorldMapTip = (

diff --git a/src/components/map/MapCtrlBtns.tsx b/src/components/map/MapCtrlBtns.tsx
@@ -64,7 +64,7 @@ const ctrlBtnsConfig = [
 export const MapCtrlBtns: FC<MapCtrlBtnsProps> = (props) => {
   const { onMapCtrlClick, isMapTilted } = props
   const classes = useStyles()
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     setAnchorEl(event.currentTarget)

diff --git a/src/components/map/MapOptionsMenu.tsx b/src/components/map/MapOptionsMenu.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
-import { Link, Button, Popover, Typography } from '@material-ui/core'
+import { Button, Popover, Typography } from '@material-ui/core'
 
 import { DialogCloseBtn } from 'components/generic/modals'
 import { useMapToolsState, useMapToolsDispatch } from 'components/context'
@@ -10,8 +10,8 @@ import { routes } from 'components/config/api'
 import { BaseLayerToggles } from './BaseLayerToggles'
 
 type MapOptionsMenuProps = {
-  anchorEl: HTMLDivElement | null
-  setAnchorEl: React.Dispatch<HTMLDivElement | null>
+  anchorEl: HTMLElement | null
+  setAnchorEl: React.Dispatch<HTMLElement | null>
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -131,8 +131,7 @@ export const MapOptionsMenu: FC<MapOptionsMenuProps> = (props) => {
         >
           View options
         </Button>
-        <Link
-          component={Button}
+        <Button
           size="small"
           className={classes.censusLink}
           color="secondary"
@@ -141,7 +140,7 @@ export const MapOptionsMenu: FC<MapOptionsMenuProps> = (props) => {
           onClick={() => mapToolsDispatch({ type: 'CLEAR_CENSUS_FIELD' })}
         >
           Clear selection
-        </Link>
+        </Button>
       </div>
       <BaseLayerToggles />
       <DialogCloseBtn tooltip="Close map menu" onClose={() => handleClose()} />

diff --git a/src/components/map/config.ts b/src/components/map/config.ts
@@ -4,7 +4,7 @@ import { nonCensusPolygonConfig } from './config.non-census-poly'
 
 export * from './config.points'
 
-export const MAPBOX_TOKEN = process.env.REACT_APP_MB_TOKEN
+export const MAPBOX_TOKEN = import.meta.env.REACT_APP_MB_TOKEN
 export const NYC_LAT_LONG = { latitude: 40.7128, longitude: -74.006 }
 export const initialMapState = { ...NYC_LAT_LONG, zoom: 8.5 }
 export const POINT_ZOOM_LEVEL = 13 // clicked point or single-result filter