{"id":26139775,"url":"https://github.com/leanstacks/react-starter-kit","last_synced_at":"2025-03-11T02:36:53.052Z","repository":{"id":267620043,"uuid":"901495655","full_name":"leanstacks/react-starter-kit","owner":"leanstacks","description":"Welcome to the LEANSTACKS React starter kit. 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":"2025-03-07T20:18:27.000Z","size":591,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-07T20:30:02.168Z","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":"2024-12-10T19:05:45.000Z","updated_at":"2025-03-06T11:24:28.000Z","dependencies_parsed_at":"2025-01-09T20:18:11.942Z","dependency_job_id":"8a3ee64f-7615-488f-9ee5-f878b1bd9cde","html_url":"https://github.com/leanstacks/react-starter-kit","commit_stats":null,"previous_names":["leanstacks/react-starter-kit"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Freact-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Freact-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Freact-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leanstacks%2Freact-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leanstacks","download_url":"https://codeload.github.com/leanstacks/react-starter-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242960514,"owners_count":20213169,"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:52.601Z","updated_at":"2025-03-11T02:36:53.046Z","avatar_url":"https://github.com/leanstacks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Starter Kit\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/react-starter-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/leanstacks/react-starter-kit/actions/workflows/ci.yml)\n\n## Helpful Hints\n\n### Viewing the Starter Kit\n\nIf you do not wish to check out the repository and run the starter kit locally, you may view the latest release of the React Starter Kit at [https://react-starter.leanstacks.net/][app]. Please see the _Authentication_ section below for instructions to sign in.\n\n\u003e **NOTE:** This app does not collect any data and does not use cookies.\n\n### Data\n\nThis project's API integration uses the simulated REST endpoints made available by [JSON Placeholder](https://jsonplaceholder.typicode.com/).\n\nThere are some limitations to the JSON Placeholder APIs. The primary limitation is that the API is stateless. You may create (`post`), update (`put`), and delete items within the JSON Placeholder collections; however, the collections are not actually mutated and persisted by JSON Placeholder. Within the starter kit, we update the TanStack Query caches upon successful mutation to simulate a stateful back end.\n\n### Authentication\n\nWhen using 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 `Kamren` or `Samantha` and password `abc123`.\n\n## About\n\nThis project was bootstrapped with the [Vite](https://vitejs.dev/) React TypeScript template.\n\nThe production technology stack includes:\n\n- React - core web user interface library\n- React Router Dom - declarative component routing\n- TanStack Query - asynchronous state management, caching, and data fetching\n- Axios - http client\n- React Hook Form - form management, validation, error handling, custom fields, etc.\n- TailwindCSS - utility first CSS framework\n- React Spring - animations\n- Font Awesome - iconography\n- Google Fonts - typography\n- React i18next - internationalization\n- Yup - schema based validation\n- Lodash - utility functions\n- DayJS - date and time utility functions\n- TanStack Table - advanced tables and datagrids\n- Recharts - composable charting library for React\n\nThe development technology stack includes:\n\n- Vite - front end build tooling\n- Vitest - core unit test framework\n- React Testing Library - user-centric UI component testing\n- Mock Service Worker - API mocking\n- Storybook - UI component visualization and documentation\n- TypeScript - the TypeScript language\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/react-starter-kit/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- ESLint (recommended)\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 when source files are saved.\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## `npm run storybook`\n\nStarts the [Storybook][storybook] UI. Open [http://localhost:6006](http://localhost:6006) to view it in the browser.\n\n## `npm run build:storybook`\n\nBuild a static version the [Storybook][storybook] UI which may be deployed to a CDN or HTTP server.\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/react-starter-kit/actions).\n\n| Workflow              | Trigger                        | Description                                                                                            |\n| --------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------ |\n| CI                    | Pull Request for `main` branch | Builds, lints, and tests the application. Builds Storybook. 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- [React][react]\n- [React Router][reactrouter]\n- [TanStack][tanstack]\n- [Axios][axios]\n- [React Hook Form][reacthookform]\n- [Yup][yup]\n- [Tailwind CSS][tailwind]\n- [Class Variance Authority][cva]\n- [Font Awesome][fontawesome]\n- [React Spring][reactspring]\n- [React i18next][reacti18next]\n- [Recharts][recharts]\n- [React Testing Library][testing-library]\n- [Storybook][storybook]\n- [GitHub Actions][ghactions]\n\n[app]: https://react-starter.leanstacks.net/ 'React Starter Kit | LeanStacks'\n[repo]: https://github.com/leanstacks/react-starter-kit 'GitHub Repository'\n[nvm]: https://github.com/nvm-sh/nvm 'Node Version Manager'\n[react]: https://react.dev 'React'\n[reactrouter]: https://reactrouter.com/ 'React Router'\n[vite]: https://vitejs.dev/ 'Vite'\n[axios]: https://axios-http.com/ 'Axios'\n[reacthookform]: https://www.react-hook-form.com/ 'React Hook Form'\n[yup]: https://github.com/jquense/yup 'Yup'\n[tailwind]: https://tailwindcss.com/ 'Tailwind CSS'\n[cva]: https://cva.style/ 'Class Variance Authority'\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[reacti18next]: https://react.i18next.com/ 'React i18next'\n[reactspring]: https://www.react-spring.dev/ 'React Spring'\n[storybook]: https://storybook.js.org/ 'Storybook'\n[recharts]: https://recharts.org/ 'Recharts'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Freact-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleanstacks%2Freact-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleanstacks%2Freact-starter-kit/lists"}