ReactType

Prototyping Tool for exporting React/Typescript Applications!
GitHub
431
Created 5 years ago, last commit 20 days ago
93 contributors
3.92k commits
Stars added on GitHub, month by month
0
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
+0.1
/day
Last 12 months
+0.5
/day
README

StarShield ContributorShield ForksShield License: MIT Version: 21.0.0

JavaScript TypeScript NodeJS Express.js React Redux Socket.io Vitest Babel Git MUI Electron.js MongoDB AWS Docker Vite

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 to learn more about the product.

Follow @ReacType on Twitter for important announcements.

Changes with Version 21.0.0

  • MUI Components: Material UI can now be used to Create / Style your Applications
  • UI Updates: The UI now features a more modern and user friendly experience to reflect the newly added Components.
  • DX Updates: Migrated from Jest to Vitest to allow better compatibility, as well as to reduce complexity and streamline the Development Workflow.
  • JS DOCS: Added 273 JSDoc comment blocks throughout the codebase.
  • Cleanup: Removed unused code, fixed bugs, and made major performance improvements.
  • And more: See the change log 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 21.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.
npm install
  • To run the production build
npm run prod
  • To run tests
npm run test
  • To run the development build
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

Run Exported App

  • Open exported project directory
  • Install dependencies
npm install
  • Build the app
npm run build
  • Start an instance
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 (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

Contributions

Here is the up to date list of all co-developers of this product.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.