daorichard/reactype

🧪 Prototyping Tool for exporting React/Typescript Applications!

ReacType

ReacType is a rapid prototyping tool that allows users visualize their application architecture dynamically, employing a drag-and-drop canvas display and an interactive, real-time component code preview that 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.

Documentation

If you want to read about using ReacType, the User Manual is free and available online now.

Changes with version 16.0.0

• Improved Testing Coverage: Testing coverage has now doubled since version 15, and now sits at just over 50% coverage. Version 16 introduces end-to-end testing with Playwright and adds additional unit testing with React Testing Library.
• Major Bug Fixes: Manage Project Features now work as expected. State Manager now deletes state from parent components. Context Manager Display Tab and CSS Editor now rendering as expected.
• Typescript Conversion: Typescript coverage has improved from 30% to 80% with additional interfaces added for quality improvements.
• Live CSS Demo Rendering: CSS Editor changes now rendered visually in the demo page on save.
• Universal Exports on Web App: Export feature on web app now allows users to download the current project as a zip file with modularized component folder, html, and css file included. Export feature is now available to all users including guests.
• UI Improvements: Fixed multiple contrast issues with white text displaying on white background. Adjusted context manager interface for improved UX. Fixed border styling within modals and error messages.
• And more: See change log for more details on what was changed from the previous versions as well as plans for upcoming features!

File Structure courtesy of Reactype version 14.0.0

Here is the main file structure:

Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w for more details.

Run ReacType using CLI

• Fork and Clone Repository.
• Open 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 a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.

• 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.)

• 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 (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD

Contributions

Here is the up to date list of all co-developers of this product. Please visit our contribution documentation for more information on how you can contribute to ReacType!

License

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