See the wiki for a more complete overview
- Goals
- Target Audience
- Related Sites
- Data Sources
- Example Sites
- Minimum Viable Product
- Stack
- Getting Started
- Structure
- Elected officials, policymakers, businesses, nonprofits and community members have access to accurate, recent data on San Jose economy.
- Reduce OED staff time spent servicing one-off data requests.
- Site traffic analytics
- Reduction in number of individual data requests to OED staff
- Use of dashboard in discussions about San Jose economy (Committee and Council meetings, public meetings, etc)
- San Jose elected officials, policy makers and other local government staff
- Real estate developers, brokers and investors
- Nonprofit organizations that make advocate on specific policy issues (urbanism, housing, business climate)
- Journalists writing about San Jose
- Companies looking to relocate to San Jose
- People looking to live in San Jose
- Current San Jose residents
- As needed for reports, articles, etc (infrequently)
- Monthly Community and Economic Development Committee meetings
- Quarterly updates
- Viewers
- Users of the data (e.g. journalists, analysts, researchers)
- Data entry (back-end)
- Developers
- Analysts looking at visit analytics
San Jose Office of Economic Development - Current San Jose site done in wordpress
| Data | Description | Link | Rough size | Update frequency | Access (API, manual) |
|---|---|---|---|---|---|
(List any existing city or external systems that should be integrated with this site.) Ideally the indicators would be populated from the City of San Jose's open data portal
San Diego's economic dashboard
California Center for Jobs & the Economy
Boston's transportation agency performance dashboard
- Static webpage showing key numbers for current quarter and change from previous year (no interactive charts)
- Look-and-feel is consistent with SJeconomy.com website (doesn't have to be perfect match, but passable)
- Share alpha version with Office of Economic Development staff in early April
- Launch beta version to San Jose elected officials at April 25, 2016 Community and Economic Development Committee meeting
See the package.json for the full set of libraries/tools used
- React - https://facebook.github.io/react/
- All styles are set and maintained in external files. All tags, classnames, ids are set in jsx.
- React-redux - http://redux.js.org/
- scss - http://sass-lang.com/
- Bootstrap - http://getbootstrap.com/
- nvd3 - http://nvd3.org/
- D3 - https://d3js.org/
The server is simply for development to support hot module replacement
- Koa - http://koajs.com/
Currently there is not a backend. In the future if one needs to be created, node will be used so that code can be shared between the front and back ends.
If there are any eslint errors, the build will fail.
- npm - https://www.npmjs.com/
- better-npm-run - https://www.npmjs.com/package/better-npm-run
- babel - https://babeljs.io/
- webpack - https://webpack.github.io/
- travis (github integration) - https://travis-ci.org/
- eslint - http://eslint.org/
- Uses the standard rules (http://standardjs.com/rules.html) via https://www.npmjs.com/package/eslint-config-standard
- phantomjs - http://phantomjs.org/
- sinon - http://sinonjs.org/
- chai - http://chaijs.com/
- codecov - https://codecov.io/
- karma - https://karma-runner.github.io/0.13/index.html
The project uses the react-reduct-starter-kit by Dave Zukowski
Just clone the repo and install the necessary node modules:
$ git clone https://github.com/codeforsanjose/economic-indicators-dashboard.git
$ cd economic-indicators-dashboard.git
$ npm install # Install Node modules listed in ./package.json (may take a while the first time)
$ npm start # Compile and launchTo deploy to gh-pages
# In the economic-indicators-dashboard folder, run the following
$ npm clean # Remove the dist folder which contains the compiled pieces
$ npm run deploy # Generate a clean build in the dist folder
# Clone the gh-pages branch into a different folder (e.g. branches folder)
$ git clone -b gh-pages https://github.com/codeforsanjose/economic-indicators-dashboard.git
$ cd economic-indicators-dashboard.git # cd into the gh-branches version of economic-indicators-dashboard
$ git rm *.js *.css # remove the previous bundles of the css and js
# copy the bundled *.js, *.css and index.html from the dist folder to the gh-branches folder
# edit the index.html and prepend '/economic-indicators-dashboard' to the path for the *.js and *.css
# commit the changes to the gh-pages branchGreat, now that introductions have been made here's everything in full detail:
| Script | Description |
|---|---|
npm start |
Spins up Koa server to serve your app at localhost:3000. HMR will be enabled in development. |
npm run compile |
Compiles the application to disk (~/dist by default). |
npm run dev |
Same as npm start, but enables nodemon to automatically restart the server when server-related code is changed. |
npm run dev:nw |
Same as npm run dev, but opens the redux devtools in a new window. |
npm run dev:no-debug |
Same as npm run dev but disables redux devtools. |
npm run test |
Runs unit tests with Karma and generates a coverage report. |
npm run test:dev |
Runs Karma and watches for changes to re-run tests; does not generate coverage reports. |
npm run deploy |
Runs linter, tests, and then, on success, compiles your application to disk. |
npm run flow:check |
Analyzes the project for type errors. |
npm run lint |
Lint all .js files. |
npm run lint:fix |
Lint and fix all .js files. Read more on this. |
NOTE: Deploying to a specific environment? Make sure to specify your target NODE_ENV so webpack will use the correct configuration. For example: NODE_ENV=production npm run compile will compile your application with ~/build/webpack/_production.js.
.
├── bin # Build/Start scripts
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── coverage # Test coverage results - NOT CHECKED IN
├── dist # Files to deploy - NOT CHECKED IN
├── interfaces # Type declarations for Flow
├── node_modules # Results from npm install - NOT CHECKED IN
├── server # Koa application (uses webpack middleware)
│ └── main.js # Server application entry point
├── src # Application source code
│ | ├── client
│ | | ├── server # Koa application (uses webpack middleware)
│ | | | └── main.js # Server application entry point
│ | | ├── app
│ | | | ├── charts # nvd3 pieces
│ | | | ├── components # Generic React Components (generally Dumb components)
│ | | | ├── config # Constants, urls pieces
│ | | | ├── containers # Components that provide context (e.g. Redux Provider)
│ | | | ├── layouts # Components that dictate major page structure
│ | | | ├── redux # Redux-specific pieces
│ | | | │ ├── modules # Collections of reducers/constants/actions
│ | | | │ └── utils # Redux-specific helpers
│ | | | ├── routes # Application route definitions
│ | | | ├── static # Static assets (not imported anywhere in source code)
│ | | | ├── styles # Application-wide styles (generally settings)
│ | | | ├── views # Components that live at a route
│ | | | ├── index.html # index.html
│ | | | └── main.js # Application bootstrap and rendering
└── tests # Unit tests