Full Stack Development

Introduction to NoSQL-Features of MongoDB and creation/handling of MongoDB

databases, Introduction to Node.js , Setup Development Environment , MVC Architecture,
Introduction to ReactJS – Basics in React JS, state and props, Components, Lifecycle
methods in ReactJS.

1
TABLE OF
CONTENTS
Who We Are
What is Full Stack
MVC Architecture
React Js
Live Session - Frontend
Backend + Database
Live Session - Backend
Bonus Slide
Q/A Session
2
WHO WE ARE
PRODUCT
OVERVIE
W

Vijay Pradeep Medida Hussain Mohammed

Email- [email protected] Email- [email protected]

linkedin.com/in/vijaypradeepmedida/ linkedin.com/in/mehdi-hussain-mohammed-88942886/

3
What is Full Stack
Development ?
Full-stack development refers to the process of building both the front-end
(client-side) and back-end (server-side) parts of a web application. A
full-stack developer is proficient in handling everything from the user
interface (UI) to the server logic, databases, and API integrations.

● Front-end: Involves the design and development of the part of the

application that users interact with directly (e.g., HTML, CSS,
JavaScript, React).

● Back-end: Involves the server-side, database management, and

business logic of the application (e.g., Node.js, Express, MongoDB).

4
5
6
MVC Model Overview

● Model:

○ Manages application data and business logic.

○ Directly interacts with the database or data source.

○ Example: Product data, user information.

● View:

○ Represents the user interface (UI).

○ Displays data to the user and provides an interface for

interaction.

○ Example: Web pages, forms, buttons.

● Controller:

○ Intermediary between Model and View.

○ Handles user input, updates the model, and refreshes the

view.

○ Example: Processing user requests, updating the UI.

7
Front-end (React Js)

8
What is React JS ?
• A popular JavaScript library for building user interfaces,
mainly for single-page applications (SPAs).

• Developed by Facebook (now Meta)

• Open source library

• Focus on UI

• Popular for building Web & Mobile Apps (React Native)

9
 ● Component-Based Architecture – Reusable UI
components.

Key Features ● Virtual DOM – Fast updates without page reloads.

● Declarative UI – Automatically updates based on data.
of React ● Unidirectional Data Flow – Predictable and easy to
debug.
● Strong Community Support – Extensive resources and
libraries.

10
Setting up React Js application
● Prerequisites:
○ Install Node.js
○ Install npm / Yarn
○ Basic JavaScript knowledge (ES6+ Concepts)
○ Code editor (VS Code)

● Installation Methods:
○ Using Create React App:
■ npx create-react-app my-app
■ cd my-app
■ npm start

11
 • my-app

Folder • node_modules – Installed dependencies

Structure
• public – Static assets
• src – Main codebase (App.js,
index.js,styles.css)

• package.json – Project metadata

12
 Components

What are Components?

• Independent and Reusable piece of code
Application has majorly divided into 5 components -
➢ Root(App)
➢ Header
➢ Side Nav
➢ Main Content
➢ Footer

13
14
Component ● Functional Components (Stateless)

Types ● Class Components (Stateful)

15
 Functional Components Class Components

Key Features Key Features

● Simpler ● Can manage state and lifecycle methods
(componentDidMount, componentDidUpdate,
● Better performance
etc.).
● Supports Hooks (Introduced on React 16.8 V, ● Required before React Hooks were introduced
useState, useEffect, etc.). in React 16.8.
● Easier to test & maintain ● More verbose compared to functional
components. 16
 Why Prefer Functional Components?
Feature Functional Components Class Components

Simplicity Simple, just a function More complex, requires render()

Slightly slower due to lifecycle

Performance Faster (less boilerplate)
methods

Hooks Support Yes (useState, useEffect, etc.) No (must use lifecycle methods)

More code for the same

Code Maintainability Easier to read and debug
functionality

Modern Best Practice? ✅ Yes ❌ No (legacy approach)

Since React 16.8, functional components with Hooks have become the standard way to build React
applications
17
 Props and State in React

Props: Immutable, Read-only, passed from parent to child.

State: Mutable, dynamic data within components.

18
Props in React
Props is Read-only properties passed from parent to child.

Why Use Props?

• Reusability
• Dynamic UI
• Parent-to-Child Communication

Key Rules for Props

• Props are read-only
• Props can be any data type
• Props should be passed from parent to child only

19
 State in React
What is State?
Mutable data that affects component behavior.

Functional Components Class Components

20
When to Use the State?
• When data changes dynamically within a component.

• When a component needs to remember past interactions.

• When UI elements depend on data.

21
Lifecycle methods

Three Phases of React Lifecycle:

● Mounting (Component Creation)

● Updating (State/Props Changes)

● Unmounting (Component Removal)

22
➢ Mounting (Component is created)

● constructor()

● static getDerivedStateFromProps(props, state)

● render()

● componentDidMount()

23
➢ Updating (Component re-renders due to state/props
change)

● static getDerivedStateFromProps(props, state)

● shouldComponentUpdate(nextProps, nextState)

● render()

● getSnapshotBeforeUpdate(prevProps, prevState)

● componentDidUpdate(prevProps, prevState, snapshot)

24
➢ Unmounting (Component is removed)

● componentWillUnmount()

Key Lifecycle Methods:

● componentDidMount()

● componentDidUpdate()

● componentWillUnmount()

25
26
React Hooks(useEffect)

Hooks replace class lifecycle methods:

● useEffect(() => { /* code */ }, [ ]); // componentDidMount

● useEffect(() => {/* code */}, [dependency]); // componentDidUpdate

● useEffect(() => {

/* code */

return () => cleanup(); // componentWillUnmount

}, []);
27
“Hands-On” with React

28
“Your Questions,
Our Answers”

29
Break Time

10 Minutes
Backend!!!
31
Backend: The backend is the part of a web application that runs on the server, responsible for
managing data, handling logic, and ensuring everything works behind the scenes. It interacts with
databases, processes requests from the frontend (the part users interact with), and sends responses back
to the frontend.

In simpler terms, the backend is like the engine of a car that makes everything run smoothly, but you don't
directly see it while using the car.

REST APIs: REST (Representational State Transfer) is an architectural style for designing web
services. A REST API is a way for different software systems to communicate with each other over the
internet using HTTP methods like GET, POST, PUT, and DELETE. It allows clients (like your web
browser or mobile app) to interact with the backend by sending requests and receiving responses,
usually in a format like JSON.

Think of a REST API like a waiter at a restaurant who takes your order (request), brings you your food
(response), and allows you to interact with the kitchen (backend).

32
Express JS

Node Js

33
 Setup and Installations

Commands:
● npm init
● npm i express
● npm i mongoose
● npm i nodemon
● npm i cors
34
What is Express.js?
Express.js is a fast, minimal web framework for Node.js, designed to simplify back-end development. It offers flexibility in
application structure, enabling quick development of RESTful APIs. With its efficient routing, middleware integration, and
support for dynamic content rendering, Express allows developers to build scalable, high-performance applications with ease.

● Core Features of Express:

○ Routing:
■ Simplifies the definition of routes (endpoints) for handling requests like GET, POST, PUT, DELETE.
○ Middleware:
■ Middleware functions are used to handle requests, responses, and perform operations like authentication,
logging, and validation.
○ Error Handling:
■ Built-in mechanisms to manage errors and pass them through middleware.
○ Simplifies API Development:
■ Express helps create RESTful APIs that serve data to the front-end.

35
What is Node.js?
● Node.js is an open-source runtime environment that allows JavaScript to be executed on the server-side. It offers
high performance and efficiency.
● In the MERN stack, Node.js serves as the back-end environment, enabling seamless communication between the
front-end (React) and the database (MongoDB). With its extensive ecosystem of libraries through npm, Node.js
accelerates development and enhances scalability for web applications.

● Key Features of Node.js:

○ Asynchronous and Non-Blocking:
■ Node.js works like a multitasker. It can do many things at once without waiting for each task to finish, making
it fast and efficient, especially for handling lots of users at the same time.
○ Single-Threaded:
■ Node.js uses just one main worker to manage everything, but it does so efficiently, so it doesn’t need a lot of
resources to handle many requests at once.
○ NPM (Node Package Manager):
■ A powerful package manager for installing and managing libraries, which accelerates development.
○ Scalable:
■ Suitable for handling a large number of concurrent requests and I/O operations.

36
What is MongoDB?
● MongoDB is a NoSQL database that stores data in a flexible, JSON-like format called
BSON (Binary JSON). Unlike traditional relational databases, MongoDB allows for the
storage of unstructured and semi-structured data, making it highly scalable and
flexible.

● DB (Database): A container for collections, where data is stored in MongoDB.

● Document: A record in MongoDB, similar to a row in a relational database, stored as a set of key-value pairs.

● JSON (JavaScript Object Notation): A lightweight data format used to exchange data, similar to MongoDB’s BSON
format.

● Field: A key-value pair within a document, where the key is the field name and the value is the associated data.

● Cluster: A cluster in MongoDB is like a group of computers working together to store and manage your data. This helps
keep everything running smoothly even when there's a lot of data or traffic, making sure the system doesn't crash.

● Mongoose: Mongoose is a package that makes it easier to interact with MongoDB from your Node.js applications. It
helps organize your data and makes it simpler to perform tasks like saving, updating, and retrieving information from the
database.

37
SQL vs NoSQL

38
Live Session

39
BONUS SLIDE 🎉

POSTMAN

40
Postman is a popular tool used by developers to test and interact with APIs (Application
Programming Interfaces). With Postman, you can organize requests and manage API environments,
making it a valuable tool for both development and testing of apis.

● API Testing Made Easy: Postman allows you to test APIs without writing any code. You can quickly send HTTP requests
(GET, POST, PUT, DELETE) and see the responses.

● User-Friendly Interface: It has an easy-to-use graphical interface, making it beginner-friendly for students who are new
to API development and testing.

● Request Customization: You can customize headers, parameters, and request bodies to simulate real-world API calls.

● Collections: You can organize your API requests into collections, which helps keep your work neat and easy to access.

● Environment Management: Postman lets you create different environments (like development, testing, or production) so
you can easily switch between configurations.

● Collaboration: Students can share Postman collections with teammates, making group work and collaboration easier.

● Learning and Debugging: It helps students understand how APIs work and is a great tool for debugging and
troubleshooting API issues.

41
 Any
Questions?

42
 What we covered ?

!fullStackDeveloper fullStackDeveloper

What is Full stack Rest APIs Express + Node

React Js Mongodb

43
WHO WE ARE

44
 Sources
React doc: https://react.dev/
Youtube: https://youtu.be/SqcY0GlETPk?si=i4YA3gD9VsQ-GMzz

Express doc: https://expressjs.com/

Node Js download: https://nodejs.org/en
Node Js doc: https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
MongoDB doc: https://www.mongodb.com/docs/manual/tutorial/getting-started/
VSCode : https://www.mongodb.com/docs/manual/tutorial/getting-started/

Youtube: https://www.youtube.com/watch?v=_7UQPve99r4

45
Let’s assess
what we
have
LEARNED
46
1.What is the primary purpose of ReactJS?
a) To style HTML elements.
b) To manage server-side routing.
c) To build dynamic user interfaces.
d) To handle database interactions.

47
1.What is the primary purpose of ReactJS?
a) To style HTML elements.
b) To manage server-side routing.
c) To build dynamic user interfaces.
d) To handle database interactions.

48
2.Which of the following is a key feature
of React?
a) Two-way data binding.
b) Direct manipulation of the DOM.
c) Component-based architecture.
d) Server-side rendering only.

49
2.Which of the following is a key feature
of React?
a) Two-way data binding.
b) Direct manipulation of the DOM.
c) Component-based architecture.
d) Server-side rendering only.

50
3.What are "props" primarily used for in
React?
a) To manage data within a component.
b) To pass data from a parent component to a child component.
c) To style individual components.
d) To define the structure of a component.

51
3.What are "props" primarily used for in
React?
a) To manage data within a component.
b) To pass data from a parent component to a child component.
c) To style individual components.
d) To define the structure of a component.

52
4.How do you typically update the state
of a class component?
a) By using the this.setState() method.
b) By calling the updateState() method.
c) By directly assigning a new value to this.state.
d) By emitting an event to trigger a state change.

53
4.How do you typically update the state
of a class component?
a) By using the this.setState() method.
b) By calling the updateState() method.
c) By directly assigning a new value to this.state.
d) By emitting an event to trigger a state change.

54
5.What is the fundamental building block
of a React application?
a) HTML tags.
b) Components.
c) JavaScript functions.
d) CSS selectors.

55
5.What is the fundamental building block
of a React application?
a) HTML tags.
b) Components.
c) JavaScript functions.
d) CSS selectors.

56
6.Before the introduction of hooks, which
type of component was primarily used for
managing state and lifecycle methods?
a) Functional components.
b) Class components.
c) Pure components.
d) Higher-order components.

57
6.Before the introduction of hooks, which
type of component was primarily used for
managing state and lifecycle methods?
a) Functional components.
b) Class components.
c) Pure components.
d) Higher-order components.

58
7.In which lifecycle method should you
typically perform cleanup actions, such
as clearing timers or canceling network
requests?
a) componentDidUpdate()
b) render()
c) componentDidMount()
d) componentWillUnmount()

59
7.In which lifecycle method should you
typically perform cleanup actions, such
as clearing timers or canceling network
requests?
a) componentDidUpdate()
b) render()
c) componentDidMount()
d) componentWillUnmount()

60
8.How can you make useEffect run only
once after the initial render, similar to
componentDidMount?
a) By not providing any arguments to useEffect.
b) By providing a dependency array with all the props and state
variables.
c) By providing an empty dependency array [] as the second argument.
d) By using a conditional statement inside the useEffect callback.

61
8.How can you make useEffect run only
once after the initial render, similar to
componentDidMount?
a) By not providing any arguments to useEffect.
b) By providing a dependency array with all the props and state
variables.
c) By providing an empty dependency array [] as the second argument.
d) By using a conditional statement inside the useEffect callback.

62
9.Imagine a light switch. It can be either "on" or
"off," and when you flip it, its state changes. In a
React component, what is the data that can change
and affect what's displayed on the screen called?

a) Props
b) Events
c) Styles
d) State

63
9.Imagine a light switch. It can be either "on" or
"off," and when you flip it, its state changes. In a
React component, what is the data that can change
and affect what's displayed on the screen called?

a) Props
b) Events
c) Styles
d) State

64
10.Code Question:
Consider the following simple functional React component:

a) Hello, User!
b) Greetings!, User!
c) Hello, Greetings!!
d) The component will not render due
to an error.

65
10.Code Question:
Consider the following simple functional React component:

a) Hello, User!
b) Greetings!, User!
c) Hello, Greetings!!
d) The component will not render due
to an error.

66