codeByCandlelight/Abstract

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

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
  • Render Components on the Canvas
  • Review Code
  • Export Code
• Live Features
• How To Use
  • Web Based
  • Running Local
• Contribute
  • Contributors
  • How to contribute
  • New feature log
• License

Demo

Select Device Resolution for the Canvas

Render Components on the Canvas

Review Code

Export Code

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

• Jonnie Oak @Github @Linkedin
• Brian Cheng @Github @Linkedin
• Raymond Hu @Github @Linkedin
• Omar Brown @Github @Linkedin

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.