{"id":19678152,"url":"https://github.com/ryanccollins/corporate-dashboard","last_synced_at":"2025-06-10T20:32:44.709Z","repository":{"id":57318342,"uuid":"67607264","full_name":"RyanCCollins/corporate-dashboard","owner":"RyanCCollins","description":":fire: A blazingly fast corporate dashboard single page web application, built with a focus on component oriented design with React, Relay \u0026 GraphQL","archived":false,"fork":false,"pushed_at":"2017-10-11T02:17:15.000Z","size":3085,"stargazers_count":52,"open_issues_count":1,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T22:19:25.444Z","etag":null,"topics":["apollo","graphql","grommet","grommet-ux-library","react","redux"],"latest_commit_sha":null,"homepage":"https://corporate-dashboard-client.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanCCollins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-07T13:06:36.000Z","updated_at":"2023-08-21T08:39:40.000Z","dependencies_parsed_at":"2022-08-25T20:41:22.319Z","dependency_job_id":null,"html_url":"https://github.com/RyanCCollins/corporate-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fcorporate-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fcorporate-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fcorporate-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fcorporate-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanCCollins","download_url":"https://codeload.github.com/RyanCCollins/corporate-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251426834,"owners_count":21587659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","graphql","grommet","grommet-ux-library","react","redux"],"created_at":"2024-11-11T17:36:27.469Z","updated_at":"2025-04-29T03:31:15.368Z","avatar_url":"https://github.com/RyanCCollins.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Code Ship Badge](https://codeship.com/projects/940a8cf0-626f-0134-d657-165525e8bcef/status?branch=master)\n\n# Corporate Dashboard\n\n## About\nA corporate dashboard web application, built with a focus on component oriented design, UI / UX and performance. Built with React, Redux and GraphQL.\n\n## Background\nA performance oriented single page web application built using cutting edge techniques and technologies, including the Flux Unidirectional Data Flow, and Component Oriented Design. Written in cutting-edge Functional JavaScript transpiled via Babel and Webpack, following the AirBnB Style Guide.  The application has full test coverage on every component, container and page.\n\nRuns a GraphQL-based backend and serves data from JSON and CSV files.  Uses accessibility and UX best practices to provide a reactive mobile-first web user interface.  Loading a complex data model via Apollo Client, the application handles all of the data flow through the Flux pattern, while still allowing for colocated component oriented design.  It loads data in realtime, polling the server at regular intervals.\n\nUsing complex chart components from the Grommet UX library, the application provides an interactive GUI for exploring data.\n\nThe application includes the following views:\n\n1. A geospatial view, identifying the number of employees at various company locations.\n2. A “key metrics” view, containing components displaying: the number of open issues, a line chart reflecting number of paying customers over a period of time, and a bar chart reflecting number of reported issues over a period of time.\n3. A “data view” of all issues, with an appearance similar to a spreadsheet, that is sortable and filterable.\n  - The data view uses polling to load data from the server at a set interval.\n  - The components are built to be extremely, reactive.\n\n## Getting Started\nThe project started as a fork of the [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate) project.  Please reference the repository for details on the features and conventions of the boilerplate.\n\n## Installing\nThe package.json file includes over a dozen npm scripts to make most tasks a breeze.\n\nInstallation can be achieved by running\n```\nnpm run setup\n```\n\nTo get the development server running, please run\n```\nnpm run start\n```\n\n### Scripts\nScripts can be referenced from the [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate) Project repo.\n\nIf you just want to serve the minified and chunked bundles, which might be faster, you can run\n```\nnpm run serve:bundle\n```\n\nIn production, the client connects to the heroku server.  You can run the server locally with the following command.\n```\nNODE_ENV=development node server\n```\n\n#### Testing\nThe test suite contains over 70 tests and can be run with\n```\nnpm run test\n```\n\n## Deployment\nThe app is deployed to Heroku and has a CI suite running with Codeship.  It is running Express JS and GraphQL on the server.\n\n# Built With\n- [GraphQL](http://graphql.org/learn/)\n- [ApolloClient](https://github.com/apollostack/apollo-client)\n- [React](https://facebook.github.io/react/)\n- [Redux](https://github.com/reactjs/redux)\n- [Grommet UX](https://github.com/RyanCCollins/grommet)\n- [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate)\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Troubleshooting\nWhen working with a team on a project that uses Node, it is important that everyone use the same version of node and npm.\nIn the case of this project, we are using Node version 5.2.0.\n\nInstructions for installing NVM and setting your node version for the project can be [found here](https://gist.github.com/RyanCCollins/1a5686ff9dd51b72eb2d4dc70aa6c1f4).\n\nIf you get an error message, such as \"Unexpected token import\", that means that your Babel installation is not working right.  Please see [here](https://github.com/babel/babel/issues) for potential troubleshooting steps.\n\n## Acknowledgments\nMany thanks to the Grommet UX teams and the teams building React, Redux, GraphQL and Apollo.\n\n## Screen Shots\n![Main](https://github.com/RyanCCollins/cdn/blob/master/portfolio-image-gallery-images/corporate-dashboard/main-mockup.jpg?raw=true)\n![Data Page](https://github.com/RyanCCollins/cdn/blob/master/portfolio-image-gallery-images/corporate-dashboard/main-images/data-view-main.png?raw=true)\n![Key Metrics](https://github.com/RyanCCollins/cdn/blob/master/portfolio-image-gallery-images/corporate-dashboard/main-images/key-metrics-main.png?raw=true)\n![Geospatial](https://github.com/RyanCCollins/cdn/blob/master/portfolio-image-gallery-images/corporate-dashboard/main-images/geospatial.png?raw=true)\n![Home With Nav](https://github.com/RyanCCollins/cdn/blob/master/portfolio-image-gallery-images/corporate-dashboard/main-images/home-nav.png?raw=true)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanccollins%2Fcorporate-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanccollins%2Fcorporate-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanccollins%2Fcorporate-dashboard/lists"}