{"id":13495279,"url":"https://github.com/open-source-labs/ReacType","last_synced_at":"2025-03-28T16:32:18.080Z","repository":{"id":193733405,"uuid":"182125529","full_name":"open-source-labs/ReacType","owner":"open-source-labs","description":"Prototyping Tool for exporting React/Typescript Applications!","archived":false,"fork":false,"pushed_at":"2025-01-08T15:25:22.000Z","size":364336,"stargazers_count":441,"open_issues_count":20,"forks_count":47,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-23T14:32:10.910Z","etag":null,"topics":["application","drag-and-drop","electron","front-end-development","javascript","prototyping","react","reactjs","redux","typescript"],"latest_commit_sha":null,"homepage":"http://reactype.dev","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/open-source-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2019-04-18T16:55:38.000Z","updated_at":"2025-01-17T20:20:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"f896e342-a5bb-4f97-8d2d-af9132153b59","html_url":"https://github.com/open-source-labs/ReacType","commit_stats":null,"previous_names":["open-source-labs/reactype"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FReacType","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FReacType/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FReacType/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FReacType/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-source-labs","download_url":"https://codeload.github.com/open-source-labs/ReacType/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246062914,"owners_count":20717706,"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":["application","drag-and-drop","electron","front-end-development","javascript","prototyping","react","reactjs","redux","typescript"],"created_at":"2024-07-31T19:01:33.143Z","updated_at":"2025-03-28T16:32:17.170Z","avatar_url":"https://github.com/open-source-labs.png","language":"TypeScript","readme":"\u003c!-- \u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"100\" src=\"https://i.imgur.com/Yn70tqI.png\"\u003e\r\n\r\n  \u003ch1 align=\"center\"\u003eReacType \u003c/h1\u003e\r\n\u003c/p\u003e --\u003e\r\n\r\n\u003c!-- PAST LOGOS --\u003e\r\n\u003c!-- \u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"https://i.imgur.com/enAcYvB.png\"\u003e\r\n\u003c/p\u003e --\u003e\r\n\u003c!-- \u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"https://i.imgur.com/FPizsat.png\"\u003e\r\n\u003c/p\u003e --\u003e\r\n\u003c!-- \u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"https://i.imgur.com/FIX8skV.png\"\u003e\r\n\u003c/p\u003e --\u003e\r\n\r\n\u003cdiv align=\"left\"\u003e\r\n\r\n[![StarShield][stars]][stars-url]\r\n[![ContributorShield][contributors]][contributors-url]\r\n[![ForksShield][forks]][forks-url]\r\n![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)\r\n![Version: 21.0.0](https://img.shields.io/badge/version-21.0.0-orange)\r\n\r\n\u003c/div\u003e\r\n\r\n \u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"./resources/readme.png\"\u003e\r\n\u003c/p\u003e\r\n\r\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\r\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\r\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\r\n![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge\u0026logo=express\u0026logoColor=%2361DAFB)\r\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\r\n![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white)\r\n![Socket.io](https://img.shields.io/badge/Socket.io-black?style=for-the-badge\u0026logo=socket.io\u0026badgeColor=010101)\r\n![Vitest](https://img.shields.io/badge/-vitest-%23008000?style=for-the-badge\u0026logo=vitest\u0026logoColor=white)\r\n![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge\u0026logo=babel\u0026logoColor=black)\r\n![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white)\r\n![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge\u0026logo=mui\u0026logoColor=white)\r\n![Electron.js](https://img.shields.io/badge/Electron-191970?style=for-the-badge\u0026logo=Electron\u0026logoColor=white)\r\n![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge\u0026logo=mongodb\u0026logoColor=white)\r\n![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge\u0026logo=amazon-aws\u0026logoColor=white)\r\n![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge\u0026logo=docker\u0026logoColor=white)\r\n![Vite](https://img.shields.io/badge/Vite-orange?logo=vite\u0026style=for-the-badge)\r\n\r\n\u003ch1 align=\"center\"\u003eReacType \u003c/h1\u003e\r\n\r\n**ReacType** is a React prototyping tool that allows users _visualize_ their application architecture dynamically, employing an interactive drop and drag display with real-time component code preview and a collaboration room that features live video and chat functionality. Generated code can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"./resources/v22 MUI Canvas.png\"\u003e\r\n\u003c/p\u003e\r\n\r\nVisit [reactype.dev](https://reactype.dev) to learn more about the product.\r\n\r\nFollow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.\r\n\r\n## Changes with Version 22.0.0\r\n\r\n- **UI/UX Updates**: Updated the UI/UX to be more intuitive and user friendly, decreasing learning curve and improving accessibility.\r\n- **Cleanup**: Removed depreciated dependencies and unused code, migrated code and components to align with UI/UX direction, and cleaned up styling.\r\n- **OAuth**: Implemented OAuth with Google and Github for streamlined login and secure user accounts.\r\n- **And more:** See the [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions, as well as plans for upcoming features!\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"./resources/v22 code preview.png\"\u003e\r\n\u003c/p\u003e\r\n\r\n## Preview\r\n\r\nGet a glimpse of how ReacType works!\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"./resources/v22 Preview.gif\"\u003e \r\n\u003c/p\u003e\r\n\r\n\u003c!-- NEED TO REPLACE THE TUTORIAL LINK --\u003e\r\n\r\n## File Structure of ReacType Version 22.0.0\r\n\r\nHere is the main file structure:\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"1000\" src=\"./resources/v21 File Structure.png\"\u003e\r\n\u003c/p\u003e\r\n\r\nGiven to us courtesy of our friends over at React Relay\r\n\r\n## Run ReacType using CLI\r\n\r\n- **Fork** and **Clone** Repository.\r\n- Open the project directory.\r\n- Install dependencies.\r\n\r\n```bash\r\nnpm install\r\n```\r\n- Compile for production\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n- To run the production build\r\n\r\n```bash\r\nnpm start\r\n```\r\n\r\n- To run tests\r\n\r\n```bash\r\nnpm run test\r\n```\r\n\r\n- To run the development build\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n- Open browser and navigate to localhost at specified port\r\n\r\n- Note that DEV_PORT and NODE_ENV flag (=production or development) are needed in the .env file.\r\n- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select \"Continue as guest\" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)\r\n- If there are any errors on spin-up related to MONGO_DB, GITHUB_CLIENT, GITHUB_SECRET, GOOGLE_CLIENT, GOOGLE_SECRET, and SESSION_SECRET, those variables will have to be added to the .env file. To get Google and GitHub credentials, addtional information can be found at the following links: Google [here](https://support.google.com/cloud/answer/6158849?hl=en) and GitHub [here](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app).\r\n\r\n## Stack\r\n\r\nTypescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Vitest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD, Vite\r\n\r\n## Contributions\r\n\r\nHere is the up to date [list](https://github.com/open-source-labs/ReacType/blob/master/contributors.md) of all co-developers of this product.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.\r\n\r\n[stars]: https://img.shields.io/github/stars/open-source-labs/ReacType\r\n[stars-url]: https://github.com/open-source-labs/ReacType/stargazers\r\n[forks]: https://img.shields.io/github/forks/open-source-labs/ReacType\r\n[forks-url]: https://github.com/open-source-labs/ReacType/network/members\r\n[contributors]: https://img.shields.io/github/contributors/open-source-labs/ReacType\r\n[contributors-url]: https://github.com/open-source-labs/ReacType/graphs/contributors\r\n","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2FReacType","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-source-labs%2FReacType","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2FReacType/lists"}