Work Breakdown

Training

  • Typescript learning & Team training
  • Material wrappers //initially 5 days overview, later when developing each component
  • Grid layout // learn 5 days & practice 3 days //css grid
  • Animations css & JS learning // 5 days basic animation
  • Unit testing learning // 2 days & practice 1 days
  • Automation testing // 5 days & practice 2 days

Client

  • folder structure
  • Theming & Typography

Concept

(user choice shades + gradient, error color) & Typography (user choice font increase/ decrease) as a component //shared_client

--cst-orange-light-5: someColor5;
--cst-orange-light-4: someColor4;
--cst-orange-light-3: someColor3;
.cst-theme-p-orange {
--cst-p-light-5:cst-orange-light-5;
--cst-p-light-4:cst-orange-light-4;
--cst-p-dark-1:cst-orange-light-3;
..etc
}
.cst-theme-s-orange {
--cst-s-light-5:cst-orange-light-5;
--cst-s-light-4:cst-orange-light-4;
--cst-s-dark-1:cst-orange-light-3;
..etc
}
Now on body add class 'cst-theme-p-orange/ cst-theme-s-red', in entire product use variables cst-p-light-5, cst-s-light-5 ..etc
similar lines implement typography
also now providing one light(white shades) & dark (black shades) theme as been standard // black + white + gray (learn from vscode)
also custom colors as shades concept + hardcoded colors for specific components (Else dept requests can't be handled)

  • Aurelia skeleton code + bundling ..etc

  • localization //consider english as separate language (default) file

  • browserCompatibilityCheck //shared_client

  • UI components //shared_client

list

Points to consider :

  • All just do version 1 & remaining backlog add in same readme file
  • Have typical HTML experience (attributes & events - promises)
  • Wrapper interface for each core element
  • container responsive or css grid in json - different for each screens
  • componentHelpers along with if any

PORT + add interface

material variant + schema design + schema validations + error labels

  • Textbox + Multiline textbox + Textarea (merge all)
  • Number box (can merge above + email + password)
  • Checkbox + Checkbox group //label for, indeterminate
  • radio group
  • dropdown (DLL_MERGE)
  • loader (add more styles) (LOADER_MERGE)
  • icons
  • buttons
  • breadcrumbs
  • tile + card //with header, footer
  • toggle button (switch)
  • Charts (single/ multiple/ nested)
  • picture element
  • Scale slider
  • icon rating
  • home page components
  • marquee slider
  • TV flipper
  • image slider
  • flashLike
  • card_counts
  • block groups
  • Video element

New components

  • Autocomplete dropdown (DLL_MERGE)

  • Related / nested dropdown (DLL_MERGE) //3 or n level

  • Icon dropdown (DLL_MERGE)

  • Masker (LOADER_MERGE)

  • Date picker

  • Alerts + Summary

  • File upload //think of docs management structure

  • Menu //related dropdown ?

  • icon set (nested, more icons) //quick bar, nav bar, tile icon bar

  • navbar (horizontal, vertical modal) //rewrite

  • Form (nested) //edit & view form

  • List page //phase 1, all popup edit, so that useful in tile view

  • Summary page

  • Any component //always check parallel with each element developed

    <any use-component="dropdown" load-test-data="true" on-all="allEventHandler(eventName, evtObj, data)"/>
    It drill downs too
    <cst-select load-test-data="true" on-all="allEventHandler(eventName, evtObj, data)">
    onBind() take data from test_data folder & assign to json-schema, json-data attributes
    Note: if test data, then in event call back return todo, checklist...etc JSON

  • wrappers : //shared_csd

    • logging
    • caching
    • crypto
    • momentJs
    • numeralJS
    • utilities (array filter/ sort...)
    • schema validations

  • material wrapper

  • Build management (typical aurelia application) //shared_client

  • shapes Material shapes

  • Animations //user choice on/off - variants

  • use HTML only custom element for larger design

  • Aurelia 2 migration when released

  • Accessibility (atleast keyboard work around without mouse & touch) //like vs code command help window

  • Auto save form, unsaved changes..on page navigate..use Aurelia store

  • bring home page as a slick concept (as needed in TW rewrite)

  • port feedback module as SLICK

  • story book

Server

Database

  • JSON Schema
  • Indexing
  • Test & production machine setup
  • Backup & Restore //+ GIT
  • Security & Advanced topics required
  • Storage pointing to ?
  • MongoDB hopping (get from some DB table if not from other ) // for old data

Testing

  • Unit testing (Jest or simple aurelia 2 assert) //code coverage ??
  • Automated UI testing (Responsive too) //puppeteer** or playwright wrapper, later accessibility automation testing tools available
  • API Testing
  • CI ?

IT

  • Nginx, brotli & gzip compression, http2 parallel file serving
  • Heartbeat

Docs

  • docs must be print friendly // markdown to pdfs - give option to download.

Developer points

  • Check loadash library (clone deep..etc js functions)
  • Dummy / empty coding : Only docs & component interactions are checked
    • Let all teams check it out & give input
  • ext_repos => shared_client, without code only readme folders //then can link all shared & project documentation together
  • let /examples of components be a aurelia route (loaded with chunk module)
    • Auto generate page data, fill left menu from component names, load right side by any component element
    • handling events in example page (just display event name & JSON data)
  • let /todo shows all project todo
  • constants, each component will have code & all helpers ..etc are written there itself
  • debugging, logging, security, performance & other standards are built in. Add same in checklist of each component
  • Define naming conventions in
    • ESLINT
    • VS CODE Snippets
    • TS Interfaces (separate files & import, export types separately)
  • Export to excel == print (in data perspective) , //JSON to HTML, JSON to EXCEL // generic wrappers
  • sample folders : like new custom_element, new_page //leverage snippets
  • Think Design like
    • Layout 1 : Comp 1A/ 1B/ 1C
    • Layout 2 : Comp 1A/ 1B/ 1C
  • Send notification, if regression testing fails

GraphQL (add in separate graphql file)