winget install --id=open-source-labs.ReacType -e
ReacType is a rapid prototyping tool 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! ReacType allows users to visualize their application architecture dynamically, employing a drag-and-drop canvas display , a real-time demo render , a real-time component code preview. Users can create components and drag instances of these components, as well as HTML elements, onto the canvas. This architecture can then be exported as TypeScript application files to be used as a starter template for any repository.
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 to learn more about the product.
Follow @ReacType on Twitter for important announcements.
Get a glimpse of how ReacType works!
Here is the main file structure:
Given to us courtesy of our friends over at React Relay
npm install
npm run prod
npm run test
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. 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.)
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 and GitHub here.
To run the development build of electron app
npm run dev
npm run electron-dev
npm install
npm run build
npm run start
Typescript, 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
Here is the up to date list of all co-developers of this product.
This project is licensed under the MIT License - see the LICENSE.md file for details.