Find the State UI

Find all the States in the contiguous USA on a map. Simple enough.

• Live URL
• Frontend UI GitHub - Built with TypeScript, React, and Next.js
• Backend API GitHub - Built with Python and FastAPI

Run

# Install deps
yarn

# Run locally
yarn dev

# Build
yarn build:static

# Run unit tests
yarn test:unit

# Run e2e tests
yarn test:e2e

# Run headless e2e tests
yarn test:e2e:headless

# Run all tests
yarn test

Built With

• React
• TypeScript
• Next.js
• Material-UI
• Styled-Components
• Mapbox
• use-sound
• useSWR

I used a few new libraries during the building of this project. I took some notes below on things I needed to reference often, both new and old.

Folder Structure

For the most part, the structure of the project is what you'd expect from a normal Next.js app. The main thing I wanted to point out was that I use a ./src/program folder that mirrors the main ./src structure, but is specifically for files that are unique to this project. The reason I do this is because I share a lot of the same "base" code in my projects, so this lets me iterate as I make new projects, building up my base, while keeping my "program" files somewhat separate.

MUI

• Material Design Library docs

Typography Components

Default Theme Object

Icon List

Palette

DataGrid

• DataGrid API

Mapbox / Mapbox GL JS

• API reference
• Examples
• Mapbox terminology explanation
• Good info on how to style a Choropleth

Mapbox Basics

Sources

Sources are like data stores in the map. You then use layers to visually represent the data.

In this app, the main source is the states data loaded from 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson' as geojson.

Types of sources:

• GeoJSON
• Vector Tilesets

Layers

Layers are considered the visual representation of a source. There can be multiple layers representing a source:

• fill: represents boundaries as shared polygons
• line: represents boundaries as an outline
• symbol: represents text labels

Features

A feature is an individual (or in some cases, a group of) points, lines, or polygons in a dataset or in a tileset. These points, lines, and polygons represent an entity in the real world, such as a landmark, a road, or a park. A feature contains:

• Geometry: The shape and the location of each feature.
• Properties: This can contain any JSON object. Some examples of common properties, often known as metadata, include title and description.

Dataset

A dataset is an editable collection of GeoJSON features that you can store in your Mapbox account and access or edit as needed.

Tileset

A tileset is a collection of raster or vector data broken up into a uniform grid of square tiles at 22 preset zoom levels. In Mapbox libraries and SDKs, tilesets are necessary to make maps visible on mobile devices or in the browser. They are cacheable and load quickly, and Mapbox relies heavily on tilesets to keep our maps performant.

Notes

• Was using https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson as my states geojson source before. Now importing it directly.

Favicon

I found favicon.io from John Sorrentino randomly. I dig it because it made using an emoji as the favicon easy - will use it again.

Screenshot

Used screely for the screenshot. Very simple to use and export.

Sound

• Used use-sound from Joshua Comeau to play the music. Dude killed it.
• The music is from the freemusicarchive - credit to the The United States Army Old Guard Fife and Drum Corps.

Other Notes

This project was made with The Libertines "Don't Look Back Into the Sun - EP" (Apple Music) (Spotify) playing on repeat.

License

MIT