MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

(MUMBAI)

INDUSTRIAL TRAINING PROJECT REPORT

SUBMITTED BY

Vedant Ghate

AT

Sumago Infotech Pvt. Ltd.

DEPARTMENT OF INFORMATION TECHNOLOGY

SANDIP FOUNDATION’S
SANDIP POLYTECHNIC, NASHIK.
[2024-25]
This is to certify that Mr. Vedant Ghate with Enrollment No. 2211670203 has
successfully completed Industrial Training (22049) in Sumago Infotech Pvt. Ltd.
From 03/06/24 to 13/07/24 for partial fulfillment towards completion of Diploma
in Information Technology from Sandip Polytechnic, Nashik (1167)
 Course Completion Certificate

Full Stack web Development Course Completion Certificate

 Format 4
Evaluation Sheet for PA of Industrial Training

Academic Year : 2024-2025

Name of Industry : Sumago Infotech Pvt. Ltd.

Marks (5
Marks for PA
PA Marks
each week) Marks
by Industry Total
by Mentor by
Supervisor Marks
Sr. Enrollment Name of the and Industry Mentor
No. Number Student Supervisor Faculty
jointly
Out of
Out of 25 Out of
Out of 30 (a) 75
(B) 20 (C)
(A+B+C)
1
2
3
4
5
6
7
8
9
10

A) Marks for PA are to be awarded out of 5 for each week considering the level of
completeness of activity observed, from the daily dairy maintained.
B) Marks are to be awarded by Industry Supervisor on the basis of general observationand
behavioral aspects of student.
C) Marks are to be awarded by mentor faculty on the basis of report, understandinglevel and
work performance of the Student.

Signature Signature
Name and designation of the Mentor/faculty Name and designation of the Mentor/faculty
 Format 5

Evaluation Sheet for ESE of Industrial Training by Mentor and Industrial Personnel

Name of Student : Vedant Ghate Enrollment Number:2211670203

Name of Programmer: Information Technology Semester : Fifth
Course Title : Industrial Training Code 22049

Name of the Industry/Name of Course: Sumago Infotech Pvt. Ltd. (Full Stack Web Development)

Course Outcome Achieved

a) Communication effectively the work carried out.
b) Prepare and Present report of the work carried out.
c) Exercise time management and safety in the work Environment
d) Working in a team
e) Demonstrate various quality assurance
f) Exhibit the work carried out

Industrial
Training/Online Presentation Viva Total Marks (75
Training Report (25 Marks) (25 Marks) Marks)
(25 Marks)

Comments / Suggestion about team work/Leadership/Inter-personal Communication (If any)

…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………

Signature Signature
Name of Internal/Mentor Name of External Examiner
(Industry Personnel)
 Abstract

The landscape of digital solutions is continually evolving, necessitating the need for students to gain
practical, hands-on experience to complement their theoretical knowledge. In response to this need, Sumago
Infotech Pvt. Ltd, a global leader in digital solutions, is proud to announce our partnership with the
Maharashtra State Board of Technical Education (MSBTE) to offer Implant Training for 2024. This
initiative is designed to equip students with real-world skills in web hosting, domain registration, web design
and development, mobile app development, and digital marketing. As a trailblazer in the industry, Sumago
Infotech Pvt. Ltd is committed to nurturing the next generation of techsavvy professionals through this
comprehensive training program. The Implant Training 2024 program is an intensive, immersive experience
tailored to provide students with a deep understanding of the digital solutions landscape. This program aims
to bridge the gap between academic learning and industry requirements, ensuring that students are well-
prepared to meet the demands of the modern digital world. Participants will engage in hands-on projects,
real-world problem-solving, and collaborative learning under the guidance of industry experts from Sumago
Infotech Pvt. Ltd. The Implant Training 2024 program from MSBTE, in collaboration with Sumago Infotech
Pvt. Ltd, is an exceptional opportunity for students to gain practical experience in the digital solutions
industry. With our expertise, customized training modules, and commitment to excellence, we aim to
empower the next generation of tech professionals to thrive in a rapidly evolving digital landscape. We look
forward to welcoming participants and contributing to their growth and success in the tech industry.
 ACKNOWLEDGEMENT

With the deep sense of gratitude, we would like to thanks all the people who have lit our path with
their kind guidance. We are very grateful to these intellectuals who did their best to help during our project
work. It is our proud privilege to express deep sense of gratitude to,
Prof.P.M.Dharmadhikari,Principal,Sandip Polytechnic,Nashik, for his comments and kind permission to
complete this project. We remain indebted to Prof. V.B.Ohol, H.O.D, Information Technology Department
for their timely suggestion and valuable guidance. ‘
The special gratitude goes to guide from Implant Industry staff members and staff members, of
Computer Engineering Department for their expensive, excellent and precious guidance in completion of
this work.
We thanks to all the colleagues for their appreciable help for our working project. With various
industry owners or lab technicians to help, it has been our endeavor to throughout our work to cover the
entire project work. We also thankful to our parents who provided their wishful support for our project
completion in a successful manner.
And lastly we thanks to our all friends and the people who are directly or indirectly related to our
project work.
 Chapter 1
Organizational Structure of Industry / Organization and general layout

Organization structure:
Sumago Infotech, established in October 2013, is a versatile company with expertise in various
industries including technology, healthcare, finance, media, and manufacturing. The company offers
a wide range of services such as web design, web and mobile app development, software
development, digital marketing, software testing, and quality assurance.
Sumago Infotech aims to be a global leader in sourcing and to revolutionize service processes by
making IT accessible to both the general public and specialized sectors. They focus on creating
innovative IT solutions and providing IT-enabled services that delight customers worldwide,
building relationships based on trust, values, and professionalism.
The team at Sumago Infotech is composed of committed, innovative, and experienced professionals
dedicated to delivering customized, cost-effective, and long-term software solutions that align with
clients' objectives, ensuring customer satisfaction.
Their approach involves close collaboration with clients throughout the entire process, from design
to deployment, incorporating client ideas into their work. Post-deployment, Sumago Infotech
continues to provide support and promotes client businesses through digital marketing services,
always prioritizing quality and combining creative strategies with innovative technology to design
attractive websites.
 Chapter 2
Introduction of Industry / Organization
(Type of products, services, history, turnover, no of employees)
Introduction, History and Overview
Introduction:
Sumago Infotech is a company come up with IT solutions and services. We are based in Nasik,
India and today continuously moving ahead to satisfy our clients. We develop apps that stand out of
the group. We are quickest growing mobile application development firm. Our client base ranges
from tiny to medium sized businesses, as well as start-ups. Our purchasers have the benefit of the
competitive valuation for our quality services. We work closely with purchasers to know their
necessities and recommend them value effective, scale-able and strong mobile solutions.

Company/Industry Profile:
 Name of the company : - Sumago Infotech Pvt. Ltd.
 Location/ address/ Pin code : - The Avenue, Fourth Floor, Behind Prakash Petrol Pump,
Govind Nagar, Nashik, Maharashtra 422009
 Establishment : - October 2013
 Email & Web Address : - https://www.sumagoinfotech.com/
 Type of Control : - Private
 Type of Company : - World Wide
 Total number of employees in Office : - 40

Services Provided:
• Branding, Catalogue Designing, Logo Design
• Web hosting, Domain Registrations & Professional Email Service
• Mobile Application Development
• Customized Software Development
• Website Design & Development
• Android Application & Blockchain
• Digital Marketing
• Quality Assurance Services
• IT Consultancy

History:
Mr. Sudhir Gorade is the Director & Chief Executive Officer (CEO) of SUMAGO INFOTECH
PVT.LTD. He established SUMAGO INFOTECH PVT.LTD.- Give wings to your Business. As the
former Deputy General Manager of Information Technology at Nashik Municipal Smart City
Development Corporation Limited. He is a real techno expert of SUMAGO INFOTECH PVT.LTD.
who ensures quality solution implementation. SUMAGO INFOTECH PVT.LTD. is sufficiently
large to address our customer needs and thinks about customer fulfillment by offering quality
assistance. With a dynamic attitude of our group joined with the authoritative culture, we follow a
dream to be a pioneer in our area. We wish to be known as the one-stop answer for all IT
development needs over all industry verticals. Our singular mission is to create Clients for Life –
long-term relationships that deliver rapid, meaningful, and lasting business value.
 Chapter 3
How the daily work carried out in Industry

Daily Workflow in Implant Training for Full Stack Development:

1. Morning Routine and Planning
2. Front-end Development
3. Back-end Development
4. Integration and Testing
5. Version Control and Collaboration
6. Deployment and DevOps
7. Documentation and Continuous Learning
8. Wrap-up and Reflection
 Chapter 4
Technology Used in Industry

WEB TECHNOLOGY

Sumago Infotechspecialized in Website Designing with

appealing look and user-friendly interface. We are a web
design company serving all size of businesses to obtain a
greater revenue from online endeavors. Build Responsive Web
Design to Expand your Business. We make new age client
involvement with spotless, great and attractive plan. We’re
specialized in Website Designing with appealing look and
user-friendly interface. In our Web Designing process, we
understand your business objective and deliver a website
which help you stay ahead of competitors. Our website designing services involves client requirement
Analysis, Strategic planning, Creative ideas, PSD Layout Designing, Layout implementation and
maintenance services.
 Chapter 5
Assignment Performed in Industry

React State Management with useState Hook for increment and decrement :
import React from 'react';
const ImageGallery = () => {
return (
<div className="image-gallery">
<div className="image-container">
<img src="image4.jpg" alt="Gallery Image 1" className="animated-image" /></div>
<div className="image-container">
<img src="image2.jpg" alt="Gallery Image 2" className="animated-image" /></div>
<div className="image-container">
<img src="image3.jpg" alt="Gallery Image 3" className="animated-image" /></div>
</div>);}
export default ImageGallery;

React Component for an Animated Image Gallery:

import React, { useState } from 'react'
function Hooks() {
const[no, setno]=useState(5)
function decrement(){
setno(no - 1)}
return (
<div>
<button onClick={()=>decrement()}>substraction</button>
<h1>{no}</h1>
<button onClick={()=> setno(no + 1)}>Addition</button>
</div>
)
}
export default Hooks
 Chapter 6
Practical experiences in Industry

 Gained practical knowledge about industry’s work.

 All the online classes were so helpful because instructor covered all the
necessary topics about web development.

 Every session was interactive that’s why I never faced any problems to follow on.

 This training had helped me to increased my development Skills and Knowledge.

 We learned how to understand the customer’s requirements and achieve it and plan the
web development.

 We learnt various front-end technologies for designing web pages.

 Chapter 7
What we learned? (In Training)

HTML(Hypertext Markup Language):

HTML (HyperText Markup Language) is the foundational language used for creating and structuring
content on the web. It employs a system of elements and tags to organize and format text, images,
links, and other media, making it possible for web browsers to render web pages correctly. HTML is
the backbone of all web content, providing a semantic structure that ensures content is accessible and
readable by both humans and machines.

CSS(Cascading Style Sheets):

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation, layout, and
styling of HTML documents. By separating content from design, CSS allows web developers to
enhance the visual appeal and user experience of web pages without altering the HTML structure. This
separation facilitates easier maintenance and more flexible design changes. CSS works by applying
styles to HTML elements using selectors and properties.

Bootstrap:
Bootstrap is a comprehensive front-end framework developed by Twitter to streamline the
development of responsive and mobile-first web applications. It provides a collection of pre-designed
components, styles, and JavaScript plugins that enable developers to build consistent, visually
appealing, and functional user interfaces efficiently. The framework is built on HTML, CSS, and
JavaScript, offering a modular approach to web development.

JavaScript:
JavaScript is a versatile, high-level programming language primarily used for creating interactive and
dynamic content on web pages. It is a core technology of the web, alongside HTML and CSS, and
enables developers to implement complex features and enhance user experiences directly within the
browser. One of JavaScript's key strengths is its ability to manipulate the Document Object Model
(DOM), which represents the structure of an HTML document. By using JavaScript, developers can
dynamically change the content, structure, and styling of web pages in response to user interactions or
other events.

Express JS:
Express.js is a popular, lightweight web application framework for Node.js, designed to build web
applications and APIs. It simplifies the process of developing server-side applications by providing a
robust set of features and middleware for routing, handling HTTP requests and responses, managing
sessions, and more. With its minimalist core and flexible middleware architecture, developers can
easily extend and customize their applications. Express.js is widely used in the JavaScript ecosystem
and is known for its simplicity, speed, and scalability, making it a preferred choice for building modern
web applications.
 Chapter 8
Conclusion

In this full stack web development training, I have gained valuable insights into various technologies and
techniques for building modern web applications. I have learned about HTML, CSS, JavaScript, and other
essential tools and frameworks. The training was both informative and engaging, offering a deep dive into
the world of web development. I am immensely grateful to my trainers and mentors, Ms. Pooja Dalvi along
with all the supporting staff members who guided me throughout the course. MSBTE has provided me with
this incredible opportunity to enhance my technical skills and explore a new domain. I now feel confident in
my ability to design and develop full stack web applications, utilizing the skills and knowledge acquired
during this training. It is truly an honor to be a part of Sumago Infotech Trainings and to have experienced
such a transformative learning journey.
 Sumago Infotech Pvt. Ltd.

From 03/06/24 to 13/07/24

Name of Supervisor: Nilam Bodke

Designation of Supervisor: L & D Head

Name of the Student: Vedant Ghate

Branch of Engineering: Information Technology

Name of Polytechnic: Sandip Polytechnic

The session started with introduction to the company, its history, mission, events,
etc. They provided an overview of structure of training program. The CEO of
Sumago Infotech inspired us with her words. She encouraged us to make the most
of this opportunity and learn as much as we can. She told us to establish a network
with other students. After this, each of us received a welcome kit.
The interns were introduced to HTML and the fundamental tags. The session
introduced essential tags like <html> and <body>. They covered header tags,
paragraph tag, anchor tag, etc. We learnt about <img> tag for adding images, list
tag and span tag for styling. We also discussed <marquee>, <sub>, <sup>, <table>,
<th>, <td>, <tr>, etc. We implemented these tags in a html page.
The focus was on designing forms using html and basic css styling. We were
introduced to html form elements like input fields, radiobuttons. We used <form>
tag to create a form. Various input fields can be created such as text, password, etc.
We learnt 3 types of css, different selectors like tag, universal, class, id, properties
like margin, padding, border, etc. We practiced by created and styling basic form.
We created Basic Web Page using the properties like grid template for flexible
layout display: flex for aligning items and gap for spacing. We learnt about float
property grid layout module for grid based layout and position property. We
studied text decoration property for styling the text. We structured the navigation
bar with html list and styled it with css.
We started bootstrap. We studied cards, carousel, collapse, dropdowns, modal,
containers, breakpoints and grid system. Card provides customizable, extensive
and flexible content container. Breakpoints are used to control when your layout
can be adapted at particular device size. The instructor designed a webpage using
this component we practiced by making login window.
This day was filled with engaging activities and games to fresh up the Student. The
highlight of the day was playing two interactive games that required concentration
and quick thinking. The first game was bilingual counting game. It was a very
interesting game.
On this day the focus was on the understanding and applying the utilities of
bootstrap. We explored various classes of background colors like bg-primary, bg-
success etc. We reviewed border colors and sizes. We also studied shadows to
enhance depth. We also understood the margin and adding utilities. It makes easy
to adjust spacing. There are classes of margin and also padding.
The session started with steps to install Node JS. The coordinators ensured that
everyone had set up Node.JS correctly in their pc. We explored the node package
manager. They also demonstrated us to create a simple server.

We studied React, its creation and its folder structure and its commands. We learnt
about creating a new react application using create react app tool. The session
continued with an exploration of typical folder structure in react project. It contains
app.css, app.js, index.html, index.css, readme, package.json etc. ‘src/.’ is the main
working directory. We then studied various react commands.
We focused on Creating the footer section of a webpage using react. The session
started with an overview of the footer’s role in a website. The footer section
contains links to essential pages, social media icons and contact information. Our
instructor demonstrated us how to structure the footer section. We practiced to
design the footer section of our website by applying various styles.
The session began with an introduction to prop passing. We learnt to exchange the
props. Props are the arguments passed into react components. Props are like
function arguments in javascript and attributes in html. Following this we dealt into
card design using props. We practiced creating and presenting cards as well as prop
passing. We designed a title bar using prop.
It was just lecture on the topic UI design and UX process. The speaker explained
the principles of UI design. She compared the Whatsapp and hike illustrating how
the differences impact user engagement and satisfaction. The session proceeded to
define the role of UX designer emphasizing their responsibilities in conducting
user research etc. Finally, The UX process was detailed step by step.
We studied arrays spread operator and objects in Javascript. The special variable
which can hold more than one value. Spread operator allows us to quickly copy all
or part of an existing array or object into another array or object. We used spread
operator to concatenate 2 arrays then we saw objects which is a list of property
names: values inside curly braces.
We began with the array of object which is a collection of homogeneous data that
stores a sequence of numbered objects at a single place. We saw the use of map
and filter function. Map function creates a new array by applying a function to
each element of original array. Filter function creates a new array with all elements
that pass a test implemented by provided function
We explored the basic components of react router such as browser router, route.
Browser Router stores the current location in the browser’s address bar using clean
urls and navigates using the browser built in history stack. We installed react router
dom package using npm i react router dom. After this, we used browser router to
navigate home page, about page and contact page.
We studied the practical applications of hooks in react focusing specifically on
how to manage the state to increment and decrement a number and how to change
a picture. We studied the syntax of hooks like UseState. It is used to create a static
variable for number. Then we implemented functions to handle increment and
decrement operation. These functions were tried to button click events. We also
changed a picture on a click using usestate hook.
We studied the basic syntax of use effect hook. In this session, to illustrate we built
a simple example that fetched data from an api and displayed it on the screen. We
used useeffect hook to display the data on the screen. Then we fixed data from
another api, displayed its 1 record in 1 card. Madam told us to print data in a table.
We tried to fetch and print data in various components like container, accordion.
It was an expert talk on career planning. The speaker missed Deepti Pawar shared
her insights on transforming aspirations into achievable career goals highlighting
the importance of setting realistic milestones, continuous skill development.
Following the lecture, students engaged in an interactive game which added a fun
and engaging element to the lecture.
We had a full hands on coding session in which we developed a react component
to fetch and display user data from an api. Using axios for http request and react
hooks like use state and use effect. We made a card hook component that
dynamically rendered user information within a card layout. We also rendered user
information within the table. We designed a responsive UI with data fetching.
The session included installing the Mongodb database. The instructor guided
students through the installation process. Following this, we created simple input
field using javascript. We implemented the onchange event to capture user input
and display it below. Afterwards we increased the input fields and printed the data
on the button.
We setted up Mongodb. The instructor explained the basics of Mongodb,
initialized Mongodb instance and connected it using Mongodb shell. We created a
database called student within it a collection named 10th class. We used insertone
and insert many methods for inserting data. We also used find, findOne,
updateOne, updateMany, deleteOne, deleteMany.
We created a folder named backend on desktop. Then we opened the folder in vs
code in the terminal. We entered npm i express and npm i mongoose to install the
express and Mongoose package. We created file app.js in backend folder. In app. js
connected Mongodb local host to Mongoose. After this we signed in Postman
which is a platform of api for building and using and testing api’s.
We studied get and post method by understanding fundamentals of http request.
We focused on the get method to retrieve data from an api and the post method to
send data to a server. A simple interface in react involved configuring axioms for
handling request managing state with hooks like usestate and use effect.

It was a game session in which we played two games, the first game was guessing
songs by Emojis. Only a true Bollywood lover can guess the songs in the emoji
quiz. We tested our Bollywood songs knowledge. All the songs displayed on the
screen. This game was so interesting. The second game was the bingo game.
From 01/07/24 to 06/07/24

We studied the significance of get method in retrieving data from a server. We

used the Postman to send get request to various endpoints. We studied how to set
up a new request by entering the appropriate url and configuring the necessary
parameters.

It was an insightful guest lecture on the stock market conducted by the

representatives of SEBI. We studied the fundamental concepts of stock trading
investments, mutual funds and etf’s as well as the financial planning.

We constructed and tested the post request including setting up the request body
header and handling responses. We practiced sending data to a server and verifying
the results.We also integrated our api’s into react application. We explored how to
make post requests using fetch and axios.

We studied the updation and deletion of the data through apis utilizing both react
and Postman. It included managing the component state and side effects with
hooks such as usestate state and useeffect.

We structured the overview of photography website project using react and css.

We developed the navigation bar and homepage for my photography website using
react and css.
From 08/07/24 to 13/07/24

We designed the about section of website. We focused on blending the creative

design with the use of react and CSS.

We developed sections of our photography website that is a booking form and a

customer reviews section. Booking form includes fields for name, number, email id
event date and event type. Additionally testimonial section was designed to
showcase customer reviews for various events.

We designed the footer and photo gallery section of our website. Photogallary
section is a photo slider that displays series of events in an automatic carousel
format.

We developed a complete back end using node js and Mongodb. The application
was built using express framework to ensure seamless communication between
front and back end. I integrated course middleware in Express.

We specifically worked on adding animation effects to the photos in the

gallery.We explored various animation techniques such as fading and scaling.

On the last day there was a valedictory function conducted in the Guru Dakshina
Hall where all the students were given the certificate of the industrial training and
there were some special rewards also.
From 08/07/24 to 13/07/24
From 08/07/24 to 13/07/24
From 08/07/24 to 13/07/24
From 08/07/24 to 13/07/24