oslabs-beta / birdzeye

Dedicated Vue IDE

Logo Design by Natsuki Wada

BIRDZ'EYE

Dedicated Vue IDE built to streamline your development process

Table of Contents

• About The Project
• Getting Started
• Using App
• Planned Features
• Contributing
• Acknowledgements
• Contributors

About The Project

Built With

• Vue / Vue-CLI
• Vuex
• Electron
• Node child_process
• Codemirror
• XTerm
• Node-pty
• Material Design

Getting Started

1. Fork this repository and clone it to your local machine.

2. Run "npm install".

     npm install
   

3. In the BIRDZ'EYE "/src/components/componentTree/TheComponentTreeContainer.vue" file, add the file path that leads to the root component for your project in the import statement with an empty string:

   import AppChildComponent from "./AppChildComponent.vue";
   //**** Modify empty string on next line to import from the location of the root component in your applications (typically App.vue) *****/
   import App from "";
   

4. Run "npm run electron:serve" for development mode,

   npm run electron:serve
   

   Or run "npm run electron:build" to create a production build of the BIRDZ'EYE application

   npm run electron:build
   

Using the App

1. When the application opens, you will see the words, "Open Project". Click on this to choose the root directory for your project. After choosing the root directory, the main page of the app, with the text editor, file tree, component tree, and simulator will appear. (The simulator will initially just be the BIRDZ'EYE logo.)

2. In order to initiate the text editor, click on a file in the file tree, and then click the circular arrow button on the right side of the screen. The file contents will appear on the bottom of the screen.

3. The two-way arrow button toggles between the text editor and the terminal. You can use the terminal to run the command you need to start your application's local server. After typing in the command, click the running person icon to run the command.

4. Once you've started up your server, you can enter a port number in the text field on the left. You only need to enter the number, the "http://localhost:" will be entered automatically. After doing this, your application should replace the BIRDZ'EYE logo.

5. You can save edits to your file in the text editor either by using the down arrow button on the right, or by using "control + s".

6. You can view component properties by clicking on the component's name in the component tree.

Planned Features

1. More robust and flexible terminal functionality. Including integrating XTerm into the application's terminal.

2. Dynamic tab creation for the text editor.

3. Interface/UI improvements.

4. Dynamic file tree with read/write capabilities in order to create and edit files.

5. Live styling capability in the component tree display for editing components.

6. Refinement of Vuex state management.

Contributing

Collaboration is what drives Open Source technology forward. We welcome any contributions you would like to make. Thank you.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/nameOfYourFeature)
3. Commit your Changes (git commit -m 'Some explanation of what you added')
4. Push to the Branch (git push origin feature/nameOfYourFeature)
5. Open a Pull Request

Acknowledgements

• We would like to thank OSLabs for accelerating this project.

Contributors

Natsuki Wada
LinkedIn | Github

Graham Pierce
LinkedIn | Github

Brandon Bowers
LinkedIn | Github

birdzeye's Issues

Conflict leftover in component file TheComponentTreeContainer.vue

Just a friendly reminder about unmerged conflict in
https://github.com/oslabs-beta/vuety/blob/b2d1a332e1bc67623e0eacfb6cfe6a585d6f04fa/src/components/componentTree/TheComponentTreeContainer.vue#L23-L28

Should we remove "that" from "describe" in tests?

I realized that all of the describe section in tests includes the expression "that," however, it might be make the description of each test simpler if we remove "that." How do you think? Thanks!