https://github.com/oslabs-beta/abstract
A mobile-first React prototyping tool with React-Bootstrap component integration
https://github.com/oslabs-beta/abstract
bootstrap export github prototype react
Last synced: about 1 month ago
JSON representation
A mobile-first React prototyping tool with React-Bootstrap component integration
- Host: GitHub
- URL: https://github.com/oslabs-beta/abstract
- Owner: oslabs-beta
- License: mit
- Created: 2021-09-11T00:05:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-07T18:57:39.000Z (over 3 years ago)
- Last Synced: 2025-04-08T10:53:12.034Z (2 months ago)
- Topics: bootstrap, export, github, prototype, react
- Language: JavaScript
- Homepage: https://abstractreact.net/
- Size: 7.9 MB
- Stars: 46
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
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](#demo)
+ [Select Device Resolution for the Canvas](#select-device-resolution-for-the-canvas)
+ [Render Components on the Canvas](#render-components-on-the-canvas)
+ [Review Code](#review-code)
+ [Export Code](#export-code)
* [Live Features](#live-features)
* [How To Use](#how-to-use)
+ [Web Based](#web-based)
+ [Running Local](#running-local)
* [Contribute](#how-to-use)
+ [Contributors](#contributors)
+ [How to contribute](#how-to-contribute)
+ [New feature log](#new-feature-log)
* [License](#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](https://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](https://github.com/oakj) [@Linkedin](https://www.linkedin.com/in/oakj28/)
- Brian Cheng [@Github](https://github.com/chengbrian9) [@Linkedin](https://www.linkedin.com/in/brian-cheng24/)
- Raymond Hu [@Github](https://github.com/rhu0) [@Linkedin](https://www.linkedin.com/in/raymond-hu-3b18231a2/)
- Omar Brown [@Github](https://github.com/rashadhndrxx) [@Linkedin](https://www.linkedin.com/in/omar-b-76892521b/)
#### 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.