kevronosx / reactype

🧪 Prototyping Tool for exporting React/Typescript Applications!

ReacType

ReacType is a visual 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 the user to visualize their application architecture dynamically, employing a drag-and-drop canvas display and a real-time component code preview. The user 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.

New with version 3.0:

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

Download for MacOS, Windows, Linux.

• Mac users: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.

• Linux users: Run the application as a super user in order to read and write files.

How to use

• Log in: Sign up through email/Github if you would like to save your projects to the cloud. Otherwise, select Continue as Guest
• Select project type: By default, new projects will be Next.js projects, but you can toggle your project to be a normal React application by selecting "Classic React" in the bottom-right corner.
  • Next.js projects allow you to easily create routing between pages within ReacType and render content with static rendering.
  • Classic React projects are vanilla React. You can create multiple "root" components, but routing between these root components is enabled by default.
• Add components: Add a new component in the left panel. If the Page checkbox is selected, the component will become a page that can be routed to. For example, a page component named 'Home', the component's corresponding route will be '/Home'. Learn more about Next.js routing.
• Create instances of components/HTML elements: Each component has its own canvas where you can see how any instances of nested components or HTML elements will render in production. To create an instance of a component or traditional HTML element in the canvas, simply drag it onto the canvas. The following elements have special properties when they're dragged onto the canvas:
  • Page/root components: Page/root components cannot be dragged into other components.
  • Divs: Divs are arbitrarily nestable.
  • Navigation components: Next.js projects have "Navigation components" which allow you to create links between your page components.
• Update CSS and delete instances: Click on the component canvas or an instance to view/edit CSS attributes in the right panel. Updates made to the CSS will render in the canvas on Save.
• Save your project: Select Save Project to save a new project to the cloud. Once you've created a new project in the cloud, it will be autoamtically saved on each change. You can open any of your other saved projects by selecting Open Project.
• Export your project: Select Export Project to save your project locally. You will have the option of exporting either a fully functional application or only exporting the component files.

Contributors

Aaron Bumanglag @akbuma

Adam Singer @spincycle01

Andrew Cho @andrewjcho84

Charles Finocchiaro @null267

Chelsey Fewer @chelseyeslehc

Christian Padilla @ChristianEdwardPadilla

Eliot Nguyen @ibeeliot

Fredo Chen @fredosauce

Jesse Zuniga @jzuniga206

Mitchel Severe @mitchelsevere

Natalie Vick @natattackvick

Nel Malikova @gmal1

Sean Sadykoff @sean1292

Shlomo Porges @shlomoporges

Sophia Huttner @sophjean

Tolga Mizrakci @tolgamizrakci

Tony Ito-Cole @tonyito

Tyler Sullberg @tsully

To Run Your Own Version

• Fork and Clone Repository.
• Open project directory
• Install dependencies

npm install

• To run the production build

npm run prod

• To run the development build

npm run dev

• 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 also select "Continue as guest" on the log-in page of the app to not use any features that rely on the server (authentication and saving project data.)

To Run Your Exported Next.js Project

• 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

License

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