Annexure-II 1

FULL STACK DEVELOPMENT Semester 6

Course Code BIS601 CIE Marks 50
Teaching Hours/Week (L: T:P: 3:0:2:0
SEE Marks 50
S)
Total Hours of Pedagogy 40 hours Theory + 8-10 Lab slots Total Marks 100
Credits 04 Exam Hours 03
Examination type (SEE) Theory

Course objectives:
● To understand the essential javascript concepts for web development.
● To style Web applications using bootstrap.
● To utilize React JS to build front end User Interface.
● To understand the usage of API’s to create web applications using Express JS.
● To store and model data in a no sql database.

Teaching-Learning Process (General Instructions)

These are sample Strategies, which teachers can use to accelerate the attainment of the various course
outcomes.
1. Lecturer method (L) need not to be only a traditional lecture method, but alternative effective
teaching methods could be adopted to attain the outcomes.
2. Use of Video/Animation to explain functioning of various concepts.
3. Encourage collaborative (Group Learning) Learning in the class.
4. Ask at least three HOT (Higher order Thinking) questions in the class, which promotes critical
thinking.
5. Adopt Problem Based Learning (PBL), which fosters students’ Analytical skills, develop design
thinking skills such as the ability to design, evaluate, generalize, and analyze information rather
than simply recall it.
6. Introduce Topics in manifold representations.
7. Show the different ways to solve the same problem with different circuits/logic and encourage
the students to come up with their own creative ways to solve them.
8. Discuss how every concept can be applied to the real world - and when that's possible, it helps
improve the students' understanding.

Module-1
Basic JavaScript Instructions, Statements, Comments, Variables, Data Types, Arrays, Strings,
Functions, Methods & Objects, Decisions & Loops.

Text Book 1: Chapter 2, 3, 4

Module-2
Document Object Model: DOM Manipulation, Selecting Elements, Working with DOM Nodes, Updating
Element Content & Attributes, Events, Different Types of Events, How to Bind an Event to an Element,
Event Delegation, Event Listeners.

Text Book 1: Chapter: 5, 6, 13

Module-3
Form enhancement and validation. Introduction to MERN: MERN components, Server less Hello
world.
React Components: Issue Tracker, React Classes, Composing Components, Passing Data Using
Properties, Passing Data Using Children, Dynamic Composition.

Text Book 2: Chapter 1, 2, 3

Module-4

@#@10012025 1
 Annexure-II 2

React State: Initial State, Async State Initialization, Updating State, Lifting State Up, Event Handling,
Stateless Components, Designing Components, State vs. Props, Component Hierarchy,
Communication, Stateless Components.
Express, REST API, GraphQL, Field Specification, Graph Based, Single Endpoint, Strongly Typed,
Introspection, Libraries, The About API GraphQL Schema File, The List API, List API Integration,
Custom Scalar types, The Create API, Create API Integration, Query Variables, Input Validations,
Displaying Errors.

Text Book 2: Chapter 4, 5

Module-5
MongoDB: Basics, Documents, Collections, Databases, Query Language, Installation, The Mongo Shell,
MongoDB CRUD Operations, Create, Read, Projection, Update, Delete, Aggregate, MongoDB Node.js
Driver, Schema Initialization, Reading from MongoDB, Writing to MongoDB.

Modularization and Webpack ,Back-End Modules Front-End Modules and Webpack Transform and
Bundle, Libraries Bundle ,Hot Module Replacement, Debugging DefinePlugin: Build Configuration,
Production Optimization.

Text Book 2: Chapter 6, 7

PRACTICAL COMPONENT OF IPCC
Sl.NO Experiments
1. a. Write a script that Logs "Hello, World!" to the console. Create a script that calculates the sum of two
numbers and displays the result in an alert box.
b. Create an array of 5 cities and perform the following operations:
Log the total number of cities. Add a new city at the end. Remove the first city. Find and log the index
of a specific city.
2. a. Read a string from the user, Find its length. Extract the word "JavaScript" using substring() or
slice(). Replace one word with another word and log the new string. Write a function
isPalindrome(str) that checks if a given string is a palindrome (reads the same backward).

3. Create an object student with properties: name (string), grade (number), subjects (array),
displayInfo() (method to log the student's details)
Write a script to dynamically add a passed property to the student object, with a value of true or false
based on their grade. Create a loop to log all keys and values of the student object.
4. Create a button in your HTML with the text "Click Me". Add an event listener to log "Button clicked!"
to the console when the button is clicked. Select an image and add a mouseover event listener to
change its border color. Add an event listener to the document that logs the key pressed by the user.
5. Build a React application to track issues. Display a list of issues (use static data). Each issue should
have a title, description, and status (e.g., Open/Closed). Render the list using a functional component.

6. Create a component Counter with A state variable count initialized to 0. Create Buttons to increment
and decrement the count. Simulate fetching initial data for the Counter component using useEffect
(functional component) or componentDidMount (class component). Extend the Counter component
to Double the count value when a button is clicked. Reset the count to 0 using another button.
7. Install Express (npm install express).
Set up a basic server that responds with "Hello, Express!" at the root endpoint (GET /).
Create a REST API. Implement endpoints for a Product resource: GET : Returns a list of products. POST
: Adds a new product. GET /:id: Returns details of a specific product. PUT /:id: Updates an existing
product. DELETE /:id: Deletes a product. Add middleware to log requests to the console. Use
express.json() to parse incoming JSON payloads.

@#@10012025 2
 Annexure-II 3

8. Install the MongoDB driver for Node.js. Create a Node.js script to connect to the shop database.
Implement insert, find, update, and delete operations using the Node.js MongoDB driver. Define a
product schema using Mongoose. Insert data into the products collection using Mongoose. Create an
Express API with a /products endpoint to fetch all products. Use fetch in React to call the /products
endpoint and display the list of products. Add a POST /products endpoint in Express to insert a new
product. Update the Product List, After adding a product, update the list of products displayed in
React.

Course outcome (Course Skill Set)

At the end of the course, the student will be able to :
1. Apply Javascript to build dynamic and interactive Web projects .
2. Implement user interface components for JavaScript-based Web using React.JS
3. Apply Express/Node to build web applications on the server side.
4. Develop data model in an open source nosql database.
5. Demonstrate modularization and packing of the front-end modules .
Assessment Details (both CIE and SEE)
The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%. The
minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of 50) and for the SEE minimum
passing mark is 35% of the maximum marks (18 out of 50 marks). A student shall be deemed to have satisfied
the academic requirements and earned the credits allotted to each subject/ course if the student secures a
minimum of 40% (40 marks out of 100) in the sum total of the CIE (Continuous Internal Evaluation) and SEE
(Semester End Examination) taken together.

Continuous Internal Evaluation:

● For the Assignment component of the CIE, there are 25 marks and for the Internal Assessment Test
component, there are 25 marks.
● The first test will be administered after 40-50% of the syllabus has been covered, and the second test will
be administered after 85-90% of the syllabus has been covered
● Any two assignment methods mentioned in the 22OB2.4, if an assignment is project-based then only one
assignment for the course shall be planned. The teacher should not conduct two assignments at the end of
the semester if two assignments are planned.
● For the course, CIE marks will be based on a scaled-down sum of two tests and other methods of
assessment.
Internal Assessment Test question paper is designed to attain the different levels of Bloom’s taxonomy
as per the outcome defined for the course.

Semester-End Examination:
Theory SEE will be conducted by University as per the scheduled timetable, with common question papers for
the course (duration 03 hours).
1. The question paper will have ten questions. Each question is set for 20 marks.
2. There will be 2 questions from each module. Each of the two questions under a module (with a maximum
of 3 sub-questions), should have a mix of topics under that module.
3. The students have to answer 5 full questions, selecting one full question from each module.
4. Marks scored shall be proportionally reduced to 50 marks.

Suggested Learning Resources:

Books
1. Jon Duckett, "JavaScript & jQuery: Interactive Front-End Web Development", Wiley, 2014.
2. Vasan Subramanian, Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React,
and Node. Apress, 2019.

Web links and Video Lectures (e-Resources):

@#@10012025 3
 Annexure-II 4

● https://github.com/vasansr/pro-mern-stack
● https://nptel.ac.in/courses/106106156
● https://archive.nptel.ac.in/courses/106/105/106105084/

Activity Based Learning (Suggested Activities in Class)/ Practical Based learning

● Course Project: Build Web applications using MERN stack. Students (group of 2) can choose any real-
world problem from domains such as finance, marketing, medical, or enterprise projects (25 marks).

@#@10012025 4