https://github.com/theguptaji/k8s-starter
A fun way to learn Kubernetes ☸ 🏁
https://github.com/theguptaji/k8s-starter
cka-exam ckad-exercises ckad-practice k8s
Last synced: 3 months ago
JSON representation
A fun way to learn Kubernetes ☸ 🏁
- Host: GitHub
- URL: https://github.com/theguptaji/k8s-starter
- Owner: theguptaji
- Created: 2020-05-23T07:56:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:45:35.000Z (over 2 years ago)
- Last Synced: 2025-01-10T22:23:51.951Z (4 months ago)
- Topics: cka-exam, ckad-exercises, ckad-practice, k8s
- Language: Vue
- Homepage: https://bakabrain.netlify.app/
- Size: 1.65 MB
- Stars: 0
- Watchers: 1
- Forks: 3
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# k8s-starter
## Development flow
* 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 via `mapGetters` and `mapActions` 💪🏼👨🏼💻⏳
* Add methods for rendering the nodes to the main board 💪🏼👨🏼💻⏳
## animation area
* Iterate over `elements` in a chapter.
* Create a card with each element `id` and position them on screen with element `position`.
* All cards are movable.
* Each card has propery to hook it to other card.
## State management
* 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 on `main-board` and `editor-board` changes when chapter is changed.
* Chapter class becomes `active` in navbar when it is chosen.
## Data
* A js array of objects, where object is of format:
```js
{
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',
},
]
}
```
## chapters
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`
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).