FULL STACK DEVELOPMENT (IC)

Course Code L:T:P:S Credits Exam Marks Exam Duration Course Type
19CSI64 3:0:2:0 04 CIE:50 SEE:50 03 Hours IC

Course Objectives:
This course will enable students to,
 Use HTML, CSS and JavaScript in web page design.
 Access the DOM objects, filters, forms in JavaScript’s query.
 Write programs using Hooks, components and Events in React JS.
 Create basic web applications with Node.js, Express JS.
 Understand with the database connectivity and reactive forms using JavaScript’s

Prerequisite: Basic knowledge of programming and JAVA Programming.

Module – I
JavaScript: Basics: Variables, Operator, DOM, Arrays, Functions, Arrow Functions, Classes,
Objects, Event Handling, Map, Babbel JS, React Introduction, React Installation. Simple React
programs and CSS styling.
08 Hours
Module – II
React JS: Functional Component, Class Component, Event Based Component, Props, States,
setState, Event Handling, Binding Event Handler, Life Cycle Methods, Lists& Keys, Forms and
user inputs, Rendering: Conditional Rendering, List Rendering.
08 Hours

Module – III
Hooks: useState, use Menu, useEffect, Axios Package, useRef, useContext, useReducer,
useCallback useInput, React Router, APIs, Practical React: icons, video player, credit card,
model, chart, count up.
08 Hours
Module – IV
Introduction to Node.js: What is Node.js?, Features of Node.js, Setup Development
Environment- Installing, Node.js, Working with REPL, Node.js Console, Node.js Module, Node
Package Manager Node.js Basics, File System, HTTP and HTTPs, Creating Web Server-
Handling http request, Node.js Callbacks, Node.js Events.
08 Hours
Module – V
Database Connectivity and Reactive Forms: Promises, Express.js, Database Connectivity –
Connecting to RDBMS and NoSQL database, Performing CRUD operations, What is Reactive
Forms, Syncing of HTML and Form, Form Control Arrays, Relative Forms, Value changes and
Reacting to status, Create Reactive form through code, Adding Validation, Adding Validation,
Grouping, Custom Validators.
08Hours
Lab Programs
1. Write a ReactJS Program using useState hook.
2.Write a ReactJs Program to style a web page using CSS.
3.Write a ReactJS Program to fetch details from spotifyAPI.
4.Write a ReactJs Program to implementing routing using react-router-dom package.
5.Write a ReactJS Program to implement digital clock using hook.
6.Write a ReactJs program create login form.
7.Write a ReactJs program create a simple greeting website.

Course Outcomes:
On completion of this course, the students will be able to,
CO1: Develop programs in HTML, JavaScript.
CO2: Design programs using ReactJS components.
CO3: Test and deploy web pages using React Hooks .
CO4: Develop programs in Node JS, Express JS.
CO5: Design programs using React JS with database connectivity.
Text Book:
1) Brad Dayley, “Node.js, MongoDB, and AngularJS Web Development, 2018,
ISBN- 13: 9789352865505.
Reference Book:
1) Adam Freeman, “Pro Angular JS”, A press Publications, 2nd Edition,
2017, ISBN-13: 9781484223062.
2) Learning React Functional Web Development with React and Redux by Alex
Banks, Eve Porcello · 2017