project 4
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
designs project docs Nov 8, 2019
src project organization and config Nov 8, 2019
test/project-graph-test project organization and config Nov 8, 2019
.gitignore added .gitignore Nov 8, 2019
instructions.md project docs Nov 8, 2019
project_prompt.md project docs Nov 8, 2019
readme.md setup projects, and project references Nov 8, 2019
squads.png project docs Nov 8, 2019

readme.md

Project Graph | Worksheet

Project Description

A Project organization tool that lays out distinct units of work and their subsections as nested blocks in a horizontal graph ordered by their dependencies.

Wireframes

MVP

  • User can create and save workspaces
  • User can add projects to the workspace
  • User can create dependency chains between projects
  • User can add subprojects to the projects
  • User can create dependency chains between the subprojects.
  • User can bookmark positions in the workspace to make it easy to return back to

PostMVP

  • Add Tagging system to projects and subprojects
  • Add Command Pallette with fuzzy search to jump to that project in the workspace
  • User Authentication
  • Customize Workspace Colors

Architectural Design

  • Frontend | React + Typescript
  • Web Framework | NestJs
  • Server | Fastify
  • ORM | TypeORM
  • Database | Postgresql

ERD

UI Components

[ REUSABLE COMPONENTS ]

  • | Project Pane |

    • stores the collection of task panels that comprise a project
    • can have project panes nested inside as subprojects
    • can be linked to other project panes in dependency chains
    • can be marked active | completed | default
  • | Task Panel |

    • stores a list of individual task items
    • holds a description of the task
    • all text content can be edited
    • can be marked active | completed | default
  • | Options Sidebar |

    • stores the collection of task panels that comprise a project
    • has dropdown nested list of projects and subprojects
    • has query box to filter projects
    • can minimize to the side
    • open dialog to switch workspace
    • button to save workspace
  • | Information Bar |

    • Show Workspace name
    • Shows Breadcrumbs - | Workspace A | Project 3 | Task 5 | Description
    • Has bookmarks dropdown
    • button to add new bookmark
  • | Workspace |

    • Scrollable canvas that holds all of the projects

Priority Matrix

Importance  
   |                             [R]
   |  
   |                 [D] 
   |  
   |  
   |         [T]
   |  
   |       
   |  [S]
   |  [W]  
   |    
   ______________________________________  
.	  	               Time

[ R ] - React Client
[ D ] - DAG Datamodel
[ T ] - TypeORM
[ S ] - Setting Up Server
[ W ] - NestJs Web App

Timeframes

Component Priority Estimated Time Actual Time
Defining Client DAG type functionality H 8hrs --
TypeORM -> Postgres M 6hrs
Setting Up Fastify Server L 3hrs --
Building NestJs App L 3hrs --
React Client H 20hrs --
Total H 40hrs --

Additional Libraries

Library What it Does
NestJs Web Framework
TypeORM Typescript ORM
Fasitfy Web Server
Typescript Programming Language