Monkey see monkey do

General Idea

The general idea is to make command-line tools (such as GitHub, or Digital Ocean) accessible and usable by designers and project managers directly in a web browser.

  • This means a designer (or anyone) doesn't need to be a coding wizard to able to pull down code from GitHub, and run a project.

  • No need to understand github terminology - it can be done with the push of a button, written in plain English.

Overview

The project is being designed and built in phases to keep the scope narrow:

Phase 1

Phase 1 of included creating a terminal that runs in the browser, and a filebrowser UI that works with the terminal:

terminal browser.gif

  • When a command is run in the browser-terminal, the Filebrowser has access to the state that changes, and updates itself based on what happens. The reverse happens for when you navigate by clicking on folders in the file browser UI.

This is a good starting point for what the product could be.

Phase 2

Phase 2 involves reframing the problem, and choosing a small enough scope to build a product for. For instance, we can focus on creating a tool for learning, or a tool that solves a specific problem.

  • For example, in the GitHub scenario, a 'Create new version' button can be clicked to run the commands git branch and git checkout. The user won't need to understand git to use it
  • Considering virtual servers such as Digital Ocean, a user could run SSH commands and log into virtual servers without having to touch the terminal directly.

Updates from notepad:


Marvel Prototype

Coded Prototype


React JS (redux) + Web Sockets browser-based command-line collaboration tool

The general idea is to make command-line tools accessible and usable by designers and project managers. This means a designer will be able to pull down code from GitHub, and run a project without needing to know github terminology - it can be in the push of a button, written in plain English.

Overview

  • A browser-based commandline tool, built with React
  • Project structure is based on Learn Redux tutorial series by Wesbos
  • Built with custom components, and the redux pattern
  • Uses sock.js for server and terminal emulator

The project is built in phases to keep the scope narrow:

Phase 1

Phase 1 of this project included creating a terminal that runs in the browser, and a filebrowser UI that works with the terminal:

terminal browser.gif

  • When a command is run in the browser-terminal, the Filebrowser has access to the state that changes, and updates itself based on what happens. The reverse happens for when you navigate by clicking on folders in the file browser UI.

Main Components:

All components can be seen here

Running

First npm install to grab all the necessary dependencies.

Then run npm start and open in your browser.

Production Build

Run npm build to create a distro folder and a bundle.js file.



Hyperterm