Professional Documents
Culture Documents
K L Deemed to be University
Department of Computer Science and Engineering-Honors -
Course Handout
2023-2024, Even Sem
Course Title :MERNSTACK WEB DEVELOPMENT
Course Code :22SDCS01A
L-T-P-S Structure : 0-0-6-4
Pre-requisite :
Credits :4
Course Coordinator :Venkata Vara Prasad Padyala
Team of Instructors :
Teaching Associates :
Syllabus :Module 1: Fundamentals of Web Applications: Overview of HTML, CSS, Single Page Application (SPA), JavaScript, and ES6. Full-Stack Web Developmen
JSX, Passing data to components-props. De structuring, Page re-rendering, Stateful component, State Vs Props, State management, Event handling: Event handler as a
Map Controlled component Filtering Displayed Elements, Axios, promises. Form handling, State and Effect-hooks, React-Router, React Bootstrap styles, Material UI
MaterialUI. Creating mock RESTful API using JSON-server, Error handling, error handling into middleware. Module 2: Working with MongoDB: Features of Mongo
Schema, CRUD operations on objects from the database, other data operations, queries, connectivity with compass and other applications. Module 3: Working with Se
Server routes, Streaming, Files, Express, Web and express framework, HTTP Request types, use of nodemon, REST, Fetching and deleting resources, Postman installa
authorization, Token based authentication. Backend connectivity with database and storing into MongoDB. GraphQL, Apollo Server, Apollo Studio Explorer, Paramet
redux application, Asynchronous actions, and redux-thunk, connect function in Redux, Redux, the component state. Module 4: (Only for advanced courses) TESTING
await. Type Scripting, react with typescript. React Native basics, communicating with the server, Testing, and extending. Introduction to CI/CD, Container. Getting sta
Text Books :Book 1: The Full-Stack Developer Chris Northwood 1st ed. APRESS Book 2: Beginning MERN Stack: Build and Deploy a Full Stack MongoDB, Expre
Express, React, and Node Vasan Subramanian 2nd ed.
Reference Books :1. Mongo DB – The Definitive Guide by Krishna Chodorow, Publisher: Oreily, SecondEdition. 2. Mastering Mongo DB 4.x by Alex Giamas, Publi
Web Links :https://kluniversityin-my.sharepoint.com/personal/praveenluru_kluniversity_in/_layouts/15/onedrive.aspx?
ga=1&id=%2Fpersonal%2Fpraveenluru%5Fkluniversity%5Fin%2FDocuments%2FENGG%2E%20%20SRP%202023%2D2024%2FCohort%20%2D%2016%2FBOT
https://kluniversityin-my.sharepoint.com/personal/muralimohan310_kluniversity_in/_layouts/15/onedrive.aspx?
ga=1&id=%2Fpersonal%2Fmuralimohan310%5Fkluniversity%5Fin%2FDocuments%2FAY%202022%2D2023%20TS%2DSDP2%20MSWD%2FCO%2D1%2FCO%
MOOCS :1: Building modern JavaScript-based single-page web applications that follow RESTAPIs though React, Redux, Node.js, MongoDB, GraphQL and TypeScr
Environment for MEAN/MERN Web Development" [ Préparation de L'environnement de Développement MEAN/MERN ](Guided Project) https://www.coursera.org/
Developer Professional Certificate (12 courses) https://www.coursera.org/professional-certificates/ibm-full-stack-cloud-developer#courses
Course Rationale :Course Rationale:By learning MERN Stack technology, students will get ready to design and develop rich UI and web-based applications for a solu
Full-stack technologies like ReactJS, Express, Node and MongoDB to create faster single-page application websites.
Course Objectives :The objective of the course MERN Stack Technology is to help students to design and develop rich UI and web-based applications for a solution t
stack web applications using ReactJS, Express, Node and MongoDB and also create faster single-page application websites.
Blooms
CO Taxonomy
Course Outcome (CO) PO/PSO
NO Level
(BTL)
CO1 Build responsive front-end app using ReactJS libraries, MUI and bootstrap. PSO1,PO3,PO5 3
CO2 Build MongoDB database and perform CRUD operations and queries PSO1,PO3,PO5 3
CO3 Build express server upon Node environment with RESTFull APIs PSO1,PO3,PO5 3
Build full stack web applications using the MongoDB, Express JS, React & Node JS Full Stack
CO4 PO5,PSO1,PO3 3
framework.
Outcome Highest
COI-1 COI-2
No. BTL
Btl-2 Btl-3
CO1 3 Understand the functions and utilities of various react libraries along Build responsive front-end app using ReactJS libraries, MUI and
with other styling components. bootstrap.
Btl-3
Btl-2
CO2 3 Build a database in MongoDB and perform CRUD operations and
Explain the features of NoSQL database
queries
Btl-2 Btl-3
CO3 3
Explain the HTTP requests methods and structure of backend. Build express server upon Node environment with RESTFull APIs
Btl-3
Btl-2
CO4 3 Build full stack web applications using the MongoDB, Express JS,
Explain the utilities of Redux for store management techniques.
React & Node JS Full Stack framework.
about:blank 1/12
10/12/2023, 07:47 about:blank
Conduct Investigations of Complex Problems:Use research-based knowledge and research methods including design of experiments, analysis and
PO4 interpretation of data, and synthesis of the information to provide valid conclusions for complex problems that cannot be solved by straightforward
application of knowledge, theories and techniques applicable to the engineering discipline.
Modern Tool Usage:Create, select, and apply appropriate techniques, resources, and modern engineering and IT tools including prediction and modelling to
PO5
complex engineering activities with an understanding of the limitations.
The Engineer and Society:Apply reasoning informed by the contextual knowledge to assess societal, health, safety, legal and cultural issues and the
PO6
consequent responsibilities relevant to the professional engineering practice.
Environment and Sustainability:Understand the impact of the professional engineering solutions in societal and environmental contexts, and demonstrate
PO7
the knowledge of, and need for sustainable development
PO8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the engineering practice
PO9 Individual and Team Work: Function effectively as an individual, and as a member or leader in diverse teams, and in multidisciplinary settings.
Communication:Communicate effectively on complex engineering activities with the engineering community and with society at large, such as, being able
PO10
to comprehend and write effective reports and design documentation, make effective presentations, and give and receive clear instructions
Project Management and Finance: Demonstrate knowledge and understanding of the engineering and management principles and apply these to one’s own
PO11
work, as a member and leader in a team, to manage projects and in multidisciplinary environments.
Life-long Learning: Recognize the need for, and have the preparation and ability to engage in independent and lifelong learning in the broadest context of
PO12
technological change.
PSO1 An ability to design and develop software projects as well as Analyze and test user requirements.
PSO2 An Ability to gain working Knowledge on emerging software tools and technologies.
13 Node JS working with Token based authorization and authentication with time frame. CO3
about:blank 2/12
10/12/2023, 07:47 about:blank
Practical Session wise Teaching – Learning Plan
SESSION NUMBER : 1
SESSION NUMBER : 2
SESSION NUMBER : 3
SESSION NUMBER : 4
SESSION NUMBER : 5
SESSION NUMBER : 6
SESSION NUMBER : 7
about:blank 3/12
10/12/2023, 07:47 about:blank
Teaching- Learning Active Learning
Time(min) Topic BTL
Methods Methods
--- NOT
10 Introduction and Attendance 1 Talk
APPLICABLE ---
40 Working with MongoDB: Features of MongoDB, Installation of MongoDB Compass, 2 PPT Case Study
50 Working with MongoDB: Features of MongoDB, Installation of MongoDB Compass, 2 PPT Case Study
SESSION NUMBER : 8
SESSION NUMBER : 9
SESSION NUMBER : 10
SESSION NUMBER : 11
SESSION NUMBER : 12
SESSION NUMBER : 13
SESSION NUMBER : 14
about:blank 4/12
10/12/2023, 07:47 about:blank
Teaching- Learning Active Learning
Time(min) Topic BTL
Methods Methods
--- NOT
10 Introduction and Attendance 1 Talk
APPLICABLE ---
--- NOT
40 Features of Node JS, modules, Server routes, Streaming, Files, 2 PPT
APPLICABLE ---
--- NOT
50 Same origin policy, and CORS, 2 PPT
APPLICABLE ---
SESSION NUMBER : 15
SESSION NUMBER : 16
SESSION NUMBER : 17
SESSION NUMBER : 18
SESSION NUMBER : 19
SESSION NUMBER : 20
about:blank 5/12
10/12/2023, 07:47 about:blank
1 Creating a KLU-CSE(H) website frontend using React-router, MUI, Forms, Buttons and images. CO1
2 Creating a KLU-CSE(H) website frontend using React-router, MUI, Forms, Buttons and images CO1
3 Implement json-server along with the KLU-CSE(H) website to store some data of faculties and students CO1
4 Implement json-server along with the KLU-CSE(H) website to store some data of faculties and students. CO1
Implement json-server along with the KLU-CSE(H) website to store some data of faculties and students using axios and
5 CO1
APIs.
8 Implement MongoDB database to store CRT students data and perform CRUD operations CO2
9 Implement MongoDB database to store CRT students data and perform CRUD operations along with complex queries CO2
10 Building Student academic support App using Node JS with Routes CO3
11 Building Student academic support App using Node JS with Routes CO3
12 Buillding Campus Cafeteria Menu Order blog using Token based authentication and File-upload in NodeJS CO3
13 Buillding Campus Cafeteria Menu Order blog using Token based authentication and File-upload in NodeJS CO3
14 Buillding Campus Cafeteria Menu Order blog using Token based authentication and File-upload in NodeJS CO3
16 Create a Full-stack SPA for Health BMI assess using MERN. CO4
17 Create a Full-stack SPA for Health BMI assess using MERN. CO4
18 Create a Full-stack SPA for Health BMI assess using MERN. CO4
SESSION NUMBER : 1
SESSION NUMBER : 2
SESSION NUMBER : 3
SESSION NUMBER : 4
SESSION NUMBER : 5
SESSION NUMBER : 6
SESSION NUMBER : 7
SESSION NUMBER : 8
SESSION NUMBER : 9
about:blank 7/12
10/12/2023, 07:47 about:blank
--- NOT
10 Introduction and Attendance 1 Talk
APPLICABLE ---
--- NOT
30 Discussion and guidance about propblem 2 PPT
APPLICABLE ---
--- NOT
60 Implementation of the project scenario 3 LTC
APPLICABLE ---
SESSION NUMBER : 10
SESSION NUMBER : 11
SESSION NUMBER : 12
SESSION NUMBER : 13
SESSION NUMBER : 14
SESSION NUMBER : 15
about:blank 8/12
10/12/2023, 07:47 about:blank
--- NOT
30 Discussion and guidance about propblem 2 PPT
APPLICABLE ---
--- NOT
60 Implementation of the project scenario 3 LTC
APPLICABLE ---
SESSION NUMBER : 16
SESSION NUMBER : 17
SESSION NUMBER : 18
SESSION NUMBER : 19
SESSION NUMBER : 20
Assignment
Week Assignment Type Topic Details co
No
Hour 1 2 3 4 5 6 7 8 9
about:blank 9/12
10/12/2023, 07:47 about:blank
Day Component
-- -- -- -- --
Theory --- --- --- ---
- - - - -
-- -- -- -- --
Tutorial --- --- --- ---
- - - - -
Mon
-- -- -- -- --
Lab --- --- --- ---
- - - - -
-- -- -- -- --
Skilling --- --- --- ---
- - - - -
-- -- -- -- --
Theory --- --- -- --
- - - - -
-- -- -- -- --
Tutorial --- --- -- --
- - - - -
Tue
-- -- V-S11,V-S11,V-S11,V- V-S11,V-S11,V-S11,V- -- -- --
Lab --- ---
- - S12,V-S12,V-S12 S12,V-S12,V-S12 - - -
-- -- V-S13,V-S13,V-S14,V- V-S13,V-S13,V-S14,V- -- -- --
Skilling --- ---
- - S14,V-S15,V-S15 S14,V-S15,V-S15 - - -
-- -- -- -- --
Theory --- --- -- --
- - - - -
-- -- -- -- --
Tutorial --- --- -- --
- - - - -
Wed
-- -- V-S21,V-S21,V-S21,V- V-S21,V-S21,V-S21,V- -- -- --
Lab --- ---
- - S24,V-S24,V-S24 S24,V-S24,V-S24 - - -
-- -- V-S22,V-S22,V-S23,V- V-S22,V-S22,V-S23,V- -- -- --
Skilling --- ---
- - S23 S23 - - -
-- -- -- -- --
Theory -- -- -- --
- - - - -
-- -- -- -- --
Tutorial -- -- -- --
- - - - -
Thu
-- -- V-S22,V-S22,V-S22,V-S23,V-S23,V- V-S22,V-S22,V-S22,V-S23,V-S23,V- V-S34,V-S34,V-S34,V- V-S34,V-S34,V-S34,V- -- -- --
Lab
- - S23 S23 S35,V-S35,V-S35 S35,V-S35,V-S35 - - -
-- -- V-S31,V-S31,V-S32,V- V-S31,V-S31,V-S32,V- -- -- --
Skilling V-S21,V-S21,V-S24,V-S24 V-S21,V-S21,V-S24,V-S24
- - S32,V-S33,V-S33 S32,V-S33,V-S33 - - -
-- -- -- -- --
Theory -- -- --- ---
- - - - -
-- -- -- -- --
Tutorial -- -- --- ---
- - - - -
Fri
-- -- V-S32,V-S32,V-S32,V-S33,V-S33,V- V-S32,V-S32,V-S32,V-S33,V-S33,V- -- -- --
Lab --- ---
- - S33 S33 - - -
-- -- V-S31,V-S31,V-S34,V-S34,V-S35,V- V-S31,V-S31,V-S34,V-S34,V-S35,V- -- -- --
Skilling --- ---
- - S35 S35 - - -
-- -- -- -- --
Theory -- -- --- ---
- - - - -
-- -- -- -- --
Tutorial -- -- --- ---
- - - - -
Sat
-- -- -- -- --
Lab -- -- --- ---
- - - - -
-- -- V-S11,V-S11,V-S12,V-S12,V-S13,V- V-S11,V-S11,V-S12,V-S12,V-S13,V- -- -- --
Skilling --- ---
- - S13,V-S14,V-S14,V-S15,V-S15 S13,V-S14,V-S14,V-S15,V-S15 - - -
-- -- -- -- --
Theory --- --- --- ---
- - - - -
-- -- -- -- --
Tutorial --- --- --- ---
- - - - -
Sun
-- -- -- -- --
Lab --- --- --- ---
- - - - -
-- -- -- -- --
Skilling --- --- --- ---
- - - - -
REMEDIAL CLASSES:
Supplement course handout, which may perhaps include special lectures and discussions that would be planned, and schedule notified according
SELF-LEARNING:
Content beyond syllabus covered (if any) should be delivered to all students that would be planned, and schedule notified accordingly.
S.no Advanced Topics, Additional Reading, Research papers and any CO ALM References/MOOCS
EVALUATION PLAN:
about:blank 10/12
10/12/2023, 07:47 about:blank
Evaluation Type Evaluation Component Weightage/Marks Assessment Dates Duration (Hours) CO1 CO2 CO3 CO4
Weightage 20 5 5 5 5
End Semester SEM End Project 100
Summative Max Marks 100 25 25 25 25
Evaluation Weightage 20 5 5 5 5
Total= 40 % Lab End Semester Exam 100
Max Marks 100 25 25 25 25
Weightage 10 2.5 2.5 2.5 2.5
Pre-Class Assessment 50
Max Marks 100 25 25 25 25
Weightage 15 3.75 3.75 3.75 3.75
Flipped Discussion Engagement 45
In Semester Max Marks 100 25 25 25 25
Formative Weightage 5 1.25 1.25 1.25 1.25
Continuous Evaluation - Lab Exercise 100
Evaluation Max Marks 100 25 25 25 25
Total= 45 % Weightage 5 1.25 1.25 1.25 1.25
Continuous Evaluation -Project 100
Max Marks 100 25 25 25 25
Weightage 10 2.5 2.5 2.5 2.5
Hackathon 240
Max Marks 100 25 25 25 25
Weightage 10 2.5 2.5 2.5 2.5
In Semester Lab In Semester Exam 100
Summative Max Marks 100 25 25 25 25
Evaluation Weightage 5 1.25 1.25 1.25 1.25
Total= 15 % MOOCs Certification 200
Max Marks 100 25 25 25 25
ATTENDANCE POLICY:
Every student is expected to be responsible for regularity of his/her attendance in class rooms and laboratories, to appear in scheduled tests and examinations and
fulfill all other tasks assigned to him/her in every course
In every course, student has to maintain a minimum of 85% attendance to be eligible for appearing in Semester end examination of the course, for cases of medical
issues and other unavoidable circumstances the students will be condoned if their attendance is between 75% to 85% in every course, subjected to submission of
medical certificates, medical case file and other needful documental proof to the concerned departments
DETENTION POLICY :
In any course, a student has to maintain a minimum of 85% attendance and In-Semester Examinations to be eligible for appearing to the Semester End Examination,
failing to fulfill these conditions will deem such student to have been detained in that course.
PLAGIARISM POLICY :
Supplement course handout, which may perhaps include special lectures and discussions
COURSE TEAM MEMBERS, CHAMBER CONSULTATION HOURS AND CHAMBER VENUE DETAILS:
Supplement course handout, which may perhaps include special lectures and discussions
Delivery Chamber
Sections of Chamber Chamber Consultation Signature of
Name of Faculty Component of Consultation Room
Faculty Consultation Day (s) Timings for each day Course faculty:
Faculty No:
Venkata Padyala P 13-A - - - -
Venkata Padyala S 13-A - - - -
Chaitanya Krishna
P 22-B - - - -
Bondalapu
Nagamalleswari Dubba P 22-C,11-B - - - -
Nagamalleswari Dubba S 22-B - - - -
V V Satyanarayana Kopparti P 23-B - - - -
Venkata Naga Ramesh
P 31-C - - - -
Janjhyam
Sridevi Sakhamuri P 35-C - - - -
Surya Kiran Jonnalagadda P 32-A,14-A - - - -
Surya Kiran Jonnalagadda S 32-A,14-A - - - -
Kunda Prasad S 13-B - - - -
Padmanaban K P 22-A,12-A - - - -
Padmanaban K S 12-A,22-A - - - -
Veerraju Gampala P 23-A,11-A - - - -
Veerraju Gampala S 23-A,11-A - - - -
Murali Vutukuru P 15-A - - - -
Murali Vutukuru S 15-A - - - -
Balajee R M P 21-A,31-A - - - -
Balajee R M S 21-A,31-A - - - -
Arepalli Gopi P 34-B - - - -
Arepalli Gopi S 22-B - - - -
Nagarjuna Karyemsetty S 21-B,31-B - - - -
Anjana Akurathi S 32-B - - - -
CH Sabitha P 23-C,11-C - - - -
Bindu G S 23-B,15-B - - - -
Chitti Ravela P 33-B - - - -
Prashanti Guttikonda P 21-B - - - -
about:blank 11/12
10/12/2023, 07:47 about:blank
Mohammad Ishrat P 32-C - - - -
chandra rai P 21-C - - - -
Vignesh T S 12-B - - - -
Dr.Sreenivasulu Bolla P 12-C - - - -
Prasanthi Valluri P 13-B - - - -
12-B,34-
G Kadiravan P - - - -
A,24-A
G Kadiravan S 24-A,34-A - - - -
ANJU K P 33-A,24-C - - - -
ANJU K S 33-A - - - -
SWARNA MAHESH
P 24-B - - - -
NAIDU
Seetharam R P 15-B,35-B - - - -
YENGALA AMARAIAH P 13-C - - - -
annamaraju thanuja P 15-C,33-C - - - -
annamaraju thanuja S 14-B - - - -
YELISETTY
S 35-B - - - -
MADHAVILATHA
MAHENDRAN R S 11-B - - - -
POTHIREDDY ARUN
P 35-A - - - -
REDDY
POTHIREDDY ARUN
S 35-A - - - -
REDDY
K. VaniSri P 14-C - - - -
PHANEENDRA KUMAR B
S 33-B - - - -
LN
Anjaneyulu Gurram P 14-B - - - -
Anjaneyulu Gurram S 24-B - - - -
prakasarao yallamati
P 34-C - - - -
prakasarao yallamati
prakasarao yallamati
S 34-B - - - -
prakasarao yallamati
MD SHAMSUL HAQUE
P 31-B - - - -
ANSARI
ANUSHA GUDISE P 32-B - - - -
GENERAL INSTRUCTIONS
Students should come prepared for classes and carry the text book(s) or material(s) as prescribed by the Course Faculty to the class.
NOTICES
All notices concerning the course will be displayed on the respective Notice Boards.
Department Of CS&IT
HEAD OF DEPARTMENT:
about:blank 12/12