npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

citydna-app-townhall-map

v1.8.0

Published

This is the experience run on the large TV screens in the town hall commons space. **It's final production build is a react component** _not_ a react app that is deployed and served.

Downloads

1

Readme

citydna-app-townhall-map

This is the experience run on the large TV screens in the town hall commons space. It's final production build is a react component not a react app that is deployed and served.

Instead, the final build is a UMD package that's published to NPM. From there, the platform-host-app consumes the package and side-loads the code in at runtime.

It's important to remember when developing this app that it's just loaded in like a component within the platform-host-app, so any context, theming, etc will influence the final output. This is intentional and allows for rapidly building websocket enabled experiences.

Features

The user flow is almost identical to the citydna-app-townhall-experience and really only differs in what's displayed on screen.

Development

The @citydna/platform exposes a helper component called AppPreview that helps you rapidly create apps for the platform. It's a development environment only and is not intended for production use. When you run yarn start for development, the 'app' will load up an instance of this and mock the devices. Read more.

Common components/code between this experience and the citydna-app-townhall-map have been abstracted out into a special @citydna/experience package for code reusability.

Scripts

  • yarn start - enter local development mode.
  • yarn start:dev - enter remote development mode. This will build your app using webpack and serve the resulting package at a public URL.
  • yarn build:app - create a package via webpack ready for distribution to NPM
  • yarn publish - publish the app to NPM (after running yarn build:app).

Config

Config for the apps are stored in the citydna-configs-bucket. These control things such as;

  • what data/resources are displayed and used
  • copy & translations for the apps, as well as custom images
  • how the app displays on the user's phone

A local copy of these is kept in /apps/citydna-app-townhall-public/public/config.