WEEK1 WEEK2

First Complete JavaScript from w3schools.com then you may watch lecture
- https://www.w3schools.com/js/default.asp

Week 3 week4
Complete VueJS 2 (our course covers vuejs version 2 )from

https://youtu.be/nyJSd6V2DRI?list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07

OR
Lect 1 to 6
https://www.youtube.com/watch?v=wVmSvDqojBc&list=PLpzy7FIRqpGDuLIo0zZ43CpA5MmYn
nCUy

OR
From lec 1 to lec 16 ( after that Vue CLI starts, we will study in week7)
https://www.youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZN
rYa

Then cover some theoretical concept from lecture(or slide)

Week5
ScreenCast 5.1 ; https://youtu.be/hk6OktYj8Fs (just theory part)

ScreenCast 5.2 ; Javascript Async await ( studied in week1 from w3schools)

- https://www.w3schools.com/js/js_async.asp
- https://youtu.be/AyJq1RRaY_k
-

ScreenCast 5.3 ; Use of fetch API ( you studied fetch in week 1 from w3schools) in vue
- Before going to implement fetch API, you should have understanding of HTTP request
and response
- HTTP Request https://youtu.be/pHFWGN-upGM
- HTTP Response https://youtu.be/c9sMNc2PrMU
- https://youtu.be/38uPRscJXfo

Week6
Lec 6.1 Javascript storage ( covered in week1 from w3schools)
https://www.w3schools.com/js/js_api_web_storage.asp OR https://youtu.be/GihQAC1I39Q

Lec 6.2 Vue form validation

- Watch lecture
Lec 6.3 Single file component (SFC)
- You will learn how to write vue component in a separate file ( just to make code more
cleaner)
- There are two ways to write SFC in JS or HTML file(easy to implement) and vue
file(covered in week7)
- https://vueschool.io/lessons/introduction-to-single-file-components?friend=vuejs (just
learn theory from here because this lecture uses vue cli)

L6.4 - Vue testing

- Watch lecture because mostly theoretical
-
Screencast 6.1; Vue Routing
- Used to mount/unmount different components( learnt in L6.3) in browser view
- Import library of vue router that is compatible with vue library
- Always put vue library first then vue router library in your HTML file
- watch screencast

Week7
Lec 7.1: Theory about state management
- Vuex is a state management library
- Watch lecture (theoretical)
Lec 7.2 : Vuex
- https://youtu.be/_2_C9j-8CtM
Lec 7.3 Routing ( already covered in screencast 6.1)
Lec 7.4: SPA ( single page application) vs MPA ( multi page application)
- One of the main learning objective of vue js is to develop SPA
- In the browser you have loaded a page along with vue components. Now you just switch
between different components ( Looks like toggle but not actually) using vue router.
- You can watch lecture (however you already know practical aspects)
Screencast 7.1: Using Vuex (already covered in lec 7.2 alternative video)
Screencast 7.2 : Vue CLI ( command line interface)
- In lec 6.3 you studied how to make SFC
- Vue CLI is an alternative way to write SFC
- https://youtu.be/FWQSuskE5UA ( same playlist shared in week3/4)

Week8

Lec 8.1 and 8.2 : Till now you are almost done with frontend. It's time to develop a full fledged
application.
- This will require Flask API knowledge for backend ( MAD1) and VueJS knowledge for
frontend ( MAD2)

Lec 8.3: GraphQL

 - Not so important for MAD2 course
- Watch lecture ( theoretical)

Lec 8.4 8.5

- Theoretical

Screencast 8.1: Token based authentication

- Authentication vs Authorization
- We will use JWT for authorization https://youtu.be/7Q17ubqLfaM
- https://youtu.be/J5bIPtEbS0Q

Screencast 8.2 8.3 :

Week9
From this week our focus will be on to reduce response time of server for users
Lec 9.1 : How web server handle large number of requests
Lec 9.2 9.3 9.4:
- Celery is used to handle time consuming tasks
- But first Understand Redis database (because we will be using redis database to store
celery messages and result), So install and play with it on command line
https://youtu.be/jgpVdJB2sKQ (upto 7:42)
- https://youtu.be/THxCy-6EnQM
- https://youtu.be/iwxzilyxTbQ

Week10
Lec 10.1 some background towards webhooks
Lec 10.2 10.3 10.4 webhook
- Used to push messages/notifications to each user who is subscribed to.
- Example youtube sends notification to each subscriber who pressed the bell icon
- example - whatsapp notification, google chat space
- https://youtu.be/mrkQ5iLb4DM OR https://youtu.be/6RvlKYgRFYQ
- Watch lecture to get some theoretical knowledge
Screencast 10.1:
Screencast 10.3; use of webhook in a flask application
- You have already developed a vue application using flask API. Now just replace the URL
inside the fetch method with webhook url.
- https://youtu.be/X-_25tzo8Cw

Week11
Lec 11.1: Caching to improve performance of server
- watch lecture for theoretical knowledge
- For more depth https://youtu.be/Ez1GK2imrsY
Screencast 11.1: Implement caching in flask application
 - Storing information internally for a specific reason is called caching (Google
definition-Caching is a technique that stores a copy of a given resource and
serves it back when requested)
- Storing output of a function in flask app is called flask caching
- We can use any database to store output of a function ( Redis is more preferable)
- https://youtu.be/iO0sL6Vyfps

Week12: Hey! We are done yarr!

In a nutshell overall
● MAD1 : Backend development
● MAD2: Frontend development (In MAD1, Front-end was developed using jinja, here in
MAD2 we will use vuejs instead of jinja)

Note:
- These resources was much helpful for me and so feedback to this is subjective
- After watching these alternative videos, I did MAD2 project and I was able to respond in
viva
- For any change, feel free to call my attention
- Channel/Article references
● Vue mastery
● Pretty printed
● W3schools
● Acadmind
● Coder’s tape
● The net ninja
● etc
Approach to develop final project:
● First focus on Backend development. Develop flask API as backend. Pretty printed
youtube will be your good friend
● During development of Flask API always test it on Postman concurrently
● Now focus on front end development using VueJS

Thank you and best wishes