{"id":26139781,"url":"https://github.com/leanstacks/skeleton-ui-react","last_synced_at":"2025-04-14T00:50:47.135Z","repository":{"id":45610291,"uuid":"139286284","full_name":"leanstacks/skeleton-ui-react","owner":"leanstacks","description":"Welcome to the LEANSTACKS React starter project. This project provides a template to kickstart React single-page applications utilizing a curated Technology Stack for optimal testability, maintainability, and operability.","archived":false,"fork":false,"pushed_at":"2024-12-09T12:11:06.000Z","size":1018,"stargazers_count":3,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T15:49:28.563Z","etag":null,"topics":["react","typescript"],"latest_commit_sha":null,"homepage":"https://www.leanstacks.net/","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":"2018-06-30T23:06:17.000Z","updated_at":"2024-12-09T12:08:02.000Z","dependencies_parsed_at":"2024-05-27T22:48:51.795Z","dependency_job_id":"054fbdca-af8b-44f1-94b8-edfe82213d7d","html_url":"https://github.com/leanstacks/skeleton-ui-react","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fskeleton-ui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fskeleton-ui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fskeleton-ui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Fskeleton-ui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leanstacks","download_url":"https://codeload.github.com/leanstacks/skeleton-ui-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804773,"owners_count":21164131,"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":["react","typescript"],"created_at":"2025-03-11T02:36:55.739Z","updated_at":"2025-04-14T00:50:47.115Z","avatar_url":"https://github.com/leanstacks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Starter React UI\n\nA serverless, progressive, responsive starter user interface (UI) with React at the core of the technology stack.\n\n[![CI](https://github.com/leanstacks/skeleton-ui-react/actions/workflows/ci.yml/badge.svg)](https://github.com/leanstacks/skeleton-ui-react/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_ so long as it meets the password validation requirements. For example, try username `Bret` and password `aB123456789!`.\n\n## About\n\nThis project was bootstrapped with the [Vite](https://vitejs.dev/) React TypeScript template.\n\nThe technology stack includes:\n\n- Vite - the foundation\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- React Spring - animation\n- Lodash - utility functions\n- DayJS - date utility functions\n- TanStack React Table - tables and datagrids\n- Tailwind - styling\n- Font Awesome - icons\n- Testing Library React - tests\n- Vitest - tests\n- MSW - API mocking\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/leanstacks/skeleton-ui-react/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- Tailwind CSS IntelliSense (required)\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\nThe _Tailwind CSS IntelliSense_ extension is a must-have companion in all projects using Tailwind. The extension ensures that Tailwind CSS classes are named and ordered correctly and flags any conflicting classes.\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### `.env` files\n\n\u003e **NOTE:** Because they may contain sensitive information, `.env` files are not committed to the repository.\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_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 unit 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_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 [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: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 build`\n\nBuilds the app for production to the `dist` folder.\nIt correctly bundles React 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 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/leanstacks/skeleton-ui-react/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- [Vite][vite]\n- [TanStack][tanstack]\n- [Axios][axios]\n- [Formik][formik]\n- [Yup][yup]\n- [Tailwind CSS][tailwind]\n- [Font Awesome][fontawesome]\n- [Testing Library][testing-library]\n- [GitHub Actions][ghactions]\n\n[repo]: https://github.com/leanstacks/skeleton-ui-react 'GitHub Repository'\n[nvm]: https://github.com/nvm-sh/nvm 'Node Version Manager'\n[vite]: https://vitejs.dev/ 'Vite'\n[axios]: https://axios-http.com/ 'Axios'\n[formik]: https://formik.org/ 'Formik'\n[yup]: https://github.com/jquense/yup 'Yup'\n[tailwind]: https://tailwindcss.com/ 'Tailwind CSS'\n[fontawesome]: https://fontawesome.com/ 'Font Awesome'\n[tanstack]: https://tanstack.com/ 'TanStack'\n[testing-library]: https://testing-library.com/ 'Testing Library'\n[ghactions]: https://docs.github.com/en/actions 'GitHub Actions'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Fskeleton-ui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleanstacks%2Fskeleton-ui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Fskeleton-ui-react/lists"}