11 AM 11-03-2024

MERN stack Realtime project

===================

2 months - 1:30h

Prerequisites to join this course

a. Basic idea on HTML, CSS, JavaScript

c. Basic idea on React
d. Basic idea on node

Content:

1. Discuss Required Concepts in :

a. HTML
b. CSS
c. JavaSCript

2. Disucss Required Concepts to develop react project(front end) :

a. React

3. Discuss Required Concepts for Backend Development:

a. node js (REST & GraphQL)

4. Discuss about Database

a. MongoDB

5. Project Documentation , Figma Design document

6. Project Setup(React, node js, MongoDB)

6. Real-Time Project
a. React as frontend
b. Node with express as backedn
c. JIRA - Agile Methodolofy
d. GIT - version control

7. Testing

8. Deployment
a. AWS, Vercel

9. Performance

10. Security

=========================================
Daily Base Activities , Agile methodology
=========================================
Start Sprint- 2 weeks ( total 4 sprints)
Create Jira account
Create git hub account

Day 1
HTML Interview Questions
Design static Web Page using HTML and CSS
Assignment
Prepare own Notes
Write HTML test

Day 2
CSS Interview Questions (apply styles, boxmodel, selectors)
Make look and feel that above above web page
Assignment
Prepare own Notes
Write CSS test

Day 3
CSS Interview Questions (positions, flex, grid, media queries)
Deploy above page - Godaddy
Assignment
Prepare own Notes
Write HTML, CSS , Bootstrap test

Day 4:
Question and Answers on HTML and CSS
Assignment
Notes
Write HTML, CSS , Bootstrap test

JavaScript starts
=================
Day 5:

Variable and function

Programs
Interview Questions
Assignment - JS program -1(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Dat 6:
document, window, getReference, events, eventbubbling, eventCapturing
Programs
Interview Questions
Assignment - JS program -2(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 7
setTimeout, setInterval, clearTimeout, clearInterval,Debouncing, Throttling
 Programs
Interview Questions
Assignment - JS program -3(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 8
OOPS(class, object, inheritance, overloading, overriding, abstration,encapslation)
Programs
Interview Questions
Assignment - JS program -4(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 9
Browser Storages - localStorage, sessionStorage , Cookies
Programs
Interview Questions
Assignment - JS program -5(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 10
BOM - Browser Object Model- location,screen, History, navigator
Programs
Interview Questions
Assignment - JS program -6(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 11
Exception Handling
Programs
Interview Questions
Assignment - JS program -7(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 12
Callbacks
Programs
Interview Questions
Assignment - JS program -8(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 13
Promises
Programs
Interview Questions
Assignment - JS program -9(write/todo)
Notes -
Write HTML, CSS, Bootstrap, JavaScript Test
Day 14
Question and Answers
Assignment - JS program -10(write/todo)
Notes -
Write HTML, CSS, Bootstrap, JavaScript Test

Day 15
Observables
Programs
Interview Questions
Assignment - JS program -11(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 16
AJAX - XMLHttpRequest, fetch
Programs
Interview Questions
Assignment - JS program -12(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 17

JSON, Array, String

Programs
Interview Questions
Assignment - JS program -13(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 18

Authentication,Shoot
Programs
Interview Questions
Assignment - JS program -14(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 19

functional Comonents, useState

Programs
Interview Questions
Assignment - JS program -15(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 20

Communication b/w components

Programs
Interview Questions
 Assignment - JS program -16(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 21

useEffect (Mounting, updating , unmountng)

Programs
Interview Questions
Assignment - JS program -17(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 22

useContext, useRef
Programs
Interview Questions
Assignment - JS program -18(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 23

List and Keys

Programs
Interview Questions
Assignment - JS program -19(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 24

Reusable components
Programs
Interview Questions
Assignment - JS program -20(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 25

AJAX
Programs
Interview Questions
Assignment - JS program -21(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 26

HOC,HOF, useMemo, useCallback, useTransistion, custom

Programs
 Interview Questions
Assignment - JS program -22(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 27

Redux
Programs
Interview Questions
Assignment - JS program -23(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 28

useReducer
Programs
Interview Questions
Assignment - JS program -24(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 29
Redux-saga
Programs
Interview Questions
Assignment - JS program -25(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 30
JEST/RTL
Programs
Interview Questions
Assignment - JS program -26(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 31
PlayWright
Programs
Interview Questions
Assignment - JS program -27(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

Day 32:
Create one web applicaiton using React - animation
Programs
Interview Questions
Assignment - JS program -28(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test
Day 33:
Work on above application
Assignment - JS program -29(write/todo)
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test
Day 34:
Complete above application
Deploy to vercel
Assignment - JS program - 30
Notes -
Write HTML, CSS, Bootstrap,JavaScript Test

===============================================

Next 30days Every day - 1 react progam write and 1 react program do

===============================================

3 Days

Documentation

Figma

JIRA

GIT
================================================

Environment Creation

client App - react with next - 1 day

server App - node with express - 3 days

Database - MongoDB - 2 day

=================================================

Next 20 days work on requirement both client and server applications

Client app -react

Server app -node
Database - mongo DB
Test cases - Jest / RTL
Automation - PlayWright
Deployment -
client-vercel
server- AWS
=================================================
Graph QL

DML operation
client- react with GraphQL(apollo Client, react query, axios)
server - node with GrahpQL
 Database - MongoDB

=================================================

Softwares need to install:

1. Visual Studio Code : https://code.visualstudio.com/

2. git : https://git-scm.com/downloads
3. DesktopGit : https://desktop.github.com/
4. MongoDB : https://www.mongodb.com/try/download/community
5. MongoDB compass : https://www.mongodb.com/products/compass
6. Node s/w or nvm : https://nodejs.org/en/download or https://github.com/coreybutler/nvmwindows/releases
7. postman : https://www.postman.com/downloads/

===================================================
Create Accounts:

1. https://github.com/
2. https://www.vercel.com/
3. https://mongodb.com/
4. https://aws.amazon.com/
5. https://www.npmjs.com/

===================================================
Learning Websites:

1. www.uijavakit.com
2. www.kalamschools.com
3. www.yourpost.in
4. www.writetest.in

===================================================
Email:

chenchala.srinu@gmail.com

===================================================

Videos:

Day-1 https://youtu.be/ZoS4xGSxn-E

Day-2 https://youtu.be/Yyut179kteE

Day-3 https://youtu.be/zaRiNQPZzCI

Day-4 https://youtu.be/UEBZVRs82ng

Day-5 https://youtu.be/P6J3vDtihZM

Day-6 https://youtu.be/UOYCJEx_-WY

Day-7 https://youtu.be/qzbP7F1Z_1U
Day-8 https://youtu.be/sgUG_8Y0O84

Day-9 https://youtu.be/dU-aKs0yYII

Day-10 https://youtu.be/nyGakroQF2k

Workshop : https://youtube.com/live/oGBdi__l3Zc?feature=share

=================================

18-03-2024

1. what is inline element and what is block level ?

2. Tell me some block level elements and some inline elements ?

3. How to load one external CSS file inside the HTML ?

4. where we can track request and response ?

5. Tell something about Developer console window ?

elements
source
network
console
application

6. where we can find browser storages ?

7. What is Semantic tag ?

8. title tag and title attribute

9. style tag and style attributes?

10. How we can add fav Icon ?

19-03-2024

Agile Methodology

Create User Stories & Defects, Plan Sprints, & Distribute Tasks Across Team.

Jira Makes it Easy with Scrum Boards .

Refinement Session

Resource availability, find bandwidth

Note: Do you have bandwidth to pick up new story ? yes/no (time)

Spring planning
Start Sprint

Daily basis calls : Scurm Call/ Standup call / Status Call

User stories status — owner - nit

tasks - design, integration, deploy, QE test

R- Refining
D- Defined
P- In-progress
C- Completed - go for test - give demo - if ok -accepted- and promoted to higher environment(adoption,
production)
A- Accept

Sprint Closing

Some user stories move to next sprint : spillover

=============================

Once developer completed his code changes, commit into the branch(repo) and raise Pull Request for
review, if ok accept PR and merge to main. And then from main give build to

Dev, QA and other environments.

1. create an account

Version control

https://github.com/

1. How many ways we can apply styles ?

2. Tell something about Boxmodel?

3. selectors what know ?

4. tell something about fixed position ?

5. tell me the priority order ?

20-03-2024

us123 : loign implementation RD P CA - owner - nit - 3

tsk1: desing login page - nit - 2 - C

tsk2: integration - nit - 6 -c
tsk3: deploy to test - nit -3
tes4: QE test - tester- 3

1. github repo url - team lead

 git there or not there
there ?
not there ? install git s/w and set path

git clone <repo url>

error while cloning - check with team lead

2. once you have to the source code in local machine

3. KT sessions , your side run the application in local (do setup)

4. add you to the refinement sessions .

5. added you to the new sprint

6. assing user storie(s)

7. start user story - create the task and assing to developers

8. donn"t work on main/master brach

9. create a new branch (your name / user story name ) and push

10. change status of user story and tasks

11. start writing the code

12. 30% code completed so that push to my own brach

13. git status

add files to commit

add one file - git add <file path>

add 2 files - git add <file path> <file path>
add all files _ git add * / git add .

want to restore

restore one file - git restore --staged <file path>

restore 2 files - git restore --staged <file path> <file path>
restore all files _ git restore --staged *

14. check the status again

which files are added, those are in green color

15. git commit -m "us123: login implementaion"

16. git push

17. raise Pull Request(PR) for review, to merge into main/master branch

18. if everything is ok , merge pull request into main branch.

21-03-2024

git clone <repo url>

create b1 branch from b2 ?

a. go to b2 branch git chekcout b2
b. git checkout -b b1
c. git push

1. D1 and D2 both are working on same branch

D1 - b1
D2 - b1

can we use like above ? Yes

2. D1 - b1

D1 pushed the changes to b1

How the D2 developer the the b1 branch code in local ?

- has to go to b1 branch
- git pull

3. How to get the cloud branch latest code into your local branch ?

- git pull

==================

local to cloud

1. find files in local

2. create empty repo

3. in local folder >

git init
git add *
git branch -M main
git commit -m ""
git remote add origin <repo url>
git push origin main

4. both local and clound in sync

5.
refinement session - client, lead , developers
refined user stories added to the next sprint

spring planning session , assinged to developers

=============================-----------------

us100 : implement filter - owner - RDPC A- 3p - 18

task1 design - PCA - (actual) - 4(estimate) - 0(todo)
taks2 implementation-pCA -6
task4 deploy -2 - A
task5 QE test -2 - A

test env -

========================

Assignment - HTML, CSS, bootstrap

Notes:

1. new features in CSS3

2. new features in HTML5

3. flex

4. grid

5. where exaclty you used media queried in your application ?

6. play with git

7. procedure

8. create jira account

22-03-2024

1. when we can get the conflicts ?

main
1.html
1 <div>ss</div>
2
3

Developer:

1. go to main branch

2. git checkout -b b1
b1
1.html
1.<div>Sachin</div>
2.
3.

raise PR

merge b1 into main

How we can resolve ?

us200 implment webpage using bootstrap - 3p

tasks -
desgin page - 3h
integrate bootsrap
deploy
test

Why we go for bootstrap ?

Build fast, responsive sites with Bootstrap

what is responsive ?

How to use bootstrap ?

1. get that css

.min.css
.css
.map.css

.min.js
.js
.map.js

https://getbootstrap.com/

lib/framework(3rd party)
-opensource / commercial
-used by how many developers

https://www.npmjs.com/

Weekly Downloads
License
library- react
1.js file
2. variable,function, classes

How to use lib ?

1. get the js
2. load the js
3. use

framework- angular

1. follow some rules

2. Google - module , components, directives, pips,services, modules

bootstrap

1. utilities
2. components
3. Grid system

Extra small (xs)

Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

.d-md-none .d-lg-block

1. https://getbootstrap.com/

a. utilities
b. components

2. Why we go for bootstrap?

3. what is grid system in bootstrap?

4. How to hide the element only in md resolution ?

5. tell me some bootstrap components used in your application ?

22-04-2024

What is grid sytem in bootstrap ?

container vs contaier-fluid

what kind bootstrap component you used in your applicaiton ?

us300. implement login page

refinement session
1. desgin document - figma
2. acceptance criteria
a. design the responsive
b. send requiest to server validate JSON
c. show the mesasge in toaster

1. add refined user stories to sprint

2. spring planning session

3. start the sprint

us300. implement login page - 3p - change the status

1. create tasks
a. desgin resposive page - C - 5h
b. prepare data object print in console
c. deplyment to test
d. QE test

looking for job with exp

take

get projects 2