INDUSTRIAL TRAINING REPORT

Front End Development

Submitted in partial fulfillment of requirement of the Degree

of
BACHELOR OF TECHNOLOGY in COMPUTER
SCIENCE & ENGINEERING

SUBMITTED BY SUBMITTED TO

Name – Suyash Kanchan Prof. - Mr. Ajay Jaiswal

En. Roll - EN19CS302049

Department of Computer Science & Engineering

Faculty of Engineering
MEDI-CAPS UNIVERSITY, INDORE- 453331

Aug-Dec 22

I
I
 Report Approval

The Industrial Training Report entitled “Front End Development” is hereby

approved as a creditable study of an engineering subject carried out and
presented in a manner satisfactory to warrant its acceptance as prerequisite for
the Degree for which it has been submitted.
It is to be understood that by this approval the undersigned do not endorse or
approved any statement made, opinion expressed, or conclusion drawn there in;
but approve the “Industrial Training Report” only for the purpose for which it
has been submitted.

Internal Examiner Name:

Designation
Affiliation

External Examiner Name:

Designation
Affiliation

I
 Declaration

I hereby declare that the Online Internship entitled “Front End

Development” submitted in partial fulfillment for the award of the
degree of Bachelor of Technology in ‘Computer Science &
Engineering’ completed under the supervision of Prof. Mr. Santosh
Sen, Department of Name and address of the Organization from
10June 2022 to 11 July 2022.
Further, I declare that the content of this Industrial Training, in full or
in parts, have neither been taken from any other source nor have been
submitted to any other Institute or University for the award of any
degree or diploma.

Suyash Kanchan
EN19CS302049
21/11/2022

I
 Certificate

This is to certify that Mr. Suyash Kanchan has

partially completed / completed Industrial Training
during the period from 10/06/2022 to 11/07/2022 in
our Organization / Industry as a Partial Fulfillment of
Degree of Bachelor of Technology in Computer
Science & Engineering. He was trained in the field of
Front-End Web Development.

Signature & Seal of Training Manager

Dr. Pramod S. Nair Head of the

Department
Computer Science & Engineering Medi-Caps
University, Indore

I
Certificate

1
Certificate

2
 Acknowledgements

I would like to express my deepest gratitude to Honorable Chancellor, Shri R C

Mittal, who has provided me with every facility to successfully carry out this
Industrial Training, and my profound indebtedness to Prof. (Dr.) Dilip Kumar
Patnaik, Vice Chancellor, Medi-Caps University, whose unfailing support and
enthusiasm has always boosted up my morale. I also thank Dr. Suresh Jain,
Dean, Faculty of Engineering, Medi-Caps University, for giving me a chance to
work on this Industrial Training. I would also like to thank my Head of the
Department Prof. (Dr.) Pramod S. Nair for his continuous encouragement for
betterment of the Industrial Training.

I express my heartfelt gratitude to my Instructor and Guide Prof. Mr. Ajay

Jaiswal, Department of Engineering, Medicaps University , without whose
continuous help and support, this Industrial Training would ever have reached to
the completion.

It is their help and support, due to which we became able to complete the design
and technical report.

Without their support this report would not have been possible.

Name – Suyash Kanchan

En Roll. - EN19CS302049
B.Tech. 4th Year
Department of Computer Science &
Engineering Faculty of Engineering
Medi-Caps University, Indore

3
 Abstract
Life is becoming too fast. Everything around is developing at a rapid pace.
And at this time of modern era, web development is most required skill in
the IT sector. The main idea of this work is to provide ease and comfort to
clients that what requirement is to be fulfilled. The website allows the user to
ask for hiring an web development specialist to work on their desired
projects. Even the Startup’s nice also hires the people who are actually
devoted to work on the web development technologies.

This project is aimed at developing a better solution for our clients so that
They can have their desired projects done and further service they require.
This product helps the clients to get their requirements done as per their
needs.

1
TABLE OF CONTENT

INDEX Page No.

Report Approval 1

Declaration 2

Certificate 3

Offer letter of the Project work-II/Internship 4

Completion letter/certificate 5

Acknowledgement 6

Abstract 7

Table of content 8

Chapte 1.1 - Introduction 9

r1
1.2 - Technologies Used 10-13

1.3 - Research Design 14

Chapte 2.1 - Project Work 15

r2
2.2 - Picture Gallery 18-26

Chapte 3 - Summary and Conclusion 27

r3
Chapte 4 - Future Scope 28
r4
Bibliography 29

Reference 30

2
 Chapter-1
1.1-Introduction
About Avalanche Infotech Pvt. Ltd.
Avalanche Infotech Pvt. ltd. was born and brought up in Indore in 2002,
operating since 2002. They are currently working in Indore, Lucknow, Delhi,
Pune, Bangalore locations they also have the policy to work from home
anywhere. The headoffice is located in Indore. Their target is to be the Best
Tech- Company in Indore. Avalanche Infotech Pvt. ltd. is both into service
sector and product development. They are currently working with a lot of
small and big clients.
Avalanche InfoTech Pvt Ltd are a leading Services provider of information
technology in USA and India for IT consulting. We combine a passion for
client satisfaction, technology innovation, deep industry and business process
expertise, and a global, collaborative workforce that embodies the future of
work.

Avalanche InfoTech Pvt is a company with headcount of around 100+ employees.

Rose-Wellness is a web app with a robust backend infrastructure that will be

on Wordpress with many services in used like ECS, Client-X etc. It is a
Doctor/Patient portal used to diagnose health problems and book slots for
doctor appointment.

3
1.2 Technologies used

Frontend Technology Used

HTML
HTML (Hypertext Markup Language) is a text-based approach to
describing how content contained within an HTML file is structured. This
markup tells a web browser how to display text, images and other forms of
multimedia on a webpage.

HTML is a text file containing specific syntax, file and naming conventions
that show the computer and the web server that it is in HTML and should be
read as such. By applying these HTML conventions to a text file in virtually
any text editor, a user can write and design a basic webpage, and then upload
it to the internet.

BOOTSTRAP
Bootstrap is a free and open-source CSS framework directed at responsive,
mobile-first front-end web development. It contains HTML, CSS and
JavaScript-based design templates for typography, forms, buttons,
navigation, and other interface components.

4
 React
Easy creation of dynamic applications: React makes it easier to
create dynamic web applications because it requires less coding and
offers more functionality, as opposed to JavaScript, where coding
often gets complex very quickly.
Improved performance: React uses Virtual DOM, thereby creating
web applications faster. Virtual DOM compares the components’
previous states and updates only the items in the Real DOM that were
changed, instead of updating all of the components again, as
conventional web applications do.
Reusable components: Components are the building blocks of any
React application, and a single app usually consists of multiple
components. These components have their logic and controls, and
they can be reused throughout the application, which in turn
dramatically reduces the application’s development time.

Babel
Babel is a JavaScript trans piler that converts edge JavaScript (ES6)
into plain old ES5 JavaScript that can run in any browser even in the
old ones. Transpilers, or source-to-
source compilers, are tools that read source code written in one
programming language, and produce the equivalent code in another
language which is in the same level.

5
WebPack

Webpack is a free and open-source module bundler for JavaScript.

It is made primarily for JavaScript, but it can transform front-end assets
such as HTML, CSS, and images if the corresponding loaders are included.
Webpack takes modules with dependencies and generates static assets
representing those modules.

Ant Design

The Ant Design System is an open-source code for enterprise-level UI

design languages and React UI library. It comes with a set of
high-quality React components, with theme customization capability. It is
built with i18n and has been localized for dozens of languages.

Features of Ant Design:

Enterprise-class UI designed for web applications.

A set of high-quality React components out of the box

6
 Backend Technology
JavaScript

JavaScript (JS) is a lightweight, interpreted, or just-in-

time compiled programming language with first-class
functions. While it is most well-known as the scripting
language for Web pages, many non-browser environments also
use it, such as Node.js, Apache CouchDB and Adobe Acrobat.
JavaScript is a prototype-based, multi-paradigm, single-
threaded, dynamic language, supporting object-oriented,
imperative, and declarative (e.g., functional programming)
styles.

This section is dedicated to the JavaScript language itself, and not

the parts that are specific to Web pages or other host
environments. For information about APIs that are specific to Web
pages, please see Web APIs and DOM.

NodeJS

Node.js is a free, open-sourced, cross-platform JavaScript

run- time environment that lets developers write command line
tools and server-side scripts outside of a browser.
It is used to develop I/O intensive web applications like video
streaming sites, single-page applications, and other web
applications. Node.js is open source, completely free, and used
7
 by thousands of developers around the world.

ExpressJs

Express.js, or simply Express, is a back-end web application

amework for building RESTful APIs with Node.js, released as free
nd open-source software under the MIT License. It is designed for
uilding web applications and APIs. It has been called the de facto
andard server framework for Node.js.

jQuery
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript
on your website. jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and wraps them into
methods that you can call with a single line of code.

JSON
JSON is an open standard file format and data interchange format that
uses human-readable text to store and transmit data objects consisting
of attribute–value pairs and arrays. It is a common data format with
diverse uses in electronic data interchange, including that of web
applications with servers.

8
 Database
MongoDb

MongoDB is a source-available cross-platform document- oriented

database program. Classified as a NoSQL database program,
MongoDB uses JSON-like documents with optional schemas.
MongoDB is developed by MongoDB Inc. and licensed under the
Server-Side Public License which is deemed non-free by several
distributions.
• MongoDB stores data in flexible, JSON-like documents, meaning
fields can vary from document to document and data structure can
be changed over time
• The document model maps to the objects in your application
code, making data easy to work with

9
10
11
12
 Chapter-3

Summary

Start-up Nicee is a web portal with a robust backend

infrastructure that will be on WordPress with many services in
used like cPanel, Apache tomcat etc. It is a multi-user application
which will be used as a website development portal for the clients
to get their requirement fulfilled.
Start-up Nicee will ensure privacy and security of each of its user
by ensuring that no data can be viewed by any of the users.

Conclusion

Start-up Nicee has become one of the most successful projects in

their domain due to some exclusive features like Multi Tenancy of
the Web Application which provides a separation of data between
different users being in a single DB server. It will also offer a
secure solution using KMS which makes the data encrypted and
the data is not viewable i.e., it is only stored in buckets but cannot
be viewed by anyone.

13
 Chapter-4

Future Scope

Start-up Nicee has a lot of potential currently it is restricted India

only but in future we can expand its user base to public as well
so that anybody can get their requirement of website
development get fulfilled.

The application uses multiple technologies, which will be much

easier to use when they will be running through dockerization
and using kubernetes as orchestration tool we can manage the
server- based computation of the application on a large scale.

14
 Bibliography

• https://wordpress.org/
•
• https://wordpress.org/themes/
• https://wordpress.org/support/forums/
• https://wordpress.org/plugins/cloudflare/
•
• https://www.reactjs.org https://babeljs.io/
https://webpack.js.org/ https://www.typescriptlang.org/
https://ant.design/
• https://redux.js.org/ https://spring.io/projects/spring-boot
https://www.java.com/ https://www.mysql.com/

15
 References

Frontend https://www.reactjs.org
Technologie https://babeljs.io/
s https://webpack.js.org/
https://www.typescriptlang.org/
https://ant.design/ https://redux.js.org/

Backend https://nodejs.org/en
Technologie /
s https://expressjs.co
m/
Database https://www.mongodb.com/

16