Department of Information Science and Engineering

Acharya Institute of Technology

Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

Subject and Subject code: Full Stack Development Subject Code: BIS601
Semester and Section: 6th and A and B
Faculty Name: Dr. Pankaj Kumar, Assistant Professor
Module 1
1. Define JavaScript. How is it different from Java?
2. Explain the difference between var, let, and const in JavaScript with examples.
3. Discuss different data types in JavaScript? List and explain any four.
4. How do you create an array in JavaScript? Demonstrate with an example.
5. Differentiate between for loop and while loop in JavaScript.
6. Write a JavaScript function to find the factorial of a given number.
7. Explain how JavaScript objects are created. Illustrate with an example using object
properties and methods.
8. Describe the different types of string methods available in JavaScript with examples.
9. Explain if-else and switch-case statements in JavaScript with examples.
10. Write a JavaScript program to find the largest number in an array using a loop.
11. 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.
12. 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.
13. 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.
14. Write a function isPalindrome(str) that checks if a given string is a palindrome (reads the
same backward).
15. Write a JavaScript program to declare variables of different data types (string, number,
boolean, array, and object) and display their values using console.log()
16. Write a JavaScript program to create an array of five numbers. Find and print the largest
and smallest numbers from the array.
17. Write a JavaScript function that takes a string as input and:
• Converts it to uppercase
• Reverses the string
• Counts the number of vowels in the string

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

18. Write a JavaScript function to generate and print the first n Fibonacci numbers using a
loop. The function should take n as input.
19. Write a JavaScript function that takes an array of numbers as input and returns the sum
of all elements.

Module 2
1. Discuss the Document Object Model (DOM) in JavaScript? Explain its significance.
2. Differentiate between getElementById(), getElementsByClassName(), and
querySelector() with examples.
3. How can you change the text content of an HTML element using JavaScript? Write a
code snippet.
4. What are the different types of DOM nodes? Explain with examples.
5. Discuss event delegation in JavaScript. Why is it useful? Explain different ways to select
elements in the DOM. Provide examples using JavaScript.
6. Describe how to add, remove, and modify attributes of an element using JavaScript.
7. Explain different type of event listeners in JavaScript? Write a program that listens for a
button click event and changes the background color of a div.
8. Discuss different types of JavaScript events with examples.
9. Write a JavaScript program that dynamically adds a list of items to an HTML page and
attaches a click event to each item using event delegation.
10. 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.
11. 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 sliding three different images.
12. Write a JavaScript program to select a <p> element with id="demo" and change its text
content to "Hello, VTU Students!" when a button is clicked.
13. Write a JavaScript function that changes the src attribute of an <img> element when a

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

button is clicked.
14. Create a JavaScript program that adds a new <li> item to an existing <ul> list when a
button is clicked. Also, provide a button to remove the last item from the list.
15. Write a JavaScript program that listens for a double-click event on a <div> element and
changes its background color to yellow.
16. Create a JavaScript program where clicking on any list item inside a <ul> dynamically
changes its text color, without adding event listeners to each item individually.
17. Write a JavaScript program that changes the text color of a <p> element when the mouse
hovers over it and restores the original color when the mouse moves away.
18. Create a simple form with a text input and a submit button. Write a JavaScript function
that prevents form submission if the input field is empty and displays an error message.
19. Create a textarea where users can type text. Implement a JavaScript function that displays
the remaining characters (limit: 100) below the textarea.

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

Subject and Subject code: Full Stack Development Subject Code: BIS601
Semester and Section: 6th and A and B
Faculty Name: Dr. Pankaj Kumar,
Assistant Professor

Module 3
1. Explain the need for form enhancement and validation in web development.
2. What are the common techniques used for form validation in React?
3. Create a form validation page in React to validate Username and Password fields with
appropriate alert messages.
4. Discuss the architecture of the MERN Stack in detail.
5. List and explain the components of the MERN stack.
6. What is data passing using Properties (Props)? Demonstrate with a code example.
7. Differentiate between passing data using Props vs Children in React.
8. What is Serverless Hello World in the context of MERN? Illustrate with a simple example.
9. Define a React Component. Discuss the different ways to create components?
10. Explain an Issue Tracker? How can it be built using React components?
11. 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.
12. Write a React program to pass an array of books as props to a child component and render
them dynamically
13. Differentiate between React Class Components and Functional Components.
14. Explain the concept of Passing Data Using Properties (Props) in React with an example.
15. Discuss the Dynamic Composition in React? Why is it important?
16. How does Passing Data Using Children differ from passing via properties in React?
17. Write a React component to create a simple form with validation for "Name" and "Email".
18. Develop a Node.js server (serverless style) that simply responds with "Hello World" at
root/.
19. Create a simple MERN stack setup where Express returns a list of dummy users to React.
20. Create a React class component called Counter that displays a number and two buttons to

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

increment and decrement it.

21. Write a program to demonstrate Passing Props from a parent component to a child
component.
22. Create a Dynamic Composition in React where a Dashboard component dynamically
composes multiple widgets passed as children.
23. Implement a small Issue Tracker app using React with the ability to add and list issues.
24. Create a Product Form in React with basic validations: "Product Name" should not be
empty, "Price" should be positive.
25. Write code for a React app where a parent component passes a function as a prop to a child
component.
26. Modify the above Issue Tracker to include dynamic addition of issues using state & props.

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

Subject and Subject code: Full Stack Development Subject Code: BIS601
Semester and Section: 6th and A and B
Faculty Name: Dr. Pankaj Kumar,
Assistant Professor

Module 4
1. Discuss initial state in React. How is it declared in a functional component?
2. Explain the difference between state and props in React?
3. Explain lifting state up with an example.
4. Discuss stateless components in React? Give an example.
5. What is the purpose of event handling in React?
6. Differentiate between stateful and stateless components.
7. Explain component hierarchy with a diagram for a simple Todo App.
8. Explain async state initialization in React?
9. Discuss REST API and its main principles.
10. Explain GraphQL and how does it differ from REST?
11. Describe the steps to update state in a functional component. Provide a code snippet.
12. Illustrate how components communicate with each other in React (Parent → Child and vice
versa).
13. With examples, explain the design process of reusable components in React.
14. Write a short note on the Component Hierarchy and its importance in large applications.
15. Explain the concept of Single Endpoint in GraphQL. How does it benefit performance?
16. Describe the structure and purpose of the GraphQL Schema File.
17. Discuss Introspection in GraphQL and why is it useful?
18. Explain Custom Scalar Types in GraphQL with an example.
19. Compare Field Specification in GraphQL with resource representation in REST.
20. Explain the concept of Input Validations in GraphQL and how errors are displayed.
21. React Programming:
Design a Counter component using functional React:
• Initializes state to 0
• Has buttons to increment and decrement

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

• Lifts state up to a parent component that logs changes

22. React State Design:
Create a simple Registration Form using React with fields: name, email, and password. Add
validation to check:
• All fields are filled
• Email is valid
• Password has more than 6 characters
Show error messages below inputs.
23. Write an Express.js REST API with the following endpoints:
• GET /products: Returns all products
• POST /products: Adds a new product with fields name and price
• PUT /products/:id: Updates a product
• DELETE /products/:id: Deletes a product
24. Interpret a GraphQL schema for a Book resource with fields: id, title, author, publishedYear.
• Implement listBooks and addBook operations.
• Use GraphQL Query and Mutation.
• Demonstrate how to pass query variables and handle validation errors.
25. Develop a simple React front end that:
• Fetches product list using a GraphQL List API
• Submits a form to Create API
• Displays errors if validation fails
• Uses Apollo Client for GraphQL
26. 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.

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

Subject and Subject code: Full Stack Development Subject Code: BIS601
Semester and Section: 6th and A and B
Faculty Name: Dr. Pankaj Kumar,
Assistant Professor

Module 5
1. Define MongoDB. What is a document and collection in MongoDB?
2. Explain the purpose of the Mongo shell?
3. List the basic CRUD operations supported by MongoDB.
4. Discuss Aggregation in MongoDB with an example of each.
5. Discuss Webpack and how it will be implemented in NodeJS?
6. Explain the difference between MongoDB collections and databases.
7. Describe the purpose of the MongoDB Query Language with examples.
8. Differentiate between Read and Projection operations in MongoDB?
9. Explain Frontend vs Backend modules with examples.
10. Explain the role of Loaders and Plugins in Webpack.
11. Write a query using MongoDB shell to:
• Insert a document into a students collection
• Read students with marks above 80
12. Create a simple Node.js script using MongoDB Node.js driver to:
• Connect to a database shop
• Insert a product document into a products collection
13. Use Webpack to bundle a React application with Babel loader.
Provide the webpack.config.js.
14. Write code to perform Update and Delete operations in MongoDB using Node.js.
15. Demonstrate how DefinePlugin is used to manage build configurations.
16. Analyze how aggregation pipelines can be used to compute total sales per product.
17. Compare traditional JS module bundling vs. Webpack’s modern bundling.
18. Differentiate between production optimization techniques in Webpack.
19. Examine how schema initialization in Mongoose differs from raw MongoDB usage.
20. Identify the impact of Hot Module Replacement (HMR) during development.

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222
 Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAAC)
Acharya Dr. Sarvepalli Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: hod-ise@acharya.ac.in

21. Evaluate the pros and cons of using Mongoose versus raw MongoDB driver in Node.js.
22. Justify the use of Webpack in large-scale front-end projects. What challenges does it solve?

23. Assess the performance improvement offered by Tree Shaking and Code Splitting in
Webpack.
24. Determine the best MongoDB query strategy for a large dataset filtering by multiple fields.
25. Build a full-stack application that:
Uses Express + MongoDB to implement REST endpoints:
• POST /books → Add book with title, author, year
• GET /books → List all books
• PUT /books/:id → Update book info
• DELETE /books/:id → Remove a book
• Uses Mongoose schema initialization
• Implements Webpack to bundle a front-end that calls these APIs and displays results

26. 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.

Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 2372 2222