{"id":19236874,"url":"https://github.com/crunchydata/spatial-suite-demo-webapp","last_synced_at":"2025-04-21T05:32:41.224Z","repository":{"id":35821488,"uuid":"215358439","full_name":"CrunchyData/spatial-suite-demo-webapp","owner":"CrunchyData","description":null,"archived":false,"fork":false,"pushed_at":"2023-05-07T00:59:34.000Z","size":1556,"stargazers_count":1,"open_issues_count":6,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-01T10:35:36.808Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrunchyData.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-15T17:32:32.000Z","updated_at":"2023-10-06T10:19:25.000Z","dependencies_parsed_at":"2024-11-09T16:25:04.639Z","dependency_job_id":"83b201ef-91e3-4dc8-b23d-4c2ddb709286","html_url":"https://github.com/CrunchyData/spatial-suite-demo-webapp","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/CrunchyData%2Fspatial-suite-demo-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrunchyData%2Fspatial-suite-demo-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrunchyData%2Fspatial-suite-demo-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrunchyData%2Fspatial-suite-demo-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrunchyData","download_url":"https://codeload.github.com/CrunchyData/spatial-suite-demo-webapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250002306,"owners_count":21359091,"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":[],"created_at":"2024-11-09T16:23:49.347Z","updated_at":"2025-04-21T05:32:41.205Z","avatar_url":"https://github.com/CrunchyData.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crunchy Data PostGIS Day Demo - Web Client\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Getting Started\n\nRun `npm install` the first time to fetch and install dependencies.\n\nRun `npm start` to run the app in development mode. More info in the [Available Scripts](#npm-start) section.\n\nWhen ready to deploy, run [`npm run build`](#npm-run-build) to compile/bundle the app.\n\n## Project Info\n\n### Folder Structure\n\n- `public/` - Contains a few static assets, including the `index.html` template. We may never need to touch this directory again, except maybe to add a `favicon.ico`. [More info](https://create-react-app.dev/docs/using-the-public-folder)\n- `src/` - Contains our app code\n  - `api/` - Modules to handle API requests\n  - `components/` - Components to be reused across multiple views\n  - `views/` - Our \"views\". These are the \"page\" components that render when the user selects a different page in the header nav.\n\n### State Management\n\nThere are no third-party state management libraries in use at this time. This project is small enough to use React's built-in state management.\n\n### UI Framework\n\nThis project uses [PatternFly](https://www.patternfly.org/v4/) for UI components.\n\nPatternFly an opinionated UI framework and design guidelines.\u003cbr /\u003e\n(This may seem somewhat familiar to anyone who has used Material-UI components with Google's Material Design guidelines.)\n\nThe PatternFly React library gives us components for nearly _everything_. For example, [there is even a `\u003cText\u003e` component](https://www.patternfly.org/v4/documentation/react/components/text/) just for placing text onto a page (which is required for \"heading\" elements [e.g. `\u003ch1\u003e`] to display properly). While working on this project, you may find it useful to reference the PatternFly documentation quite often at first.\n\n### CSS\n\nLocal component CSS goes in [CSS Modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/). This is a simple solution that gives us \"locally-scoped\" CSS, so there's no need for other methods, such as BEM.\n\nThis project has SASS installed, so feel free to use it when convenient.\n\n#### A note about PatternFly and CSS\n\nFor this project (or any project that uses PatternFly), it is best to use [PatternFly's global CSS variables](https://www.patternfly.org/v4/documentation/react/overview/css-variables/) whenever possible. This helps to maintain a cohesive and consistent UI (colors, fonts, spacing, transitions, etc.) and UX.\n\nFor example, you might add a background and border to a component like this:\n\n```css\n/* MyComponent.module.css */\n\n.myComponent {\n  background-color: var(--pf-global--BackgroundColor--100);\n  border-width: var(--pf-global--BorderWidth--md);\n  border-style: solid;\n  border-color: var(--pf-global--BorderColor--100);\n}\n```\n\n### Style Guide\n\nWe mostly follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), with some modifications.\n\nThe style is enforced using ESLint, so it is highly recommended to use an ESLint plugin with your editor.\n\nESLint rules can be found in `.eslintrc.js`.\n\n### Recommended Editor Plugins\n\n#### [ESLint](https://eslint.org/docs/user-guide/integrations#editors)\n\nESLint helps maintain consistent styles and best practices. This plugin is recommended because it helps to enforce our styles and can prevent unsafe code.\n\nOur ESLint configuration can be found in `.eslintrc.js`.\n\n#### [EditorConfig](https://editorconfig.org/#download)\n\nEditorConfig automatically applies formatting settings found in `.editorconfig`.\n\n#### [TypeScript](https://www.typescriptlang.org/)\n\nAlthough this project is not written in TypeScript, many third part libraries (including PatternFly) provide TypeScript type definitions.\n\nInstalling the TypeScript extension into your editor makes your editor \"type-aware\". This is great for things like autocompletion/IntelliSense and, depending on your settings, design-time safety checks.\n\nYou may notice some [TypeScript syntax inside JSDoc annotations](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc) in this project.\n\n_Note: If using Visual Studio Code (open source, runs everywhere), the TypeScript extension is already included and enabled by default._\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr /\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will automatically reload if you make edits.\n\nYou will also see some lint errors in the console. The lint errors in the console are from a minimal set of ESLint rules included with create-react-app. They do not include our custom configuration. It is recommended to use an ESLint plugin in your editor.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr /\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr /\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr /\u003e\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n## Contributing\n\nSee [CONTRIBUTING](CONTRIBUTING.md)\n\n## Related Projects\n\nService layer: https://github.com/CrunchyData/spatial-suite-rest-demo\n\n## Deployment\n\nhttp://frontend-scfire.openshift-pousty-apps.gce-containers.crunchydata.com/\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrunchydata%2Fspatial-suite-demo-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrunchydata%2Fspatial-suite-demo-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrunchydata%2Fspatial-suite-demo-webapp/lists"}