{"id":16961671,"url":"https://github.com/leanstacks/ionic8-playground","last_synced_at":"2025-04-11T22:11:37.446Z","repository":{"id":246370290,"uuid":"820029495","full_name":"leanstacks/ionic8-playground","owner":"leanstacks","description":"A playground application for Ionic 8 with React.","archived":false,"fork":false,"pushed_at":"2025-01-07T19:11:30.000Z","size":2145,"stargazers_count":3,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T18:11:12.683Z","etag":null,"topics":["ionic","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/leanstacks.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-25T16:50:26.000Z","updated_at":"2025-01-07T19:11:33.000Z","dependencies_parsed_at":"2024-09-29T23:20:45.743Z","dependency_job_id":"6ed61868-df1b-4274-9000-e17956bc5299","html_url":"https://github.com/leanstacks/ionic8-playground","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":0.02777777777777779,"last_synced_commit":"b3401b2df492bc1045f1c91a89643821c9e3794f"},"previous_names":["mwarman/ionic8-playground","leanstacks/ionic8-playground"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fionic8-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fionic8-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fionic8-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fionic8-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leanstacks","download_url":"https://codeload.github.com/leanstacks/ionic8-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487692,"owners_count":21112190,"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":["ionic","react","typescript"],"created_at":"2024-10-13T23:01:17.794Z","updated_at":"2025-04-11T22:11:37.396Z","avatar_url":"https://github.com/leanstacks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic 8 Playground\n\nA playground project for Ionic 8 with React.\n\n[![CI](https://github.com/mwarman/ionic8-playground/actions/workflows/ci.yml/badge.svg)](https://github.com/mwarman/ionic8-playground/actions/workflows/ci.yml)\n\n## Helpful Hints\n\n### Data\n\nThis project's API integration uses the simulated REST endpoints made available by [JSON Placeholder](https://jsonplaceholder.typicode.com/).\n\n### Authentication\n\nWhen running the application, you may sign in with any of the JSON Placeholder [Users](https://jsonplaceholder.typicode.com/users). Simply enter the _Username_ value from any user in the API and use any value for the _Password_. For example, try username `Bret` and password `abc123`.\n\n### Easter Eggs\n\n#### Diagnostics\n\nMany applications, particularly mobile applications, have a hidden page which displays content useful for troubleshooting and support. To access the diagnostics page, go to the _Account_ page. Locate the _About_ section and click or tap the _Version_ item 7 times.\n\n## About\n\nThis project was bootstrapped with the [Ionic CLI](https://ionicframework.com/docs/cli/commands/start).\n\n```\nionic start ionic8-playground blank --type=react\n```\n\nThe technology stack includes:\n\n- Ionic - the foundation\n- Vite - React development environment\n- React - SPA framework\n- React Router Dom - routing\n- TanStack React Query - data manipulation and caching\n- Axios - http client\n- Formik - form management\n- Yup - validation\n- Lodash - utility functions\n- DayJS - date utility functions\n- i18next - internationalization framework\n- Testing Library React - unit tests\n- Vitest - unit tests\n- MSW - API mocking\n- Cypress - end-to-end tests\n- TypeScript\n\n### Repository\n\nThis repository uses [trunk-based development](https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development). The latest code is located on the `main` branch. The `main` branch is always ready for deployment.\n\nFeatures are developed on branches named `feature/NNNNN` which are created from the `main` branch. The feature name used in the branch contains an issue identifier or a short name, e.g. `feature/123-do-something`.\n\nReleases are created on branches named `release/MM.mm.pp` which are created from the `main` branch. The release name follows the [semantic versioning](https://semver.org/) specification.\n\nHotfixes are created on branches named `release/MM.mm.pp` which are created from the appropriate `release/MM.mm.pp` branch.\n\nA pull request must be opened requesting merge from any branch back to `main`. GitHub actions perform continuous integration, CI, checks against the PR source branch. At least one code review approval is required to complete the pull request.\n\nSee also: [Feature flags](https://www.atlassian.com/continuous-delivery/principles/feature-flags)\n\n### Issue Management\n\nThis project uses [GitHub Issues](https://github.com/mwarman/ionic8-playground/issues).\n\n### Code Formatting\n\nThe project includes a configuration file for the [Prettier](https://prettier.io/docs/en/configuration.html) code formatter. This allows all project contributors to share the same code formatting rules.\n\nAdjust the Prettier configuration as desired.\n\n## Installation\n\n### Prerequistes\n\nIt is strongly recommended that you install Node Version Manager, [`nvm`][nvm]. Node Version Manager simplifies working on multiple projects with different versions of Node.js.\n\n### Clone the Repository\n\nOpen the [repository][repo] in a browser. Follow the instructions to clone the repository to your local machine.\n\n### Install Node\n\nOpen a terminal window and navigate to the project base directory. Issue the following command to install the version of Node and NPM used by the application:\n\n```bash\n# If you already have this version of Node, simply switch to it...\nnvm use\n\n# If you do NOT have this version of Node, install it...\nnvm install\n```\n\nNode Version Manager inspects the `.nvmrc` file in the project base directory and uses or installs the specified version of Node and the Node Package Manager, npm.\n\n### Install the Dependencies\n\nTo install the project dependencies, issue the following commands at a terminal prompt in the project base directory:\n\n```bash\n# Switch to the project node version...\nnvm use\n\n# Install project dependencies\nnpm install\n```\n\n### After Installation\n\nThe installation is now complete! You may open the project in your favorite source code editor (we recommend [Visual Studio Code](https://code.visualstudio.com/)).\n\nWe recommend the following VS Code extensions:\n\n- Prettier - Code formatter (required)\n- ESLint - Source code analysis (strongly recommended)\n- Ionic (optional)\n- Indent Rainbow (optional)\n- GitLens (optional)\n- Dotenv Official +Vault (optional)\n- GitHub Actions (optional)\n\nInstall the _Prettier_ extension to ensure that all project participants' contributions are formatted using the same rules. The extension leverages project-specific rules found in the `.prettierrc` file in the project base directory.\n\n## Configuration\n\nThe application is configured using Environment Variables. Because single-page applications are static, environment variable values are injected into the application during the build. The environment variables may be sourced from the environment or `.env` files as described in the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html).\n\n\u003e **NOTE:** Ionic Config provides a way to change the properties of Ionic components globally. This is different from application configuration. See the [Ionic Config](https://ionicframework.com/docs/developing/config) docs for more details.\n\n### `.env` files\n\n\u003e **NOTE:** Because they may contain sensitive information, `.env` files are not committed to the repository.\n\n\u003e **TIP:** When configuration values are modified, notify your DevOps team to modify the values in automation pipelines accordingly.\n\nAfter project installation and before running the application locally, create the following `.env` files in the project base directory. Learn more in the official [Vite guide for environment variables and modes](https://vitejs.dev/guide/env-and-mode.html).\n\n#### `.env.local`\n\nThe `.env.local` configuration file provides the configuration values when the application is started on a developer's local machine.\n\n```\n# Provided by Pipeline (Simulated)\nVITE_BUILD_DATE=1970-01-01\nVITE_BUILD_TIME=00:00:00\nVITE_BUILD_TS=1970-01-01T00:00:00+0000\nVITE_BUILD_COMMIT_SHA=local\nVITE_BUILD_ENV_CODE=local\nVITE_BUILD_WORKFLOW_RUNNER=local\nVITE_BUILD_WORKFLOW_NAME=local\nVITE_BUILD_WORKFLOW_RUN_NUMBER=1\nVITE_BUILD_WORKFLOW_RUN_ATTEMPT=1\n\n# API Configuration\nVITE_BASE_URL_API=https://jsonplaceholder.typicode.com\n\n# Toasts Configuration\nVITE_TOAST_AUTO_DISMISS_MILLIS=5000\n```\n\n#### `.env.test.local`\n\nThe `.env.test.local` configuration file provides configuration values used when tests are executed on a developer's local machine.\n\n\u003e **NOTE:** Use the same values when running tests in a CI/CD pipeline.\n\n```\n# Provided by Pipeline (Simulated)\nVITE_BUILD_DATE=1970-01-01\nVITE_BUILD_TIME=00:00:00\nVITE_BUILD_TS=1970-01-01T00:00:00+0000\nVITE_BUILD_COMMIT_SHA=test\nVITE_BUILD_ENV_CODE=test\nVITE_BUILD_WORKFLOW_RUNNER=test\nVITE_BUILD_WORKFLOW_NAME=test\nVITE_BUILD_WORKFLOW_RUN_NUMBER=1\nVITE_BUILD_WORKFLOW_RUN_ATTEMPT=1\n\n# API Configuration\nVITE_BASE_URL_API=https://jsonplaceholder.typicode.com\n\n# Toasts Configuration\nVITE_TOAST_AUTO_DISMISS_MILLIS=1500\n```\n\n# Available Scripts\n\nMany of the scripts leverage the [Ionic CLI](https://ionicframework.com/docs/cli), the [Vite CLI](https://vitejs.dev/guide/cli.html), or the [Vitest CLI](https://vitest.dev/guide/cli.html). Read more about them in their respective official guides.\n\nIn the project base directory, the following commands are available to run.\n\n### `npm run dev`\n\nRuns the app in the development mode.\nOpen [http://localhost:5173](http://localhost:5173) to view it in the browser.\n\nThe page will reload if you make edits.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\nSee the section about [running tests](https://vitest.dev/guide/cli.html) for more information.\n\n### `npm run test:coverage`\n\nRuns the test suites once and produces a coverage report. A detailed test coverage report is created in the `./coverage` directory.\n\n### `npm run test:ci`\n\nExecutes the test runner in `CI` mode and produces a coverage report. With `CI` mode enabled, the test runner executes all tests one time and prints a summary report to the console. A code coverage report is printed to the console immediately following the test summary.\n\nA detailed test coverage report is created in the `./coverage` directory.\n\n\u003e **NOTE:** This is the command which should be utilized by CI/CD platforms.\n\n### `npm run test:e2e`\n\nRuns all end-to-end (e2e) tests using the Cypress framework. See the [Cypress CLI](https://docs.cypress.io/guides/guides/command-line) documentation for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `dist` folder.\nIt correctly bundles in production mode and optimizes the build for the best performance.\n\nSee the official guide for more information about [building for production](https://vitejs.dev/guide/build.html) and [deploying a static site](https://vitejs.dev/guide/static-deploy.html).\n\n### `npm run lint`\n\nRuns the [ESLint][eslint] static code analysis and prints the results to the console.\n\n## DevOps\n\n### Cloud Resources\n\nThe AWS resources for this application component are provisioned via AWS CloudFormation. The `template.yml` file is the CloudFormation template.\n\nThe resources provisioned are:\n\n| Resource                | Description                                                                   |\n| ----------------------- | ----------------------------------------------------------------------------- |\n| S3 Bucket               | Contains the published application.                                           |\n| S3 Bucket Policy        | Provides access to the S3 Bucket from AWS CloudFront.                         |\n| CloudFront Distribution | A CloudFront distribution to serve the SPA application.                       |\n| CloudFront Distribution | A CloudFront distribution to serve the full-stack application (UI, API, etc). |\n| Route53 RecordSet       | An `A` record for the application distribution.                               |\n| Route53 RecordSet       | An `AAAA` record for the application distribution.                            |\n\n### CI/CD Pipelines\n\nThis project uses GitHub Actions to perform DevOps automation activities such as Continuous Integration and Continous Deployment. See all project [GitHub Actions workflow runs](https://github.com/mwarman/ionic8-playground/actions).\n\n| Workflow              | Trigger                        | Description                                                                          |\n| --------------------- | ------------------------------ | ------------------------------------------------------------------------------------ |\n| CI                    | Pull Request for `main` branch | Builds, lints, and tests the application. Validates the AWS CloudFormation template. |\n| Deploy to Development | Push to `main` branch          | Deploys AWS CloudFormation stack. Builds and deploys the application.                |\n| Deploy to QA          | Push to `release/*` branch     | Deploys AWS CloudFormation stack. Builds and deploys the application.                |\n| Deploy to Production  | Publish a Release              | Deploys AWS CloudFormation stack. Builds and deploys the application.                |\n\n## Related Information\n\n- [Ionic][ionic]\n- [Vite][vite]\n- [React][react]\n- [TanStack][tanstack]\n- [Axios][axios]\n- [Formik][formik]\n- [Yup][yup]\n- [Testing Library][testing-library]\n- [Vitest][vitest]\n- [Cypress][cypress]\n- [ESLint][eslint]\n- [GitHub Actions][ghactions]\n\n[repo]: https://github.com/mwarman/ionic8-playground 'GitHub Repository'\n[nvm]: https://github.com/nvm-sh/nvm 'Node Version Manager'\n[ionic]: https://ionicframework.com/docs/react 'Ionic with React'\n[vite]: https://vitejs.dev/ 'Vite'\n[react]: https://react.dev/ 'React'\n[axios]: https://axios-http.com/ 'Axios'\n[formik]: https://formik.org/ 'Formik'\n[yup]: https://github.com/jquense/yup 'Yup'\n[tanstack]: https://tanstack.com/ 'TanStack'\n[testing-library]: https://testing-library.com/ 'Testing Library'\n[vitest]: https://vitest.dev/ 'Vitest Testing Framework'\n[ghactions]: https://docs.github.com/en/actions 'GitHub Actions'\n[eslint]: https://eslint.org/docs/latest/ 'ESLint'\n[cypress]: https://docs.cypress.io/guides/overview/why-cypress 'Cypress Testing Framework'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Fionic8-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleanstacks%2Fionic8-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Fionic8-playground/lists"}