React-Proto is a React application prototyping tool for developers and designers.

React-Proto allows the user to visualize/setup their application architecture upfront and eject this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.

Download for MacOS, Windows, Linux.

If you find any issues, file issue

• Application can be run from cli using react-proto command or by clicking on the application icon.

• To start a new project, either import a mockup or start with a blank stage.

• Add components you would like to create using the input, then drag the component frame into place and resize accordingly.

• While building, you can use the icons in the toolbar to zoom, toggle draggability of the stage, update or remove an image, collapse the left container, and export your files.

• For each component you have the ability to define whether your component will have state, the color of the frame component, and the ability to apply a parent component.

• If you place a container around other components and can no longer access them, you can use the layer buttons in the corresponding dropdown menu to change layer order down or up.

• In the right container, the props tab allows you to define props in key value pairs, as well as the necessary prop type.

• Once you are finished, you can use the export button in the toolbar to choose from three options of how to export your files:

  1. Import your files into an existing project. Just choose the path where you would like to create your components folder.
  2. Use create-react-app to start a new project (the project will be under the "proto_app").
  3. Clone your favorite Github repo to start a project with your favorite starter files.

• Lastly, start building!

Blessing E Ebowe @refinedblessing

Brian Taylor @brianwtaylor

Erik Guntner @erikguntner

• Fork and Clone Repository.

• Open project directory

cd react-proto

• Install dependencies

yarn install

• Run application

yarn start

• For development experience...

yarn dev

• and on another terminal

yarn electron

yarn linter

yarn test

• React - Framework for building user interaces.
• Redux - Predictable state container for JavaScript apps.
• Electron - Cross-platform desktop apps with HTML, CSS and JS.
• KonvaJS - HTML5 2d canvas library for desktop and mobile applications.
• React-Sortable-Tree - Drag-and-drop sortable component for nested data and hierarchies.

Logo Design by: Clariz Mariano @havengoer

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