Full Stack Development using Java Technologies

Course File
TABLE OF CONTENTS

1. Languages to be covered ............................................................................................................... 2

2. Course Outcome ............................................................................................................................ 2
3. Detailed topic wise curriculum........................................................................................................ 3
3.1 HTML5 ............................................................................................................................................. 3
3.2 CSS .................................................................................................................................................. 5
3.3 Javascript ........................................................................................................................................ 7
3.4 Node JS ............................................................................................................................................ 7
3.5 React JS ........................................................................................................................................... 9
3.6 MongoDB ....................................................................................................................................... 10
3.7 GIT................................................................................................................................................. 11
3.8 RESTful API and Authentication ....................................................................................................... 12
 1. LANGUAGES TO BE COVERED

Technology/ Contribution to Full Stack Teaching Hours

Language
HTML5 Structuring the content and layout of web pages. 9 hours

CSS3 Styling and designing responsive, visually appealing web 14 hours

pages.
JavaScript Adding interactivity and dynamic behavior to web 8 hours
applications.
Node.js Backend development, server-side scripting, and API 20 hours
creation.
React Building single-page applications (SPAs) with reusable 19 hours
components.
MongoDB Managing and querying NoSQL databases for scalable 9 hours
applications.

Git Version control, collaboration, and project management. 4 hours

RESTful APIs Designing and integrating APIs for client-server 6 hours

communication.
Authentication Securing applications with login systems and token- 6 hours
(JWT/OAuth) based authentication.

Total course duration 95 hours

2. COURSE OUTCOME

CO1: Build responsive and accessible web pages using HTML5 and CSS3, adhering to modern web standards
and UX/UI best practices followed in the industry.

CO2: Develop dynamic and interactive user interfaces using JavaScript ES6+ and frameworks/libraries
commonly used in industry projects.

CO3: Implement robust server-side applications using Node.js and design scalable back-end architectures to
meet real-world enterprise demands.

CO4: Create and consume RESTful APIs and integrate third-party APIs (e.g., payment gateways, geolocation
services) to build feature-rich applications.

CO5: Develop maintainable and modular single-page applications (SPAs) using React, incorporating state
management tools like Redux or Context API for scalable solutions.

CO6: Design database schemas and optimize queries in MongoDB, ensuring efficient storage and retrieval for
large-scale applications.

CO7: Collaborate on projects using Git, practicing version control and workflows commonly used in tech
teams (e.g., branching, pull requests, and code reviews).
CO8: Gain familiarity with containerization tools like Docker to create, deploy, and run applications
consistently across various environments.

CO9: Explore microservices architecture by dividing applications into smaller, independently deployable
services, enhancing scalability and maintainability.

CO10: Integrate authentication and authorization mechanisms (e.g., JWT, OAuth) into full-stack applications
to meet industry security standards.

3. DETAILED TOPIC WISE CURRICULUM

3.1 HTML5
Session Topic Duration Theory Session Lab Session
1 Introduction to 1 hour Overview of HTML, structure of Practice creating a basic HTML
HTML an HTML document, DOCTYPE, page with a title and a simple
and basic tags (<html>, <head>, structure using <html> and
<body>). <body>.

2 Text Formatting 1.5 Tags for headings (<h1> to Create a webpage with different
and Semantic hours headings, paragraphs, and
<h6>), paragraphs (<p>),
Elements semantic tags, formatting the
emphasis (<b>, <i>, <strong>, content meaningfully.
<em>), and semantic elements
(<header>, <footer>, <section>,
<article>).
3 Links and Lists 1 hour Creating hyperlinks (<a>), Create a webpage with a
internal vs external links, ordered navigation menu using links and
lists for categories.
(<ol>) and unordered (<ul>) lists.
4 Images and 1.5 Adding images (<img>), Add an image gallery to a
Media hours webpage and embed a YouTube
attributes like alt and src,
video using the <iframe> tag.
embedding videos and audio
(<video> and <audio> tags).
5 Tables 1 hour Creating tables (<table>), rows Create a timetable or data table
with proper headers, rows, and
and cells (<tr>, <td>), headers
merged cells using
(<th>), and attributes like colspan/rowspan.
colspan and rowspan.

6 Forms and Input 2 hours Designing forms (<form>), input Design a contact form with name,
Elements email, dropdown for subject, and
types (<input>, <textarea>,
submit/reset buttons.
<select>), labels, and buttons.
Basic form validation.
7 HTML Best 1 hour Writing clean HTML, importance Refactor an existing webpage to
Practices and of accessibility (e.g., alt improve semantic structure and
Accessibility add accessibility features.
 attributes, ARIA roles), and
semantic markup.

Total 9 hours
3.2 CSS
Session Topic Duration Theory Session Lab Session
1 Introduction to 1 hour Overview of CSS, syntax, and Create a simple webpage
CSS applying styles (inline, internal, and style its headings and
and external stylesheets). paragraphs using inline,
internal, and external CSS.
2 Selectors and 1.5 hours Types of selectors (universal, type, Apply different selectors to
Basic Properties class, id, group), color, change colors,
background, and font properties. backgrounds, and fonts of
elements on a sample
webpage.
3 Box Model 1.5 hours Understanding the CSS box model: Create a webpage and style
content, padding, border, and a box to adjust padding,
margin. margins, and borders,
adding shadow effects.
4 Positioning and 2 hours CSS positioning (static, relative, Use flexbox to align items in
Layout absolute, fixed) and layout a header and footer for a
techniques (flexbox basics). sample webpage.
5 Styling Tables and 1.5 hours Styling HTML tables and forms: Style a contact form and a
Forms borders, spacing, hover effects, table for a menu list, adding
and input field designs. hover effects and proper
spacing.
6 Responsive Design 2 hours Introduction to responsive design, Make a sample webpage
Basics media queries, and grid layout responsive for mobile and
basics. tablet views using media
queries.
7 Live Project: Online 1.5 hours Discuss styling requirements: Style the homepage of the
Food Ordering header, navigation menu, hero food ordering system,
System – Home section, and CTA buttons. focusing on a header,
Page navigation, and hero
section.
8 Live Project: Online 1 hour Explore styling for services offered, Create a responsive
Food Ordering cards layout, and hover effects. services section with
System – Services flexbox or grid and apply
Page hover animations to service
cards.
9 Live Project: Online 1 hour Plan the design for testimonials, Style a testimonial section
Food Ordering focusing on typography, layout, with customer quotes in a
System – and background styles. visually appealing format
Testimonials Page using CSS grid.
10 Live Project: Online 1 hour Discuss the styling for a contact Style the contact us page
Food Ordering form and footer, focusing on with a well-aligned form and
System – Contact accessibility and spacing. footer, making it respon
Us Page
Total 14 hours
3.3 JAVASCRIPT
Session Topic Duration Theory Session Lab Session / Live Project

1 Introduction 1 hour Overview of JavaScript, variables (let, Write a script to calculate the sum of
to JavaScript two numbers and display the result
const, var), data types, and basic
in an alert box.
operations.
2 Conditional 1 hour If-else, switch-case, and loops (for, Project 1: Word Guess Game: Build
Statements while, do-while). a simple word guessing game where
and Loops the user guesses a word letter by
letter.
3 Functions 1 hour Defining functions, parameters, return Create a function to calculate the
and Scope values, and understanding scope factorial of a number and display the
(local and global). result in the console.
4 Events and 1.5 JavaScript events (click, hover, input), Project 2: Counter App: Create a
DOM hours and manipulating the DOM using webpage with a counter that
Manipulation document.getElementById, increments, decrements, and resets
on button clicks.
querySelector.

5 Arrays and 1 hour Introduction to arrays and objects, Project 3: Todo List: Build a dynamic
Objects array methods (push, pop, map, filter). todo list where users can add, mark,
and delete tasks.
6 Error 0.5 Try-catch blocks and using browser Debug a sample script with
Handling hours developer tools for debugging intentional errors and handle
and JavaScript code. exceptions gracefully.
Debugging
7 Classes and 1 hour Introduction to ES6 classes, Project 4: Simple Tic-Tac-Toe
Prototypes constructors, and inheritance. Game: Develop a basic tic-tac-toe
game that tracks player turns and
declares a winner.
8 Basic 1 hour Using setInterval, setTimeout, and Project 5: Stopwatch: Create a
Animation basic animations with JavaScript. stopwatch with start, stop, and reset
and Timers functionalities.
Total 8 hours

3.4 NODE JS
Session Topic Duration Theory Session Lab Session / Live Project

1 Introduction to 1 hour Overview of Node.js, installing Set up a basic Node.js project,

Node.js and Node.js, introduction to npm (Node initialize it with npm init, and
Setting Up Package Manager), and setting up a create a simple server.js file that
basic project. responds with "Hello World".
 2 Working with 1.5 Overview of the built-in HTTP Build a simple HTTP server with
HTTP Module and hours module in Node.js, creating an HTTP routes that respond to different
Routing server, and handling routes using paths (e.g., /home, /about,
http.createServer. /contact).
3 Introduction to 1.5 Introduction to Express.js, setting Create an Express app that
Express.js hours up an Express app, handling routes, handles basic GET, POST, and
and middleware. DELETE requests for different
routes like /user and /product.
4 Middleware and 1 hour Introduction to Express middleware, Implement custom middleware for
Error Handling handling errors using next(), and logging requests and handling
creating custom middleware. errors in your Express app.

5 Connecting to a 2 hours Introduction to MongoDB and Set up a MongoDB database locally

Database Mongoose, installing the MongoDB or with MongoDB Atlas, and
(MongoDB) driver, and setting up a connection. connect it to your Node.js
application using Mongoose.
6 CRUD Operations 2 hours Performing CRUD (Create, Read, Create API endpoints for adding,
with MongoDB Update, Delete) operations with retrieving, updating, and deleting
and Mongoose MongoDB and Mongoose. items (e.g., products or users) in a
MongoDB collection.
7 Advanced Express 2 hours Introduction to JWT (JSON Web Implement JWT-based
Features: Tokens) and Passport.js for user authentication for a simple login
Authentication authentication. system, allowing users to register
and log in with a token.

8 Web Request and 1 hour Understanding HTTP request Build API endpoints that handle
Response methods (GET, POST, PUT, DELETE), POST and GET requests,
Handling request parameters, and handling processing query parameters and
responses. request bodies.
9 Connecting 2 hours Sending HTTP requests from the Project 1: Build a simple "To-Do
Frontend frontend (using fetch() or Axios) and List" API using Node.js and
(HTML/JavaScript) handling responses in Node.js. MongoDB, where users can add,
to Backend edit, and delete tasks. Connect
the frontend (HTML/JavaScript) to
the API using AJAX/Fetch.
10 Real-Time 1 hour Introduction to Socket.IO for real- Project 2: Build a simple real-time
Communication time communication (e.g., chat chat application where users can
with Socket.IO application). send messages and receive them
instantly using Socket.IO.
11 Deploying Node.js 1 hour Introduction to deploying Node.js Deploy the "To-Do List" app
Applications apps using platforms like Heroku or (Project 1) to Heroku and test the
Vercel, setting up environment deployed version with a real
variables. database.
12 Web Scraping 1 hour Introduction to Cheerio or Scrape data from a simple website
with Node.js Puppeteer for scraping data from (e.g., news headlines or weather
websites. data) and display it on your web
app.
 13 Asynchronous 1 hour Introduction to asynchronous Refactor a previous project (e.g.,
Programming with programming in Node.js, using To-Do List API) to use async/await
Async/Await Promises and async/await syntax. for database interactions.

14 Testing and 1 hour Introduction to testing frameworks Write tests for one of the previously
Debugging like Jest or Mocha, and debugging developed APIs (e.g., the GET and
Node.js Apps using Node.js Inspector. POST requests) and debug issues
in the code.
15 Final Project and 1 hour Overview and troubleshooting for Project 3: Final capstone project -
Review the projects. Build an online food ordering
system with CRUD operations,
JWT authentication, and database
interaction (MongoDB).
Total 20 hours

3.5 REACT JS
Session Topic Duration Theory Session Lab Session / Live Project

1 Introduction 1 hour Overview of React, creating a basic Set up a basic React app with
to React.js React app using Create React App, Create React App and display a
and Setting JSX syntax, and components. simple "Hello, World!" message on
Up the webpage.
2 Components 1.5 Understanding React components Create a Profile Card component
and Props hours (functional and class), passing data that receives props such as name,
via props, and using multiple age, and bio to display a user profile.
components.
3 State and 2 hours Introduction to state in React, using Project 1: Counter App: Build a
Event useState, handling events (like counter app with increment,
Handling onClick, onChange), and controlled decrement, and reset buttons, using
components. React's state.

4 Conditional 1.5 Rendering elements conditionally Project 2: To-Do List: Build a to-do
Rendering hours using if-else, ternary operators, and list app where tasks can be added,
and Lists rendering lists with map(). marked as done, and deleted using
state and conditional rendering.
5 Handling 1.5 Working with forms in React, Create a User Registration Form
Forms and hours managing form state, and using with controlled inputs, including
Controlled controlled components for input fields like name, email, and
Components handling. password.
6 useEffect and 2 hours Introduction to useEffect for side Project 3: Weather App: Fetch
Data Fetching effects, such as fetching data from weather data from an API using
APIs and updating the DOM. fetch() or Axios and display it in the
app.
 7 Routing with 1.5 Introduction to React Router for Implement navigation between
React Router hours client-side routing, setting up Route, multiple pages in your app using
Link, and BrowserRouter. React Router (e.g., Home, About,
Contact).
8 Context API 1 hour Understanding prop drilling, and how Project 4: Theme Toggle App: Build
and Prop to manage global state using Context a simple app where the theme (dark
Drilling API and useContext. or light mode) is toggled globally
using Context API.
9 Component 1 hour Introduction to lifecycle methods in Build a Class Component with
Lifecycle class components, such as lifecycle methods that fetches data
(Class componentDidMount, when the component is mounted.
Components) componentDidUpdate.
10 Performance 1 hour Introduction to React.memo, Refactor an existing component to
Optimization useMemo, and useCallback to use React.memo for optimization,
and optimize performance in React and test performance
React.memo applications. improvements.
11 Form 1 hour Techniques for validating forms in Enhance the User Registration
Validation React, error handling, and displaying Form to include field validation,
and Error feedback to the user. such as checking if the email is valid
Handling or if the password is strong.
12 Introduction 1.5 Overview of Redux for state Project 5: Shopping Cart: Create a
to Redux hours management, actions, reducers, and shopping cart where the state is
the Redux store. managed by Redux, allowing items
to be added, removed, and updated.
13 Integrating 1 hour Connecting Redux with React using Implement Redux in the Shopping
Redux with Provider, useSelector, and Cart project to manage the cart
React useDispatch to access and modify state, including adding/removing
global state. items and updating quantities.
14 Handling 1 hour Introduction to handling Fetch product data asynchronously
Asynchronous asynchronous actions in Redux using in the Shopping Cart app and
Actions with Redux Thunk middleware. display it using Redux Thunk for
Redux Thunk managing async actions.
15 Final Project 1 hour Review of all the topics covered, Finalize and polish the Weather App
and Review troubleshooting, and debugging or Shopping Cart app, applying all
common issues in React apps. learned techniques (state, props,
effects, Redux).
Total 19 hours

3.6 MONGODB
Session Topic Duration Theory Session Lab Session / Live Project
 1 Introduction 1 hour Overview of MongoDB, NoSQL Set up a MongoDB Atlas account,
to MongoDB databases, and basic concepts create a database, and connect to it
(documents, collections). using MongoDB Compass or a local
Introduction to MongoDB Atlas. setup.
2 CRUD 1.5 Create, Read, Update, and Delete Perform basic CRUD operations in
Operations hours operations in MongoDB. Introduction MongoDB: Insert data, query
in MongoDB to basic queries and the Mongo shell. collections, update documents, and
delete records.
3 Advanced 2 hours Introduction to advanced queries like Practice advanced queries with
Queries and $gt, $lt, $in, and $and. Overview of operators and use the Aggregation
Aggregation the Aggregation Pipeline. Pipeline to filter, group, and
Framework transform data.
4 Data 1 hour Designing schemas in MongoDB: Design and create a data model for a
Modeling embedding vs referencing, data simple application (e.g., a blog or e-
and Schema normalization vs denormalization. commerce site).
Design Best practices.
5 Indexing and 1 hour Overview of indexes in MongoDB, Create indexes for a collection to
Performance their importance, and how they optimize query performance (e.g., for
Optimization optimize query performance. frequently queried fields).
6 Working with 1 hour Introduction to Mongoose: setting up Build a basic Node.js app that
MongoDB in Mongoose with Node.js, defining interacts with MongoDB using
Node.js models, and interacting with Mongoose. Perform CRUD
(Mongoose) MongoDB. operations with the app.
7 Data 0.5 Introduction to data validation in Implement schema validation in
Validation hours MongoDB using schema validation Mongoose, adding validation rules
and Security and securing database access. for fields like email or price.
in MongoDB
8 MongoDB 1 hour Advanced features of the Aggregation Use the $lookup operator to join
Aggregation Framework, including $lookup, collections and perform complex
Framework $unwind, and other operators. aggregation queries, such as joining
Advanced orders with customers.
Use
Total 9 hours

3.7 GIT
Session Topic Duration Theory Session Lab Session / Live Project

1 Introduction 1 hour Overview of Git and version control Set up a Git repository locally, make
to Git and systems. Understanding repositories, your first commit, and understand
Version commits, and branches. Setting up the structure of a Git repo.
Control Git.
 2 Git Workflow: 1 hour Explanation of git add, git commit, git Practice staging and committing
Staging, push, and the staging area. Best changes, pushing to a remote
Committing, practices for committing code. repository (e.g., GitHub), and pulling
and Pushing updates.
3 Branching 1 hour Introduction to branches in Git, Create branches for new features,
and Merging creating and switching branches, merge branches, and resolve simple
in Git merging branches, and handling merge conflicts.
merge conflicts.
4 Collaborating 1 hour Working with remote repositories, Clone a repository from GitHub,
with Git and using GitHub for collaboration, make changes, create a branch,
Using GitHub creating pull requests, and reviewing push it, and create a pull request for
code. review.

3.8 RESTFUL API AND AUTHENTICATION

Session Topic Duration Theory Session Lab Session / Live Project
1 Introduction 1 hour Overview of REST principles, HTTP Set up a basic Node.js project and
to RESTful methods (GET, POST, PUT, DELETE), implement a simple GET endpoint
APIs and the architecture of RESTful APIs. that returns data from an array.
2 CRUD 1.5 Detailed explanation of CRUD Implement POST, PUT, and DELETE
Operations hours operations in REST (Create, Read, operations in the Node.js app to
with RESTful Update, Delete), status codes, and manage a list of users or tasks.
APIs best practices.
3 Express.js and 1.5 Introduction to Express.js, routing, Set up Express.js in a Node.js app,
Middleware hours and middleware functions. Setting up create routes for CRUD operations,
routes and handling HTTP requests. and use middleware to log requests.
4 Connecting to 1.5 Understanding how to connect and Build a simple app with Express.js
MongoDB hours interact with MongoDB from a and MongoDB, implementing CRUD
from a RESTful RESTful API using Mongoose for data operations for storing data in
API storage. MongoDB.
5 Authentication 1 hour Introduction to authentication, Implement a basic authentication
Concepts understanding JWT (JSON Web system using JWT in a Node.js app,
(JWT and Tokens), sessions, and cookies. allowing users to log in and receive
Sessions) tokens.
6 Implementing 1.5 Explanation of creating a user Build a registration and login
User hours registration system and handling system using JWT for authentication
Registration login functionality with JWT or in the Express.js app.
and Login sessions.
7 Securing API 1 hour Techniques for securing API Implement middleware in the
Endpoints endpoints using JWT authentication Node.js app to protect routes,
with and middleware to protect routes. ensuring only authenticated users
Authentication can access them.
8 Refresh 1 hour Understanding token expiry and Implement refresh tokens to extend
Tokens and implementing refresh tokens to the validity of a JWT token in the app.
Token Expiry extend the validity of a session.
 9 Role-Based 1 hour Introduction to RBAC for controlling Implement role-based access
Access user access to specific routes and control (RBAC) to restrict certain
Control resources based on roles. endpoints based on the user's role
(RBAC) (admin, user).
10 OAuth 2.0 1 hour Overview of OAuth 2.0 for third-party Implement Google OAuth
Authentication authentication (Google, Facebook, authentication in the app to allow
GitHub). Explanation of flows and users to log in using their Google
tokens. account.
11 Error Handling 0.5 Understanding best practices for Implement error handling in the
and Best hours error handling in RESTful APIs, proper Node.js app, returning appropriate
Practices in HTTP status codes, and response status codes and messages for
APIs structure. different errors.
12 Final Project: 1 hour Review of all concepts, combining Final project: Build a simple task
Building a Full RESTful API development with manager app with user registration,
RESTful API authentication and secure login, JWT authentication, and CRUD
with endpoints. functionality.
Authentication