Repository files navigation

• Setup a single page app 🚀🏁
• Layout has an animation area on the top 🚀🏁
• Layout has an editor area on the bottom 🚀🏁
• Layout has a navigation area on the right which is hidable 🚀🏁
• Setup third party library for code editor 🚀🏁
• Create basic chapter structure 🚀🏁
• Setup third party library for animation area - flowchart-vue 🚀🏁
• State management via vuex 🚀🏁
• Access data viamapGetters andmapActions 💪🏼👨🏼‍💻⏳
• Add methods for rendering the nodes to the main board 💪🏼👨🏼‍💻⏳

• Iterate overelements in a chapter.
• Create a card with each elementid and position them on screen with elementposition.
• All cards are movable.
• Each card has propery to hook it to other card.

• site loads with a welcome screen, which has proceed button.
• after proceed, current state moves to chapter one.
• Chapter navigation is controlled via navbar and also url (site.com/ch/1)
• Data onmain-board andeditor-board changes when chapter is changed.
• Chapter class becomesactive in navbar when it is chosen.

• A js array of objects, where object is of format:

{title:"How web works 1",icon:'mdi-webhook',elements:[{id:1,x:100,y:130,name:'NoSql',type:'db'},{id:2,x:140,y:130,name:'User',type:'client'},{id:3,x:180,y:130,name:'Server',type:'server'},],explaination:{content :"lorem ipsum ....",reveal :false},problem:{statement :"fix the relation of given scenario"},connections:[{source:{id:1,position:'right'},destination:{id:2,position:'left'},id:1,type:'pass',},]}

follow CKAD curriculum

• How web works 1 :
  browser --> server
• How web works 2 :
  browser --> server --> db
• How web works 3 :
  browser --> auth --> server --> db
• How web works 4 :
  millions of browser --> distributed auth --> distributed server --> distributed db
• How developer works 1 :
  github --> deploy in distributed auth --> deploy in distributed server --> deploy in distributed db
• problems in last :
  github --> deploy in distributed auth --> deploy in distributed server --> deploy in distributed db
• kubernetes deployment :
  github --> deployment auth --> deployment server --> deployment db
• How k8s work 1 :
  front end developer --> write code --> Containerize it --> edit deployment
• How k8s work 2 :
  back end developer --> write code --> Containerize it --> edit deployment
• Pods and deployments :
  container --> pod --> vm
• services and ingress :
  pod --> svc --> ingress --> world
• Rolling updates :
  code --> container-tag --> deployment

npm install

npm run serve

npm run build

npm run lint

SeeConfiguration Reference.