MC4201 Full Stack Web Development Syllabus:

MC4201 Full Stack Web Development Syllabus – Anna University PG Syllabus Regulation 2021

COURSE OBJECTIVES:

 To understand the fundamentals of web programming and client side scripting.
 To learn server side development using NodeJS.
 To understand API development with Express Framework.
 To understand and architect databases using NoSQL and SQL databases.
 To learn the advanced client side scripting and ReactJS framework

UNIT I INTRODUCTION TO CSS and JAVASCRIPT

Introduction to Web: Server – Client – Communication Protocol (HTTP) – Structure of HTML Documents – Basic Markup tags – Working with Text and Images with CSS– CSS Selectors – CSS Flexbox – JavaScript: Data Types and Variables – Functions – Events – AJAX: GET and POST

UNIT II SERVER SIDE PROGRAMMING WITH NODE JS

Introduction to Web Servers – Javascript in the Desktop with NodeJS – NPM – Serving files with the http module – Introduction to the Express framework – Server-side rendering with Templating Engines – Static Files – async/await – Fetching JSON from Express

UNIT III ADVANCED NODE JS AND DATABASE

Introduction to NoSQL databases – MongoDB system overview – Basic querying with MongoDB shell – Request body parsing in Express – NodeJS MongoDB connection – Adding and retrieving data to MongoDB from NodeJS – Handling SQL databases from NodeJS – Handling Cookies in NodeJS – Handling User Authentication with NodeJS

UNIT IV ADVANCED CLIENT SIDE PROGRAMMING

React JS: React DOM – JSX – Components – Properties – Fetch API – State and Lifecycle – JS Local storage – Events – Lifting State Up – Composition and Inheritance

UNIT V APP IMPLEMENTATION IN CLOUD

Cloud providers Overview – Virtual Private Cloud – Scaling (Horizontal and Vertical) – Virtual Machines, Ethernet and Switches – Docker Container – Kubernetes

TOTAL: 45 PERIODS

SUGGESTED ACTIVITIES:

1. Build an online MCQ quiz app. The questions and options should be fetched based on the chosen topic from a NodeJS server. The questions can be stored in a JSON file in the backend. Once the user has answered the questions, the frontend must send the chosen options to the backend and the backend must identify the right answers and send the score back to the front end. The frontend must display the score in a separate neatly designed page.
2. Build a blog website where you can add blog posts through a simple admin panel and the users can view the blog posts. The contents of the blog posts can be stored in either MongoDB or MySQL database. The home page should contain the titles of the blog post and the full post can be viewed by clicking the title. Frontend can be built either using React or through template engines served by the NodeJS server.
3. Take any ecommerce or social media website/app. Analyze what the API endpoints would have been used for and how the frontend interacts with the backend. The networks tab in the browser’s developer tools can be used if required.
4. Architect an entire database structure for an E-Commerce application for MongoDB. Discuss how the database would have been structured if you were using a SQL database.
5. Build a simple calculator app with React. The user should be able to add numbers and operations to the app by clicking on buttons, just like you would do in a mobile phone. The moment the operation and the two operations are defined, the answer should be displayed

COURSE OUTCOMES:

Upon completion of the course the students should be able to:
CO1: Write client side scripting HTML, CSS and JS.
CO2: Implement and architect the server side of the web application.
CO3: Implement Web Application using NodeJS.
CO4: Architect NoSQL databases with MongoDB.
CO5: Implement a full-stack Single Page Application using React, NodeJS and MongoDB and deploy on Cloud.

REFERENCES

1. David Flanagan, “Java Script: The Definitive Guide”, O’Reilly Media, Inc, 7th Edition, 2020
2. Matt Frisbie, “Professional JavaScript for Web Developers”, Wiley Publishing, Inc, 4th Edition, ISBN: 978-1-119-36656-0, 2019
3. Alex Banks, Eve Porcello, “Learning React”, O’Reilly Media, Inc, 2nd Edition, 2020
4. Marc Wandschneider, “Learning Node”, Addison-Wesley Professional, 2nd Edition, 2016
5. Joe Beda, Kelsey Hightower, Brendan Burns, “Kubernetes: Up and Running”, O’Reilly Media, 1st edition, 2017
6. Paul Zikopoulos, Christopher Bienko, Chris Backer, Chris Konarski, Sai Vennam, “Cloud Without Compromise”, O’Reilly Media, 1st edition, 2021