{"id":13493463,"url":"https://github.com/oslabs-beta/TotalRecoilJS","last_synced_at":"2025-03-28T11:32:54.075Z","repository":{"id":98685110,"uuid":"278918925","full_name":"oslabs-beta/TotalRecoilJS","owner":"oslabs-beta","description":"TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.","archived":false,"fork":false,"pushed_at":"2020-09-03T00:57:50.000Z","size":5718,"stargazers_count":191,"open_issues_count":4,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-22T11:04:58.247Z","etag":null,"topics":["chrome-dev-tools","javascript","react","recoil","typescript"],"latest_commit_sha":null,"homepage":"https://totalrecoiljs.com/","language":"JavaScript","has_issues":false,"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/oslabs-beta.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}},"created_at":"2020-07-11T18:23:59.000Z","updated_at":"2025-02-12T00:11:13.000Z","dependencies_parsed_at":"2023-03-14T04:31:27.119Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/TotalRecoilJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FTotalRecoilJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FTotalRecoilJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FTotalRecoilJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FTotalRecoilJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/TotalRecoilJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246021484,"owners_count":20710943,"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":["chrome-dev-tools","javascript","react","recoil","typescript"],"created_at":"2024-07-31T19:01:15.450Z","updated_at":"2025-03-28T11:32:53.128Z","avatar_url":"https://github.com/oslabs-beta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n\n\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Contributors][contributors-shield]][contributors-url] --\u003e\n\u003c!-- [![Stargazers][stars-shield]][stars-url]\n[![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oslabs-beta/TotalRecoilJS\"\u003e\n    \u003cimg src=\"src/icons/Recoil-PNG-Gray.png\" alt=\"Logo\" width=\"200\" \u003e\n  \u003c/a\u003e\n\n  \u003c!-- \u003ch3 align=\"center\"\u003eTotalRecoilJS\u003c/h3\u003e --\u003e\n\n  \u003cp align=\"center\"\u003e\n    A tool for Recoil developers\n    \u003cbr /\u003e\n    \u003ca href=\"https://chrome.google.com/webstore/detail/recoil-dev-tools/dhjcdlmklldodggmleehadpjephfgflc\"\u003e\u003cstrong\u003eDownload Chrome Extension»\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/silvia-miranda/RecoilTravel\"\u003eView Demo App (Recoil Application)\u003c/a\u003e\n    \n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n## Table of Contents\n\n* [About the Project](#about-the-project)\n  * [Built With](#built-with)\n* [Getting Started](#getting-started)\n  * [Prerequisites](#prerequisites)\n  * [Installation](#installation)\n* [Usage](#usage)\n* [License](#license)\n* [Authors](#authors)\n* [Acknowledgements](#acknowledgements)\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nTotal RecoilJS is a tool created to help developers visualize and track their Recoil state via a Chrome extension.\n\n\n### Built With\n\n* [React](https://reactjs.org/)\n* [D3](https://d3js.org/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)\n\n\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nTo get a local copy up and running, follow these simple steps.\n\n### Prerequisites\n\nInstall React DevTools\n```sh\nhttps://chrome.google.com/webstore/detail/react-developer-tools/\n```\n\n### Installation\n \n1. Clone the TotalRecoilJS github\n```sh\ngit clone https://github.com/oslabs-beta/TotalRecoilJS.git\n```\n2. Install NPM packages\n```sh\nnpm install\n```\n3. Start development server\n```sh\nnpm run dev\n```\n4. Unpack to Google Chrome Extensions \n\n5. Navigate to Extensions -\u003e Load Unpacked -\u003e Select Total-Recoil/build/extension\n\n![](/src/img/installApp.gif)\n\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n\n\nVisualize your component tree and see which components are subscribed to which atoms. When you click on an atom’s name, all components that are subscribed to that piece of state will light up.\n\nTroubleshoot by seeing the current state held in each atom. \n\n![](/src/img/showState-tab.gif)\n\n\u003cinsert gif of atom state\u003e\n\nView list of previous states to track changes. \nOn the history tab, you can see up to 10 previous state snapshots.\n\n![](/src/img/history-tab.gif)\n\n\u003cinsert gif of history\u003e\n\n View all selector-atom subscriptions using our interactive sunburst and click on any selector to see all subscribed atoms.\n\n\u003cinsert gif of sunburst image\u003e\n  \n  ![](/src/img/selector.gif)\n\n\n\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\n\n\u003c!-- CONTACT --\u003e\n## Authors\n\n\u003cstrong\u003eAnthony Lee - [@linkedIn](https://www.linkedin.com/in/anthony-lee27/) - [@GitHub](https://github.com/anthonylee2797)\n\n\u003cstrong\u003eKhizar Rehman - [@linkedIn](https://www.linkedin.com/in/khizar-rehman-a125711b4/) - [@GitHub](https://github.com/keyz-man)\n\n\u003cstrong\u003eSilvia Miranda - [@linkedIn](https://www.linkedin.com/in/silviakempmiranda/) - [@GitHub](https://github.com/silvia-miranda)\n\n\u003cstrong\u003eZi Hao He - [@linkedIn](https://www.linkedin.com/in/zi-hao-he/) - [@GitHub](https://github.com/exquizzle)\n\n\u003cstrong\u003eKevin Ruan - [@linkedIn](https://www.linkedin.com/in/kevin-ruan-7799711b1/) - [@GitHub](https://github.com/kevinr108)\n\n\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n## Acknowledgements\n\nDenys Dekhtiarenko - [@linkedIn](https://www.linkedin.com/in/denysdekhtiarenko/) - [@GitHub](https://github.com/denskarlet)\n\n\n\n\n\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors\n[contributors-url]: https://github.com/oslabs-beta/TotalRecoilJS/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square\n[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members\n[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square\n[stars-url]: https://github.com/oslabs-beta/TotalRecoilJS/stargazers\n[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square\n\n[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/othneildrew\n[product-screenshot]: images/screenshot.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2FTotalRecoilJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2FTotalRecoilJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2FTotalRecoilJS/lists"}