WPRDC / wprdc-apps

Monorepo of everything related to frontend app development at the WPRDC.
0 stars 0 forks source link

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:

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