WPRDC Apps

Monorepo of everything related to frontend app development at the WPRDC.

ARCHITECTURE.md - gives a high-level overview of the codebase.

What's inside?

This monorepo is maintained using Turborepo and includes the following packages/apps:

Apps

All apps built using Next unless otherwise stated.

App	Description	Links
@wprdc/parcels-n-at	Parcel data explorer and downloader app.	📓 README
@wprdc/geomancer	Data mapping tool.	📓 README

Packages

The packages directory contains common libraries used by apps and shared tool configurations used everywhere.

Package	Description
@wprdc/ui	React component library shared by all WPRDC apps. This also includes some utilities (like formatters) and widgets: special composite components that use WPRDC APIs.
@wprdc/api	Typescript library that provides APIs to CKAN as well as domain-specific APIs that are designed around available data on the WPRDC.
@wprdc/types	Typescript type library that provides common types.
@wprdc/typescript-config	Common TypeScript configurations. Except for the package.json each file here is a tsconfig.json file. Packages and apps will each have their own tsconfig.json file that will extend from one of the files here. 📓 Reference
@wprdc/tailwind-config	Common Tailwind CSS configuration shared by UI library and applications. 📓 Reference
@wprdc/eslint-config	ESLint configurations. Each package and app will have its own .eslintrc.js that will extend from one of the common configurations here.

Developing

1. Install pnpm
2. Clone repo
3. Install dependencies - pnpm install
4. Run tasks...

Monorepo Tasks

The following tasks are defined:

• build - run package-specific build command
• lint - run ESLint per package
• type-check - check types across packages
• dev - run development mode for each package

Use --filter to limit tasks to specific packages or apps - reference

Tools Configuration

Several dev tools, frameworks and libraries have settings files scattered throughout the repo. Configuration files may be found at the root dir of the project,in the shared configuration libraries, and/or at the root of each individual application and project.

Tool	Description	Configuration Files
pnpm	Package manager.	pnpm-workspace.yaml pnpm-lock.yaml package.json
Turborepo	Monorepo build system	turbo.json package.json
Prettier	Opinionated Code Formatter	.prettierrc
tsup	Bundler used by Turborepo	tsup.config.ts
PostCSS	CSS Processor - used to bundle tailwind with code	postcss.config.js
Next	React framework	next.config.js next.config.*.js
PostCSS	CSS Processor - used to bundle tailwind with code	postcss.config.js

3rd part Libraries

The following libraries are heavily relied upon by the components and apps.

Library	Description
React Aria	Components/utils for building accessible React components.
MapLibre GL JS	Map rendering engine.
react-map-gl	React component wrapper for MapLibre GL JS maps.
React Icons	Provides Icons from various icon libraries