ANNEXURE - 01

TITLE : “FULL STACK WEB DEVELOPMENT”

STUDENT NAME

DISHANTH PATEL
[U01BH21S0052]

GUIDE NAME
Mr. Pavithrakumar L
Asst.Prof Dept of BCA

ACADEMIC YEAR 2024

SBRR MAHAJANA FIRST GRADE COLLEGE

(AUTONOMOUS)

JAYALAKSHMIPURAM
MYSORE – 570012
KARNATAKA
S. No. CONTENTS PAGE No.

1. About The Company 3

2. Services And Partners 4
3. Objective 5
4. Introduction to Full Stack Web 6
Development
5. React 7-12
6. Conclusion 13

2
ABOUT THE COMPANY (SCONTINENT TECHNOLOGIES)

Scontinent Technologies extends an invitation for collaboration with esteemed

universities and educational institutions to establish a Memorandum of
Understanding (MoU) aimed at enhancing the employability skills and fostering
career opportunities for students. The proposed collaboration is designed to be
mutually beneficial, requiring only the valuable time and support of the
university. The outlined advantages of the MoU are poised to benefit students
across all affiliated colleges without any financial obligations on the part of the
university.

Sconti aspires to be the go-to platform that empowers students to discover,

develop, and apply their talents while providing educational institutions and
companies with unparalleled access to a diverse pool of skilled individuals.
A thriving ecosystem where educational institutions, students, and companies
collaborate effortlessly, fostering a culture of continuous learning and
innovation.

Internships, Learning, Earnings – Transforming your virtual college journey.

Sconti creates an intra-institute, inter-institutes, interdisciplinary network of
students and professionals. We provide a unique and first-of-its-kind socio-
educational platform for students and professionals for meaningful engagement
and collaboration.

3
SERVICES AND PARTNERS

Scontinent Technologies is responsible for providing solutions and services

related to software such as cyber security network, web development, mobile
app development and artificial intelligence.

• INTERNSHIPS: They provides internship in field of Computer Science,

Commerce, IoT, Arts, Bio-Tech and others.
• UPSKILLS: They provide courses related to technology and
programming, science and engineering, business and finance etc.
• SKILL QUEST: They conduct quizzes, mock-test,coding competitions
and hackathons.
• RESUME AI: Scontinent technologies has their own resume building AI
to create resume easily.

PARTNERS

4
OBJECTIVE

• Apply basic design principles to present ideas, information, products, and

services on websites
• Apply basic programming principles to the construction of websites
• Effectively manage website projects using available resources
• Demonstrate communication skills, service management skills, and
presentation skills
• Complete job preparation tasks including writing resumes and cover
letters, conducting job interviews and developing an ePortfolio
• Apply employability skills including fundamental skills, personal
management skills, and teamwork skills
• Develop front end website architecture
• Design user interactions on web pages
• Develop back end website applications
• Create servers and databases for functionality
• Develop adaptive content for multiple devices (cell phone, tablets,
etc.)Ensure cross-platform optimization for mobile phones
• Ensure responsiveness of applications
• Work alongside graphic designers for web design features
• Manage a project from conception to finished product
• Design and develop Application Programming Interfaces (APIs)
• Meet both technical and consumer needs for a web development project
• Learn to research new methods of development in web applications and
programming languages

5
INTRODUCTION TO FULL STACK WEB DEVELOPMENT

MERN Stack: Your Guide to Full-Stack Web Development with JavaScript

The MERN stack is a popular choice for building modern web applications. It's a
full-stack development approach, meaning it equips you with the tools to handle
both the front-end (user interface) and back-end (server-side logic) of your web
app. Here's a breakdown of the technologies that make up MERN:

M - MongoDB: This is a NoSQL document-oriented database that stores data in

JSON-like documents, making it flexible and easy to work with JavaScript.

E - Express.js: This is a lightweight web framework built on top of Node.js that

simplifies building web applications and APIs. It provides structure and tools for
handling server-side logic like routing and middleware.

R - React.js: This is a powerful JavaScript library for building dynamic user

interfaces. React uses a component-based approach that makes building complex
and interactive UIs efficient.

N - Node.js: This is an open-source JavaScript runtime environment that allows

you to run JavaScript code outside of a web browser. This enables developers to
use JavaScript for both front-end and back-end development in a MERN stack
application.

Why MERN Stack?

There are several advantages to using MERN for web development:

• JavaScript-centric: If you're already familiar with JavaScript, MERN

allows you to leverage your existing skills across the entire development
stack.

• Flexibility and Scalability: MERN components are known for their

flexibility and ability to handle complex applications.

6
REACT

React JS, also known as React or React.js, is a popular open-source JavaScript

library for building user interfaces. It was developed by Facebook and is widely
used for creating dynamic and interactive web applications. React JS follows the
component-based architecture, allowing developers to build reusable UI
components that can efficiently update and render when data changes.
Key Concepts of React JS:
Component-Based Architecture: React JS promotes the concept of reusable and
modular components, which encapsulate their own logic and presentation. This
approach makes it easier to manage and maintain complex UI structures.
Virtual DOM (Document Object Model): React JS uses a virtual representation of
the DOM, which is a lightweight in-memory copy of the actual DOM. By
comparing and updating only the necessary changes, React optimizes rendering
performance and improves the overall efficiency of the application.
JSX (JavaScript XML): JSX is a syntax extension used in React to write HTML-
like code within JavaScript. It allows developers to combine JavaScript and
HTML into a single file, making it easier to understand and visualize the structure
of components.

7
React installation or to create application, we require to learn npm and its
commands.
What is NPM?
NPM stands for Node Package Manager npm is the package manager for the Node
JavaScript platform. It puts modules in place so that node can find them, and
manages dependency conflicts intelligently. Most commonly, it is used to publish,
discover, install, and develop node programs
Before using NPM commands we have to install, node.
To get Download, nodejs from official website: https://nodejs.org/en/download/
Nodejs is supported all major OS, like Windows, Mac or Linux. nede
Once nodejs is installed in you OS. Verify the version of node js and npm.
> node -V

> npm –v
To create an React Application we use npm command
>npm install -g
> npx create-react-app <project-name>
> create-react-app <my-directory>
Once it has been created, we can start our application.
> npm start

There are two types of components in React: functional components and class
components.

Functional Components:
Functional components are defined as JavaScript functions. They receive props
(properties) as input and return JSX (JavaScript XML) to describe the UI. Here's
an example of a functional component:

import React from 'react';

function MyComponent(props) {

8
 return <div>Hello, {props.name}!</div>;
}
export default MyComponent;

Class Components:
Class components are defined as JavaScript classes that extend the
React.Component class. They can have state, lifecycle methods, and more
complex logic. Here's an example of a class component:
import React from 'react';
class MyComponent extends React.Component {
render() {
return <div>Hello, {this.props.name}!</div>;
}
}
export default MyComponent;

ReactJS Lifecycle and Methods

Mounting Phase:
constructor(): The constructor method is called when the component is being
initialized and allows you to set up the initial state and bind event handlers.
static getDerivedStateFromProps(): This method is invoked just before rendering
when new props are received and returns an updated state based on the new props.
render(): The render method is responsible for rendering the component's UI based
on the current state and props. It must be a pure function.
componentDidMount(): This method is called immediately after the component
has been rendered to the DOM. It is commonly used to initiate API calls, set up
subscriptions, or perform other side effects.
Updating Phase:

9
static getDerivedStateFromProps(): Similar to the mounting phase, this method is
called just before rendering when new props are received. It allows updating the
state based on the new props.
shouldComponentUpdate(): This method determines whether the component
should re-render or not. It is used to optimize performance by preventing
unnecessary re-renders.
render(): Re-renders the component with updated state and props.
getSnapshotBeforeUpdate(): This method is called right before the changes from
the component are committed to the DOM. It allows capturing information from
the DOM before it updates.
componentDidUpdate(): This method is invoked after the component has been
updated and re-rendered. It is commonly used to perform post-update operations
like updating the DOM or making additional API calls.
Unmounting Phase:

componentWillUnmount(): This method is called just before the component is

removed from the DOM. It allows performing cleanup operations such as
cancelling timers, subscriptions, or releasing resources.
Error Handling Phase:
static getDerivedStateFromError(): This method is invoked when an error is
thrown from a child component's lifecycle method. It updates the component state
to display an error UI.

In React, both state and props are used to manage and pass data in components,
but they serve different purposes.

Props (Properties):
Props are read-only data passed from a parent component to a child component.
They are used to pass data and configuration from a parent component down to its
child components.
Props are defined by the parent component and accessed by the child component
as function arguments.

10
Props are immutable, meaning they cannot be modified by the child component.
To access props in a functional component, you can simply use the props
parameter, and in a class component, you can access them using this.props.
Example of passing props from a parent component to a child component:
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
const name = 'John Doe';
return <ChildComponent name={name} />;
}
export default ParentComponent;
// ChildComponent.js
import React from 'react';
function ChildComponent(props) {
return <div>Hello, {props.name}!</div>;
}
export default ChildComponent;
In the above example, the name prop is passed from the ParentComponent to the
ChildComponent. The child component then receives and renders the value of the
prop.

State:
State represents the internal data of a component that can change over time.
State is managed within a component and can be modified using the setState()
method provided by React.
State is typically used to handle user interactions, manage component-specific
data, and trigger re-rendering when the state is updated.

11
State is specific to class components, as functional components can use React
Hooks (such as the useState hook) to manage state.
State should be initialized in the constructor() method of a class component, and
it can be accessed using this.state.
Example of using state in a class component:
jsx
Copy code
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0, };}incrementCount() { this.setState({ count: this.state.count + 1
});

12
CONCLUSION
This internship report encapsulates the practical experience and insights gained
during the tenure of the internship at the Scontinent Technologies. As a final year
BCA student from SBRR Mahajana's First Grade College, Mysore, the focus of
the internship was on Full Stack Web Development.

The report outlines the objectives, methodologies, and key findings of the
internship project, shedding light on the application of theoretical knowledge in
real-world scenarios. It discusses the challenges encountered and the strategies
devised to overcome them, showcasing adaptability and problem-solving skills.

Moreover, the report highlights the significance of teamwork, and project

management skills in the context of web development. Practical experiences and
lessons learned from interactions with industry professionals are also elaborated
upon.

Overall, this report serves as a comprehensive reflection on the internship

experience, offering valuable insights and learnings for future endeavours in the
field of web development.

13