{"id":16970550,"url":"https://github.com/vinniciusgomes/react-architecture","last_synced_at":"2025-04-12T00:21:27.547Z","repository":{"id":38374199,"uuid":"414225544","full_name":"vinniciusgomes/react-architecture","owner":"vinniciusgomes","description":"🛠 Archref for ReactJS with TypeScript","archived":false,"fork":false,"pushed_at":"2023-04-28T19:08:36.000Z","size":3450,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T20:06:11.564Z","etag":null,"topics":["axios","eslint","prettier","react","storybook","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://blog.vinniciusgomes.dev/arquitetura-para-aplicacoes-react-d77361bf2d49","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/vinniciusgomes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2021-10-06T13:34:53.000Z","updated_at":"2024-06-14T13:20:03.000Z","dependencies_parsed_at":"2025-02-20T10:34:16.544Z","dependency_job_id":"1a498edd-08b3-4ed1-8949-1246795bb6a3","html_url":"https://github.com/vinniciusgomes/react-architecture","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinniciusgomes%2Freact-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinniciusgomes%2Freact-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinniciusgomes%2Freact-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinniciusgomes%2Freact-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinniciusgomes","download_url":"https://codeload.github.com/vinniciusgomes/react-architecture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248498092,"owners_count":21114037,"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":["axios","eslint","prettier","react","storybook","styled-components","typescript"],"created_at":"2024-10-14T00:28:34.695Z","updated_at":"2025-04-12T00:21:27.525Z","avatar_url":"https://github.com/vinniciusgomes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca\u003e\u003cimg src=\".github/architecture.png\" alt=\"logo\" width=\"100%\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"GitHub language count\" src=\"https://img.shields.io/github/languages/count/vinniciusgomes/react-architecture\"\u003e\n\n  \u003cimg alt=\"Repository size\" src=\"https://img.shields.io/github/repo-size/vinniciusgomes/react-architecture\"\u003e\n\n  \u003ca href=\"https://github.com/vinniciusgomes/react-architecture/commits/master\"\u003e\n    \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/vinniciusgomes/react-architecture\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/vinniciusgomes/react-architecture/issues\"\u003e\n    \u003cimg alt=\"Repository issues\" src=\"https://img.shields.io/github/issues/vinniciusgomes/react-architecture.svg\"\u003e\n  \u003c/a\u003e\n\n  \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-brightgreen\"\u003e\n\n   \u003ca href=\"https://github.com/vinniciusgomes/react-architecture/stargazers\"\u003e\n    \u003cimg alt=\"Stargazers\" src=\"https://img.shields.io/github/stars/vinniciusgomes/react-architecture?style=social\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# React with Typescript reference architecture\n\n### How to run\n\n`npm install`\n`npm start`\n\u003cbr /\u003e\n`yarn`\n`yarn start`\n\n### How to run Storybook\n\n`npm run storybook`\n\u003cbr /\u003e\n`yarn storybook`\n\n### How to build\n\n`npm run build`\n\u003cbr /\u003e\n`yarn build`\n\n### How to build Storybook\n\n`npm run build-storybook`\n\u003cbr /\u003e\n`yarn build-storybook`\n\n### How to tests\n\n`npm test`\n\u003cbr /\u003e\n`yarn test`\n\n### How to create a new page\n\n`npm run new:page`\n\u003cbr /\u003e\n`yarn new:page`\n\n### How to create a new component\n\n`npm run new:component`\n\u003cbr /\u003e\n`yarn new:component`\n\n# File structure\n\n**This is your source code tree:**\n\n```\nsrc\n|-- assets/\n|-- components/\n|-- config/\n|-- contexts/\n|-- features/\n|-- hooks/\n|-- layouts/\n|-- lib/\n|-- pages/\n|-- routes/\n|-- services/\n|-- styles/\n|-- utils/\n|-- Bootstrap.tsx\n|-- index.tsx\n...\n```\n\n**This is your component structure:**\n\n```\n...\ncomponents\n|-- YourComponent\n   |-- YourComponent.stories.tsx\n   |-- YourComponent.spec.tsx\n   |-- interfaces.ts\n   |-- styles.ts\n   |-- index.tsx\n...\n```\n\n**This is your page structure:**\n\n```\n...\npages\n|-- YourPage\n   |-- components/\n   |-- index.tsx\n   |-- YourPage.spec.tsx\n   |-- interfaces.ts\n   |-- styles.ts\n...\n```\n\n**These are the folders and their functions:**\n\n`./assets`\n\nHere are all the project assets that will be used by the application, such as images, fonts, mocks, among others.\n\n`./components`\n\nHere will be all the components used globally by the application, components used only by a specific page will be placed elsewhere.\n\n`./configs`\n\nHere will be all the configuration files used globally by the application.\n\n`./contexts`\n\nHere will be all our contexts, responsible for storing and manipulating the application's states.\n\n`./features`\n\nHere is the icing on the cake, but I only use this folder in projects that are really big or when we don't know how far the project can go. The idea of the feature folder is to separate all the code of a specific functionality, for example, a Dashboard feature that contains several components that are only used there, exclusive services, hooks used only by the feature, among others.\n\n`./hooks`\n\nHere I like to leave all the customizable hooks of the application. If you don't know what a hook is, [here's the documentation link](https://react.dev/reference/react).\n\n`./layouts`\n\nHere will be all our layouts that encompass our application, for example, a layout that renders the navbar and the screen content.\n\n`./libs`\n\nHere will be all the integrations with external libraries, for example, the Axios configuration file for HTTP calls.\n\n`./pages`\n\nAs the name suggests, here will be all the pages of our application.\n\n`./routes`\n\nHere will be all the files that manage the routes of our application.\n\n`./services`\n\nIn this folder, all the files responsible for consuming services such as Analytics will be placed.\n\n`./styles`\n\nIn this folder, all the global style files will be placed, such as theme files.\n\n`./utils`\n\nIn this folder, all the useful files of our application will be placed, such as a function to format currencies or dates.\n\n### More utils commands\n\nAnalyzer your build bundle\n`npm run analyze`\n`yarn analyze`\n\nFind and fix Javascrit and TypeScript problems according to pre-defined rules\n`npm run lint`\n`yarn lint`\n\nFind and fix code formatted\n`npm run prettier`\n`yarn prettier`\n\n# Advantages of using this react project template\n\nThe project is already configured with:\n\n- React\n- Typescript\n- Jest\n- React Testing Library\n- Eslint\n- Prettier\n- Styled Components\n- Story Book\n- Plop\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinniciusgomes%2Freact-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinniciusgomes%2Freact-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinniciusgomes%2Freact-architecture/lists"}