A mobile-first React prototyping tool with React-Bootstrap component integration

Last update: Apr 17, 2022

logo

PRs Welcome License: MIT Version Beta 1.0.0

Abstract Beta is a mobile first application focused on improving developer experience. Create mobile first application prototypes in real-time with proven UI frameworks such as React Bootstrap.


Table of Contents

Demo

Select Device Resolution for the Canvas

canvas-size-gif

Render Components on the Canvas

render-components-gif

Review Code

review-code-gif

Export Code

export-code-gif

Live Features

  1. Real-time live preview of your prototype including rendered components and styling.
  2. Prototype on multiple canvas sizes (e.g. iPad Pro and iPhone X).
  3. Code preview formatted and synchronized with the prototype render view.
  4. React-Bootstrap component integration.
  5. Export your prototype code to your Github account.
  6. Secure signup and login using Github OAuth.
  7. Installable progressive web application

How To Use

Web-based

  1. Visit abstractreact.herokuapp.com
  2. Login with a GitHub account

Running local

  1. Clone this repo
    git clone https://github.com/oslabs-beta/Abstract.git
    
  2. Navigate to your local directory
  3. Install dependencies
    npm install
    
  4. Run the client (verify that localhost port 3000 is not being used)
    npm start
    

Contribute

Abstract is an open-source product supported via the tech accelerator OS Labs/OS Labs-beta. We encourge all feedback and welcome all contributions. Note that this product does not have any full-time contributors. Expect that there will be a wait time before your pull request can be reviewed.

Contributors

How to contribute

  1. Fork the repo and create a new feature branch from dev.
  2. Any changes to the code base should include unit and/or integration tests.
  3. Ensure your code follows proper formatting recommendations.
  4. Create a pull request to the dev branch.

New feature log

  1. Drag and drop feature from the component menu onto the canvas
  2. Refactor to TypeScript
  3. Support TypeScript exports
  4. Add support for additional component libraries (Material UI, Chakra UI, etc)

License

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

GitHub

https://github.com/oslabs-beta/Abstract
You might also like...

An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

May 7, 2022

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

May 9, 2022

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

May 16, 2022

React JSON inspector component

React JSON inspector component

React JSON Inspector Component React-based JSON inspector that features tree expansion and fast search. Live demo Installation npm install react-json-

May 7, 2022

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

May 17, 2022

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Oct 28, 2021

Prevent React component subtrees from rendering

Prevent React component subtrees from rendering

React Freeze Prevent React component subtrees from rendering. What is this? 🤔 This library allows for freezing renders of the parts of the React comp

May 9, 2022

React component wrap for SimpleMDE Markdown Editor(v1.x)

react-simplemde-v1 React.js(v16.x+) component wrap for SimpleMDE Markdown Editor(v1.x+) Installation $ npm install --save simplemde react-simplemde-v1

Dec 6, 2021

A flexible, responsive, and easy-to-use crossword component for React apps.

A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

May 13, 2022
Comments
  • 1. fix: changed body background to black to accomodate pwa view on mobil…

    Reviewed by oakj at 2021-10-07 18:52
  • 2. fix: revised input height in export modal, added pwa to readme, chang…

    Reviewed by oakj at 2021-10-07 18:18
  • 3. Raymond

    Reviewed by rhu0 at 2021-09-25 18:41
  • 4. refactored code, commented out console logs

    Reviewed by rhu0 at 2021-09-23 17:51
Analytics integration for Redux and ngrx/store
Analytics integration for Redux and ngrx/store

Redux Beacon Analytics integration for Redux and ngrx/store Docs Migration Guide (from v1 to v2) Getting Started (Redux users) Getting Started (ngrx u

May 3, 2022
📑 CLI tool for creating demos of React components
📑  CLI tool for creating demos of React components

React DemoTab CLI ?? Easily create demos of React components Maintaining example code and demo separately makes it painful, it's easy to get them out

May 10, 2022
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on hash based art (ex: Artblocks)

Apr 22, 2022
A lightweight, easy to extend web debugging tool developed based on react.
A lightweight, easy to extend web debugging tool developed based on react.

English | 简体中文 A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

Apr 22, 2022
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

May 5, 2022
A next-generation tool to create blazing-fast documentation sites.

Table of contents About Showcase sites 1. documentation 2. grommet-controls 3. theme-ui design system 4. starter projects Motivation Inspiration Roadm

Mar 11, 2022
Simple mobile app to track who has paid for an event

PayMe Simple app that tracks who has paid for an event. Track small payments for an event Use common people lists for an event Features Overview (list

Feb 1, 2022
A workaround for the '100vh' issue in mobile browsers
A workaround for the '100vh' issue in mobile browsers

Div100vh React component and use100vh React hook This is a workaround for iOS Safari and other mobile browsers. The problem In mobile browsers, the re

May 11, 2022
transform react class component to function component
transform react class component to function component

react-class-to-fc ⭐ 特性 将react class组件转化为react 函数组件 ?? 安装 npm i react-class-to-fc -g ?? 使用 ctfc -i react-demo.js -o fc.js 就会将 react-demo.js文件中的class组

Nov 22, 2021
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

May 12, 2022