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

Overview

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.

Issues
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time ⚛️ ⚡️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

Dan Abramov 12.1k Oct 18, 2021
React specific linting rules for ESLint

ESLint-plugin-React React specific linting rules for ESLint Installation Install ESLint either locally or globally. (Note that locally, per project, i

Yannick Croissant 7.4k Oct 12, 2021
A mobile-first React prototyping tool with React-Bootstrap component integration

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

OSLabs Beta 38 Oct 10, 2021
Spokestack: give your React Native app a voice interface!

React Native plugin for adding voice using Spokestack. This includes speech recognition, wakeword, and natural language understanding, as well as synt

Spokestack 38 Oct 13, 2021
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Product Hunt 794 Sep 4, 2021
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.2k Oct 14, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 184 Aug 4, 2021
why-did-you-render monkey patches React to notify you about avoidable re-renders.

Why Did You Render why-did-you-render by Welldone Software monkey patches React to notify you about avoidable re-renders. (Works with React Native as

Welldone Software Solutions Ltd. 7.3k Oct 14, 2021
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

Styleguidist 10.1k Oct 14, 2021
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

Styleguidist 10.1k Oct 20, 2021
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Patricio Zavolinsky 194 Jul 22, 2021
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.4k Oct 17, 2021
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.2k Oct 11, 2021
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.3k Oct 15, 2021
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. React Spectrum A R

Adobe, Inc. 5.3k Oct 17, 2021
📓 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

Storybook 65.3k Oct 14, 2021
A CLI tool to bootstrap your modern React application.

create-react-saga is a CLI tool for quickly setup your next clutter free webpack backed React application. It provides you the latest hooks based codebase, testing utilities and storybooks.

Sunny Praksah 6 Oct 2, 2021
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Oct 13, 2021
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

Rangle 660 Oct 4, 2021