Supercharge your Angular development process
Build Your Angular App »
Report Bug
·
Request Feature
Table of Contents
Protract is an accessible developer tool built from the ground up to assist with the blueprinting of Angular applications, simplifying the process of creating a hierarchy of components and allowing developers to quickly create the structure of their app so they can start coding faster.
Here is a medium article describing the philosophy behind Protract.
Visit our website Protract.dev!
Drag and drop functionality to create, reorder, and delete HTML tags. Create custom components declared by the user that can be nested.
Real-time visualization of code for each custom component, file structure of directory, and hierarchy of components.
Change current component canvas by clicking on the component in file directory or component tree.
Create, save, load, and delete projects.
Fully online in-browser functionality.
Export projects to use in a newly created Angular project.
You can start using Protract by visiting the website here. To save and load projects you will need to make an account and login. Once your blueprint is completed you can hit the export button on the canvas.
If you would like to run with Docker,
docker pull protractors/protract-prod:latest
docker run -p <your-preferred-port>:3000 protractors/protract-prod
If you would like to use the app by forking and cloning:
Fork this repository to your own GitHub account. Clone the forked repository to your machine
git clone https://github.com/<your-github-username>/protract.git
Create a .env in the root directory that contains 2 variables,
MONGO_URI=<your-mongo-uri>
mode=production
Navigate to the root project directory and install dependencies.
cd protract
npm install
If you would like to run in development mode, npm run dev and visit localhost:3000.
If you would like to run in production mode, npm run build and then npm start and visit localhost:3000.
In your terminal,
npm install -g @angular/cli
To install the Angular CLI if it has not already been installed.
ng new <your-project>
To start your new project.
In your file explorer, extract the zip file and replace the directory’s app folder with the one contained in the zip file.
We welcome contributions from the community. If you are interested in contributing to this project, please refer to our Contributing Guidelines for more information.
| Developed By | ||
|---|---|---|
| Don Do |  |
 |
| Vander Harris | |
|
| Peter Tran | |
|
| Steven Vaughn | |
|
| Douglas Yao | |
|
Protract is licensed under the terms of the MIT license.