FULL STACK DEVELOPMENT
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.
UNIT - I
Web Development Basics: Web development Basics - HTML & Web servers Shell -
UNIX CLI Version control - Git &Github HTML, CSS-Basic JavaScript Instructions,
Statements, Comments, Variables, Data Types, Arrays, Strings, Functions,
Methods & Objects, Decisions & Loops.
UNIT - II
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.
UNIT - III
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.
UNIT - IV
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.
UNIT -IV
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.
List of 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.
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.
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.
Course outcome
Apply Javascript to build dynamic and interactive Web projects .
Implement user interface components for JavaScript-based Web using
React.JS
Apply Express/Node to build web applications on the server side.
Develop data model in an open source nosql database.
Demonstrate modularization and packing of the front-end modules .
