Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/open-source-labs/ReacType
Prototyping Tool for exporting React/Typescript Applications!
https://github.com/open-source-labs/ReacType
application drag-and-drop electron front-end-development javascript prototyping react reactjs redux typescript
Last synced: 3 months ago
JSON representation
Prototyping Tool for exporting React/Typescript Applications!
- Host: GitHub
- URL: https://github.com/open-source-labs/ReacType
- Owner: open-source-labs
- License: mit
- Created: 2019-04-18T16:55:38.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-06T18:49:58.000Z (4 months ago)
- Last Synced: 2024-03-06T20:15:24.704Z (4 months ago)
- Topics: application, drag-and-drop, electron, front-end-development, javascript, prototyping, react, reactjs, redux, typescript
- Language: TypeScript
- Homepage: http://reactype.dev
- Size: 210 MB
- Stars: 364
- Watchers: 11
- Forks: 22
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE_LOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- fuck-awesome-stars - open-source-labs/ReacType - Prototyping Tool for exporting React/Typescript Applications! (TypeScript)
README
[![StarShield][stars]][stars-url]
[![ContributorShield][contributors]][contributors-url]
[![ForksShield][forks]][forks-url]
ReacType
**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!**
Visit [reactype.dev](https://reactype.dev) to learn more about the product.
Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
## Changes with Version 20.0.0
- **Collaboration Rooms**: Official launch of v2 collaboration rooms - Now featuring a secure live collaborative chat room with video and cursor tracking functionality!
- **UI Updates**: The UI now features a new logo, zoom and scroll functionality to the canvas, and numerous updates to styling to reflect a more modern and user friendly experience.
- **DX Updates**: Migrated from WebPack to Vite, drastically reducing HMR time. Now deployed via Heroku instead of AWS.
- **Typescript Conversion**: Typescript coverage is at 95%.
- **Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
- **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!
## Preview
Get a glimpse of how ReacType works!
## File Structure of ReacType Version 20.0.0
Here is the main file structure:
Given to us courtesy of our friends over at React Relay
## Run ReacType using CLI
- **Fork** and **Clone** Repository.
- Open the project directory.
- Install dependencies.
```bash
npm install
```
- To run the production build
```bash
npm run prod
```
- To run tests
```bash
npm run test
```
- To run the development build
```bash
npm run dev
```
- Note that DEV_PORT, NODE_ENV flag (=production or development) and VIDEOSDK token are needed in the .env file.
- 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.)
- To run the development build of electron app
```bash
npm run dev
npm run electron-dev
```
## Run Exported App
- Open exported project directory
- Install dependencies
```bash
npm install
```
- Build the app
```bash
npm run build
```
- Start an instance
```bash
npm run start
```
- Open browser and navigate to localhost at specified port
## Stack
Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, 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
## Contributions
Here is the up to date [list](https://github.com/open-source-labs/ReacType/blob/master/contributors.md) of all co-developers of this product.
## License
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.
[stars]: https://img.shields.io/github/stars/open-source-labs/ReacType
[stars-url]: https://github.com/open-source-labs/ReacType/stargazers
[forks]: https://img.shields.io/github/forks/open-source-labs/ReacType
[forks-url]: https://github.com/open-source-labs/ReacType/network/members
[contributors]: https://img.shields.io/github/contributors/open-source-labs/ReacType
[contributors-url]: https://github.com/open-source-labs/ReacType/graphs/contributors