{"id":26294694,"url":"https://github.com/everton-dgn/boilerplate_vite","last_synced_at":"2026-01-11T02:43:52.806Z","repository":{"id":37048285,"uuid":"497518446","full_name":"everton-dgn/boilerplate_vite","owner":"everton-dgn","description":"This project is a complete React.js boilerplate, constantly updated, configured in the smallest details to serve as the basis for large professional projects that intend to scale.","archived":false,"fork":false,"pushed_at":"2023-09-27T06:21:51.000Z","size":2692,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-09-27T08:21:52.877Z","etag":null,"topics":["eslint","husky","prettier","react","rtl","storybook","styled-components","svgr","typescript","vite","vitejs","vitest"],"latest_commit_sha":null,"homepage":"https://boilerplate-vite.querocriarsite.com/","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/everton-dgn.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}},"created_at":"2022-05-29T07:19:33.000Z","updated_at":"2023-10-02T07:42:41.497Z","dependencies_parsed_at":"2023-01-27T10:16:11.593Z","dependency_job_id":null,"html_url":"https://github.com/everton-dgn/boilerplate_vite","commit_stats":null,"previous_names":["everton-dgn/boilerplate_vite"],"tags_count":5,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everton-dgn%2Fboilerplate_vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/everton-dgn","download_url":"https://codeload.github.com/everton-dgn/boilerplate_vite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681024,"owners_count":20330152,"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":["eslint","husky","prettier","react","rtl","storybook","styled-components","svgr","typescript","vite","vitejs","vitest"],"created_at":"2025-03-15T03:31:31.631Z","updated_at":"2026-01-11T02:43:52.797Z","avatar_url":"https://github.com/everton-dgn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"./LICENSE\"\u003e![GitHub](https://img.shields.io/github/license/everton-dgn/boilerplate_vite?style=plastic)\u003c/a\u003e\n![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=react-webpack-styled-components-boilerplate\u0026style=plastic)\n![GitHub repo size](https://img.shields.io/github/repo-size/everton-dgn/boilerplate_vite?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/everton-dgn/boilerplate_vite?color=yellow\u0026style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/v/release/everton-dgn/boilerplate_vite?color=orange\u0026style=plastic)\n![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/everton-dgn/boilerplate_vite?style=plastic)\n![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release\u0026style=plastic)\n\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eBoilerplate Complete and updated with React.js, Vite, Typescript, Styled-Components and Tests\u003c/h1\u003e\n\n\u003cbr /\u003e\n\n# :memo: About the Project\n\nThis application is a boilerplate for complex and large systems, especially those that need to scale with security and code quality.\n\nWe sought to achieve 3 pillars: readability, reusability, and refactorability.\n\nIn the construction of the UI, the Atomic Design structure was chosen, organizing the global components into atoms, molecules, organisms and templates.\n\nIn addition to being constantly updated, this project was configured in the smallest details to serve as a basis for professional projects that require standardized and easy-to-maintain code architecture and design.\n\n\u003cbr /\u003e\n\n---\n\n# :pushpin: Contents\n\n- [Technologies](#globe_with_meridians-technologies)\n- [Features](#triangular_flag_on_post-features)\n- [Prerequisites](#white_check_mark-prerequisites)\n- [How to install and run the project](#question-how-to-install-and-run-the-project)\n  - [Clone Repository](#clone-repository)\n  - [Install Dependencies](#install-dependencies)\n  - [Start Development Environment](#start-development-environment)\n  - [Generate Production Build](#generate-production-build)\n  - [Generate Development Build](#generate-development-build)\n  - [Start Production Environment](#start-production-environment)\n  - [Run Tests](#run-tests)\n  - [Run Tests in Watch Mode](#run-tests-in-watch-mode)\n  - [Launch Storybook in Development Mode](#launch-storybook-in-development-mode)\n  - [Generate Storybook Production Build](#generate-storybook-production-build)\n  - [Run Lints](#run-lints)\n  - [Format code with prettier](#format-code-with-prettier)\n  - [Check for Available Updates for Dependencies](#check-for-available-updates-for-dependencies)\n  - [Generate Semantic Releases](#generate-semantic-releases)\n- [Important Considerations](#rotating_light-important-considerations)\n- [Author](#technologist-author)\n\n\u003cbr /\u003e\n\n---\n\n# :globe_with_meridians: Technologies\n\n⚛ React.js\n\n🔥 TypeScript\n\n💅 Styled-Components\n\n🚩 Lints: Husky, ESlint, Commitlint, Lint-Staged, Prettier, EditorConfig and Typecheck\n\n🌸 Semantic Release\n\n✅ Vitest\n\n🐙 React Testing Library\n\n📝 Storybook\n\n🔧 Vite\n\n\u003cbr /\u003e\n\n---\n\n# :triangular_flag_on_post: Features\n\n- [x] Responsive design;\n\n- [x] Atomic Design;\n\n- [x] Accessible for mouseless navigation and screen readers;\n\n- [x] Custom hook for:\n\n  - [x] set page title dynamically;\n\n- [x] Theme created with styled-components without using a provider and no need to access theme properties with arrow functions;\n\n- [x] 100% coverage in tests including: components, templates, pages and hooks;\n\n- [x] Detection prefers-reduced-motion;\n\n\u003cbr /\u003e\n\n---\n\n# :white_check_mark: Prerequisites\n\n- node (latest version lts)\n\n- yarn\n\n\u003cbr /\u003e\n\n---\n\n# :question: How to install and run the project\n\n## Clone Repository\n\n```bash\ngit clone https://github.com/everton-dgn/boilerplate_vite.git\n```\n\n## Install Dependencies\n\n```bash\nyarn\n```\n\n## Start Development Environment\n\n```bash\nyarn dev\n```\n\nAvailable in http://localhost:3000\n\n## Generate Production Build\n\n```bash\nyarn build:prod\n```\n\n## Generate Development Build\n\n```bash\nyarn build:dev\n```\n\nAvailable in http://localhost:3000\n\n## Run Tests\n\n```bash\nyarn test\n```\n\n## Run Tests in Watch Mode\n\n```bash\nyarn test:w\n```\n\n## Run Tests CI\n\n```bash\nyarn test:ci\n```\n\n## Launch Storybook in Development Mode\n\n```bash\nyarn storybook\n```\n\nAvailable in http://localhost:6006\n\n## Generate Storybook Production Build\n\n```bash\nyarn build-storybook\n```\n\n## Run Lints\n\n```bash\nyarn lint\n```\n\n```bash\nyarn typecheck\n```\n\n```bash\nyarn check:format\n```\n\n## Format code with prettier\n\n```bash\nyarn format\n```\n\n## Check for Available Updates for Dependencies\n\n```bash\nyarn check:update\n```\n\n\u003cbr /\u003e\n\n---\n\n# :rotating_light: Important Considerations\n\n- The husky is configured to not allow commit if there are any lint and typescript errors. The push can only be done if all tests and builds (of the project and the storybook) pass.\n\n- Due to husky's build check settings, to push with git, the development server must be stopped first or an error will occur in the `git push` command.\n\n- Some conventions widely used in the React ecosystem were used. For example:\n\n  - In the root of the components folder, an export index was created to facilitate the use of components with named import. In this way, to use a component, just import it as an object and use it with the prefix \"C\", thus avoiding several unnecessary lines of imports:\n\n    ```jsx\n    import * as C from 'ui/components'\n\n    ...\n    \u003cC.Card\u003e\n      \u003cC.Input /\u003e\n    \u003c/C.Card\u003e\n    ...\n    ```\n\n  - To import style sheets that use styled-components, named imports were used for the same reason as before, thus:\n\n    ```jsx\n    import * as S from './styles'\n\n    ...\n    \u003cS.Wrapper\u003e\n      \u003cS.Title /\u003e\n    \u003c/S.Wrapper\u003e\n    ...\n    ```\n\n- To create a complete component folder with tests, storybook, index and styles files, just use the command in the terminal: `yarn generate`\n\n---\n\n# :technologist: Author\n\nBy [Éverton Toffanetto](https://programadordesucesso.com).\n\n:link: LinkedIn: https://www.linkedin.com/in/everton-toffanetto\n\n:link: YouTube: https://www.youtube.com/c/ProgramadordeSucesso\n\n:link: Site: https://programadordesucesso.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverton-dgn%2Fboilerplate_vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feverton-dgn%2Fboilerplate_vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverton-dgn%2Fboilerplate_vite/lists"}