build it up, Nepal! 🧱

Project

Powered by Build up Nepal and Viz for Social Good. Check it here.

Development

• Install pnpm (if necessary).
• pnpm install.
• pnpm dev.

References

• Nepal Wikipedia page.
• Nepal - Subnational Administrative Boundaries dataset (HDX).
• Mapshaper.
• @modulz/design-system.
• Five-number summary Wikipedia page.
• Flag of Nepal and Flag of Nepal Wikipedia page.
• devtools.fm: Pedro Duarte - Modulz, Radix, Stitches.
• Pedro Duarte's website.

Notes

• Mapshaper:
  • Documentation.
  • npm package.
• GADM data.
• vite-react-stitches-radix template.
• pnpm create vite -- --template react.
• pnpm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import @joaopalmeiro/prettier-config.
• pnpm eslint --init.
• pnpm install prop-types react-simple-maps.
• prop-types package.
• nepal-geojson package.
• Open Data Nepal website.
• topojson Python package.
• shapefile.
• Stitches:
  • pnpm install @modulz/design-system @stitches/react @radix-ui/colors.
  • CSS-in-JS.
  • It supports SSR.
  • Utils: custom CSS properties.
  • The as prop can be used to define the HTML tag.
  • API documentation. Styling documentation.
  • The @stitches/core package can be used in Svelte. The main difference is that the API returns class names instead of React components.
  • css prop as an alternative to the style attribute.
• Radix Colors:
  • They are JavaScript objects.
  • Colors, combinations, and use cases.
• pnpm install lodash.isempty lodash.range lodash.sample lodash.merge. Lodash Modularized packages.
• pnpm install just-remove.
• pnpm install @radix-ui/react-tooltip.
• Hooks:
  • usehooks-ts package.
  • react-hook packages.
• How to draw SVG image on canvas with Konva.
• Part 1: Fabric.js on React blog post by April Escobar.
• canvg package.
• Ramda package.
• Underscore package.
• Grid.js and gridjs-react package (tables).
• supabase-py package.
• Sim Daltonism app.
• @pmndrs/branding package.
• React Three Fiber documentation. Horizontal tiles example.
• React Helmet.
• Microlink Cards and @microlink/cards package. Custom template (Adobe preset + Simple preset).
• pnpm install -D svgo. pnpm run svgo --help.
• Card validator (Twitter).