INDUSTRIAL TRAINING REPORT

AshaWardRobe

Submitted in partial fulfillment of the Requirements for

the award of

Degree of Bachelor of Technology

in
Information Technology Engineering

Submitted By
Name: Antariksh Gupta
University Roll No: 75614802722

Department of Information Technology Engineering

MAHARAJA AGRASEN INSTITUTE OF
TECHNOLOGY GGSIPU, DELHI
2024

1
CERTIFICATE

2
Offer Letter

3
 DECLARATION

I hereby declare that the Training Report entitled "Front End Web Development (FEWD)" is an
authentic record of my own work as Training for the award of degree of B.Tech.(Information
Technology Engineering), GGSIPU, under the guidance of Rohit Rajput.

Name: Antariksh Gupta

Roll No :75614802722
Group: - 5C9

Date: 27/09/24
We certified that the above statement made by the student is correct to the best of our knowledge
and belief.

Signatures

Examined by:
Head of
Department
(Signature and Seal)

4
 ACKNOWLEDGEMENT

“Gratitude is not a thing of expression; it is more matter of feeling."

Any accomplishment requires the efforts of many people and this training is no
different. This formal piece of acknowledgement is an attempt to express the feeling
of gratitude towards people who helpful me in successfully completing of my
training. I am glad to take this opportunity to express my gratitude towards those who
made the successful completion of this project entitled “AshaWardRobe”

I would like to express my special thanks of gratitude to my internship guide “Mr. Rohit
Rajput”, Head of the Department Prof. Namita Gupta as well as our director Dr. Neelam
Sharma.

I sincerely express my gratitude towards “IBM SkillsBuild” for providing this

opportunity. Secondly, I would also like to thank my parents and friends who helped
me a lot in finalizing this report within the limited time frame.

Date: 27/09/2024

Place: Delhi

Antariksh Gupta

75614802722

5C9
5
 IBM: A Pioneer in Technology

IBM, short for International Business Machines Corporation, is an American multinational technology
company with its headquarters in Armonk, New York. With a presence in over 170 countries, IBM is
one of the world's largest and most influential technology companies. Since its establishment, IBM
has been at the forefront of technological innovation and development, shaping the modern world
with its cutting-edge products and services.

A Rich History of Innovation

Founded in 1911 in Endicott, New York, IBM was originally known as the Computing-Tabulating-
Recording Company (CTR). The company began by manufacturing punched card data processing
equipment, which played a crucial role in early data collection and analysis. In 1924, CTR was
renamed to International Business Machines, or IBM, marking the start of its expansion into
international markets and solidifying its status as a global leader in the tech industry.
Throughout the 20th century, IBM diversified its product offerings, transitioning from a company
known for mechanical tabulators to one that spearheaded innovations in computing technology. Its
contributions to the development of modern computing have been unparalleled, and today, IBM
produces and sells a wide range of technology products, including computer hardware, software, and
middleware. Additionally, the company offers various hosting and consulting services, with expertise
in areas such as cloud computing, artificial intelligence, and data analytics.
Groundbreaking Inventions and Technological Achievements
IBM's impact on technology extends far beyond its core business offerings. The company has been
behind some of the most important inventions in the history of modern computing and technology.
Some of IBM’s groundbreaking innovations include:
• The Automated Teller Machine (ATM): A device that revolutionized banking by allowing
customers to perform financial transactions without the need for a bank teller.
• The Floppy Disk: A portable storage medium that was widely used in the 1970s and 1980s to
store and transfer data between computers.
• The Hard Disk Drive: A fundamental component of modern computers that allows for the
storage of large amounts of data.
• The Magnetic Stripe Card: This technology is used in credit and debit cards, making
6
 transactions faster and more secure.
• The Relational Database: A type of database that organizes data into tables, making it easier
to manage and query large amounts of information.
• The SQL Programming Language: One of the most widely used languages for managing and
manipulating databases.
• The UPC Barcode: A system used for scanning and tracking products, which has become
essential in retail and logistics.
• Dynamic Random-Access Memory (DRAM): A type of memory used in computers and other
devices to store data quickly and efficiently.
These innovations have not only transformed their respective industries but have also had a lasting
impact on everyday life, influencing everything from banking to retail, and from data storage to
programming.
Recognized Excellence and Leadership in Science
IBM's contributions to technology and science have been recognized with numerous prestigious
awards. The company’s employees have earned an impressive array of honors, including:
• Five Nobel Prizes: Awarded for significant contributions in areas such as physics and
chemistry.
• Six Turing Awards: Often referred to as the "Nobel Prize of Computing," these awards
recognize individuals who have made substantial advancements in computer science.
• Ten National Medals of Technology (USA): This is the highest honor in the United States for
achievements in technology, innovation, and scientific progress.
• Five National Medals of Science (USA): These medals are awarded to individuals who have
made outstanding contributions to the advancement of knowledge in the field of science.
IBM Today: Leading the Way in Future Technologies
IBM continues to lead the way in developing and implementing cutting-edge technologies. Today, the
company is heavily invested in research and development in areas such as artificial intelligence (AI),
cloud computing, blockchain, cybersecurity, and quantum computing. Its AI platform, IBM Watson,
has made significant strides in transforming industries by applying machine learning and AI solutions
to solve complex business problems.
IBM’s global operations and its commitment to innovation make it a major player in driving the future
of technology. The company’s services are utilized by industries ranging from finance and healthcare
to government and manufacturing, making IBM an essential partner in the ongoing digital
transformation of businesses around the world.

7
 OVERVIEW
IBM, or International Business Machines Corporation, is a major American multinational technology
company headquartered in New York. Founded in 1911 as the Computing-Tabulating-Recording
Company (CTR), it was renamed IBM in 1924. With operations in over 170 countries, IBM is a leader in
the development and sale of computer hardware, software, and services, including consulting and
hosting in areas such as cloud computing and artificial intelligence.
IBM has pioneered several groundbreaking technologies that have shaped modern computing,
including the automated teller machine (ATM), the floppy disk, hard disk drive, relational database, and
the SQL programming language. Its innovative contributions also extend to the magnetic stripe card,
the UPC barcode, and DRAM (Dynamic Random-Access Memory).
The company has a strong reputation for excellence in science and technology, with its employees
having received numerous prestigious awards, including five Nobel Prizes, six Turing Awards, and
multiple National Medals of Technology and Science.
Today, IBM remains at the forefront of technological advancements, focusing on AI, quantum
computing, cybersecurity, and more, continuing its legacy as a global leader in innovation.

8
 TABLE OF CONTENTS
CERTIFICATE ................................................................................................. 2

OFFER LETTER ............................................................................................... 3

DECLARATION ............................................................................................... 4

ACKNOWLEDGEMENT .................................................................................. 5

ABOUT THE COMPANY ................................................................................. 6

1. WEB DEVELOPMENT ............................................................................ 10

Front End Web Development ................................................................ 12

Introduction To HTML ...................................................................................... 16

Introduction To CSS ......................................................................................... 17

Introduction To JavaScript.............................................................................. 18

Introduction To React.js .................................................................................. 19

Introduction To Nodejs .................................................................................... 20

Introduction To Express.js ..............................................................................22

Introduction To MongoDB ..............................................................................26

2. PROJECT................................................................................................28

Introduction ....................................................................................................... 28

AshaWardrobe ................................................................................................... 29

3. WEEKLY COURSE SCHEDULE .............................................................. 35

Week 1… ............................................................................................................ 35

Week 2… ........................................................................................................... 36

Week 3… ........................................................................................................... 37

9
 Week 4 ................................................................................................................38
Week 5… ............................................................................................................39
Week 6… ............................................................................................................40

4. LEARNING AFTER TRAINING… ............................................................. 41

5. REFERENCES… ………………………………………………………………47

10
 TABLE OF FIGURES

S.no Name of Figure Page No.

1 Fig 1. Homepage 29
2 Fig 2. Why Donate Clothes 30
3 Fig 3. Why Us 31
4 Fig 4. Distribution 31
5 Fig 5. Sustainability Tracker 32
6 Fig 6. Partner Organizations 32
7 Fig 7. Testimonials 33
8 Fig 8. Frequently Asked Questions 33
9 Fig 9(a). Donations Page 34
10 Fig 9(b). Successful Donation 34
11 Fig 10(a). Mongodb Entry for Donation 35
12 Fig 10(b). Request Assistance Page 35
13 Fig 11(a). Request Submitted Successfully 36
14 Fig 11(b). Mongodb Entry for Request 36
15 Fig 12. Volunteer Page 37
16 Fig 13. Application Submitted Successfully 37
17 Fig 14(a). Mongodb Entry for Volunteer 38
18 Fig 14(b). Mail Received regarding volunteering 38

11
 Front-End Web Development Project Overview

Project Title: Front-End Web Development for a Modern Website

Objective:
The goal of this project is to design and develop the user-facing part of a website, ensuring
it is visually appealing, functional, and easy to use. As a front-end developer, you will focus
on creating the parts of the website that users directly interact with, including the layout,
design, and interactive features.

Project Scope:

1. User Interface (UI) Design:

o Design an attractive and intuitive interface that guides users through the
website.

o Ensure that the design is consistent across all pages, using common
components like navigation bars, buttons, and forms.

o Focus on readability, ensuring the text and images are displayed in a user-
friendly way.

2. User Experience (UX):

o Ensure the website is easy to navigate, with clear instructions or paths for
users to follow.

o Optimize the layout and functionality for user satisfaction, considering

elements like load time, accessibility, and ease of interaction.

o Focus on creating a responsive design, so the website works well across

devices, from mobile phones to desktops.

12
 3. Interactive Features:

o Implement basic interactive elements like buttons, forms, or modals that

respond to user actions (e.g., clicking, submitting a form).

o Create feedback for users, such as pop-up messages or form validation, to

improve usability.

4. Responsive Design:

o Ensure the website is responsive, meaning it adapts to different screen sizes

and devices.

o Test the site on various devices (smartphones, tablets, desktops) to ensure

that all features function properly.

5. Cross-Browser Compatibility:

o Make sure the website works consistently across different browsers like
Chrome, Firefox, Safari, and Edge.

o Test for compatibility issues and resolve them to provide a uniform

experience.

6. Performance Optimization:

o Ensure the website loads quickly and performs smoothly by optimizing

resources like images and scripts.

o Minimize the use of heavy files that could slow down the website.

Key Deliverables:

Design Mockups:
Create wireframes or mockups that showcase the visual design and layout of the
website.

1. Responsive Website:
Develop the website to be fully responsive, adapting to different screen sizes.
13
 2. Basic Interactivity:
Implement simple interactive features that engage users, such as buttons that
perform actions or forms that collect user data.

3. Cross-Browser Functionality:
Ensure the website works on multiple browsers with no noticeable differences or
issues.

4. Optimization Reports:
Include a summary of performance improvements, such as reduced loading times
and browser testing results.

Evaluation Criteria:

Design and Layout:

• How well the website’s design meets the project’s objectives and user needs.

Functionality:
The interactivity and responsiveness of the website across devices and browsers.

Performance:
How quickly and efficiently the website loads and operates.

User Experience:

The overall ease of use and navigation from a user’s perspective.

This project will allow you to develop key skills in front-end web development by focusing
on UI/UX design, user interactivity, and responsive design, all while maintaining
performance and compatibility across platforms

14
 TECHNOLOGIES

Technologies used to develop the website are:

➢ HTML
➢ CSS
➢ JavaScript
➢ React.js
➢ Node.js
➢ Express.js
➢ Mongo DB
➢ Git and Github
➢ Deployment websites such as Vercel and Render

15
 HTML (Hypertext Markup Language)

Overview:

HTML is the backbone of front-end web development. It is a markup language used to structure
content on the web. When you visit a webpage, HTML is responsible for organizing text,
images, links, and other elements in a readable format. Unlike programming languages that
focus on logic and computation, HTML provides the structure for the visual presentation of
content.

Key Components of HTML:

1. Elements and Tags:

HTML consists of tags, which define elements. Each tag is surrounded by angle brackets, like
<h1> for headings or <p> for paragraphs. Most tags come in pairs: an opening tag (e.g., <p>)
and a closing tag (e.g., </p>), which surround the content they affect.
2. Document Structure:
HTML files start with a <!DOCTYPE html> declaration, followed by the root <html> element that
wraps everything. The content is divided into two main parts:
o Head Section (<head>): This contains metadata like the page title (<title>), link to CSS,
and other settings that influence how the page behaves.
o Body Section (<body>): This contains the actual content displayed on the webpage,
including headings, paragraphs, images, links, and forms.
3. Attributes:
HTML elements can have attributes that provide additional information. For example, an image
tag (<img>) requires an src attribute to define the image’s source and an alt attribute for
alternative text in case the image doesn’t load. Attributes modify the behavior of elements
without changing their fundamental nature.
4. Links and Navigation:
HTML allows you to link to other pages or sections of a website using the anchor (<a>) tag.
This tag creates hyperlinks, which are essential for navigating between pages. You can also
create a navigation bar using a list of links inside a <nav> tag.
Why HTML is Important:
HTML is essential for presenting structured content on the web. Without HTML, browsers wouldn’t
know how to display text, images, or other media properly. It is the most basic and fundamental tool in
any web developer's toolkit, ensuring that content appears correctly across different devices and
platforms.

16
 CSS (Cascading Style Sheets)
Overview:
CSS is used to control the presentation and design of web pages. While HTML provides the structure, CSS
focuses on the aesthetics, determining how the elements on a page should look. This includes colors, fonts,
layout, spacing, and positioning.
Key Components of CSS:
1. Selectors:
Selectors are used to target HTML elements. For example, you can use a selector like h1 to style all
<h1> elements on a page, or #header to target an element with a specific ID. There are many types of
selectors, including class selectors (.class-name), ID selectors (#id-name), and element selectors
(element).
2. Properties and Values:
CSS works by assigning properties (such as color, font-size, and margin) to elements and setting
corresponding values. For example, to make text red, you would write: color: red;.
3. The Box Model:
Every HTML element is treated as a rectangular box. The box model consists of four parts:
o Content: The actual content inside the element (text, images, etc.).
o Padding: Space between the content and the border.
o Border: A border that surrounds the element’s padding.
o Margin: The space outside the border, separating the element from others.
4. Responsive Design:
CSS enables developers to create responsive layouts, ensuring that websites look good on all devices.
Using media queries, CSS can apply different styles depending on the screen size, resolution, or
orientation. This adaptability is crucial for modern web design, as users access websites from
smartphones, tablets, and desktops.
Why CSS is Important:
Without CSS, all websites would look plain and unstyled. CSS enhances user experience by providing a
visually appealing and functional design. It separates the visual presentation from the structure, making it
easier to maintain and update websites. CSS is also critical for responsive web design, which is essential for
mobile users.

17
 JavaScript
Overview:

JavaScript is a programming language used to add interactivity, functionality, and dynamic content to
websites. While HTML structures a webpage and CSS styles it, JavaScript makes the page interactive
and engaging. It allows developers to respond to user actions, manipulate the Document Object Model
(DOM), and load new content without requiring the user to reload the entire page.

Key Components of JavaScript:

1. Variables:
Variables store data that can be used or modified later in the code. For example, you can store a
user's name in a variable and display it on the webpage dynamically. Variables in JavaScript can
be defined using keywords like var, let, and const.
2. Functions:
Functions are reusable blocks of code that perform specific tasks. For example, you might write a
function that calculates the total cost of items in a shopping cart or one that responds to a button
click. Functions help organize code and make it easier to manage.
3. Events:
JavaScript allows you to respond to events, such as clicks, keypresses, or mouse movements. By
using event listeners, JavaScript can execute code in response to these actions. For instance,
you can create an event listener that triggers a pop-up when a user submits a form or hovers
over a button.
4. DOM Manipulation:
JavaScript interacts with the DOM, which represents the structure of an HTML document.
Through DOM manipulation, JavaScript can dynamically change the content, styles, and
structure of a webpage. For example, you can update the text inside an HTML element, add new
elements, or remove existing ones based on user actions.
5. Asynchronous Programming:
JavaScript supports asynchronous operations, meaning that certain tasks (like fetching data from
a server) can run in the background without blocking the rest of the code. This allows for smooth
user experiences, such as loading new content without refreshing the page, using techniques like
AJAX and Fetch API.

Why JavaScript is Important:

JavaScript brings web pages to life by allowing them to respond to user interactions. Without JavaScript,
websites would be static and less engaging. It powers dynamic content, form validations, animations,
and many other features that make websites interactive and responsive. As the most widely used
programming language for front-end development, it’s a must-learn for any aspiring web developer.

18
 19.

React.js
Overview:
React.js is a JavaScript library for building user interfaces, specifically for single-page applications (SPAs) where
user interactions don’t require full page reloads. Developed by Facebook, React focuses on creating fast,
scalable, and efficient web applications through reusable components and a virtual DOM.

Key Components of React:

1. Components:
In React, everything is a component. Components are reusable, independent pieces of code that manage
their own state and logic. Each component can render a part of the user interface, like a header, footer,
or form, and can be combined to build complex UIs.
2. JSX (JavaScript XML):
JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript.
While browsers don’t understand JSX directly, React compiles it into regular JavaScript. JSX makes it
easier to visualize the structure of a component and is one of the most defining features of React.
3. State and Props:
o State: Each component in React can have its own state, which is an object that holds data that
may change over time. For example, in a sign-up form, the state might track what the user types
in each field.
o Props (Properties): Props allow components to receive data from their parent components,
making them reusable and adaptable to different contexts.
4. Virtual DOM:
React uses a virtual DOM to optimize the performance of web applications. Instead of directly
manipulating the actual DOM (which can be slow), React updates a virtual copy. When changes occur,
React compares the virtual DOM to the real DOM and updates only the parts that have changed, making
the UI more efficient.
5. Hooks:
Hooks are special functions in React that allow you to use state and other React features in functional
components (which are simpler than class components). The most commonly used hooks include
useState for managing state and useEffect for handling side effects like data fetching.

React simplifies the process of building complex, interactive user interfaces by breaking them into smaller,
reusable components. It’s fast, scalable, and easy to maintain. React has become one of the most popular front-
end frameworks due to its performance, flexibility, and large ecosystem of tools and libraries.

These four technologies—HTML, CSS, JavaScript, and React.js—are the foundation of modern front-end web
development. They work together to create websites that are not only visually appealing but also interactive,
responsive, and dynamic. Each plays a unique role in building the user-facing part of web applications.
4o

19
 MongoDB Overview

MongoDB is a popular, open-source NoSQL database management system that stores data
in a flexible, JSON-like format called BSON (Binary JSON). Unlike traditional relational
databases that store data in tables with rows and columns, MongoDB uses a document-based
approach, making it highly scalable and efficient for handling large volumes of unstructured
data. It is widely used in modern web applications because of its flexibility, scalability, and ability
to handle a variety of data types.

Key Features of MongoDB

1. Document-Oriented Storage: MongoDB stores data as documents, which are

similar to JSON objects, and these documents are grouped into collections. Each
document consists of key-value pairs, making MongoDB ideal for handling semi-
structured or unstructured data. Unlike relational databases that enforce strict schema
rules, MongoDB allows flexible schema design, meaning documents within the same
collection can have different structures.
2. Scalability: MongoDB is designed to scale horizontally using a technique called
sharding. Sharding allows MongoDB to distribute data across multiple servers or
clusters, enabling it to handle very large datasets and high throughput. This makes
MongoDB suitable for applications that need to manage growing amounts of data without
significant performance degradation.
3. NoSQL Database: As a NoSQL database, MongoDB doesn't follow the traditional
relational database model (tables, rows, and columns). Instead, it uses collections and
documents, which makes it more adaptable to evolving data structures. NoSQL
databases are often preferred when working with big data, real-time web applications,
and environments where data requirements change frequently.
4. BSON Format: MongoDB uses BSON, a binary representation of JSON-like
documents, to store data. BSON supports more data types than JSON, including Date
and Binary, and allows for indexing and fast querying of documents. BSON’s
compactness and speed make MongoDB efficient when handling large datasets and
complex queries.
5. High Availability: MongoDB ensures high availability and reliability through
replication. It uses replica sets, which are groups of MongoDB servers that maintain the
same data. In a replica set, one server acts as the primary node that handles all write
operations, while other servers act as secondary nodes. If the primary node fails, one of
the secondary nodes is automatically promoted to the primary, ensuring minimal
downtime.
6. Flexible Schema Design: One of the most distinctive features of MongoDB is its
schema flexibility. In relational databases, all records in a table must follow the same
schema (i.e., have the same set of columns). In MongoDB, documents within a collection
can have different fields, allowing developers to store diverse types of data without
needing to conform to a predefined structure. This flexibility is especially useful when
data types and structures evolve over time.
7. Indexing and Querying: MongoDB supports various types of indexes (e.g., single
field, compound, text, geospatial), which help to improve the performance of queries.

20
 Queries in MongoDB are highly flexible, allowing you to search for documents using field
values, range queries, regular expressions, and more. MongoDB also supports
aggregation operations, such as sorting, filtering, and grouping data.

Use Cases for MongoDB

1. Content Management Systems (CMS): MongoDB is well-suited for

content management applications, where the types of content (e.g., articles, blogs, media
files) can vary significantly in structure. The database's flexible schema allows easy
storage and retrieval of varied content types without enforcing a rigid data model.
2. Big Data Applications: MongoDB is commonly used in big data environments,
where the volume, variety, and velocity of data are high. The database's ability to scale
horizontally and handle large datasets makes it a preferred choice for big data storage
and analytics.
3. Real-Time Analytics: MongoDB is ideal for applications that need to process and
analyze data in real-time. The database's high-speed querying, coupled with features like
aggregation pipelines, allows for efficient data analysis on large, constantly changing
datasets.
4. Internet of Things (IoT) Applications: IoT devices generate vast amounts
of data that often vary in structure. MongoDB's flexible schema design, combined with its
ability to scale, makes it a good fit for storing sensor data, logs, and other forms of real-
time data from IoT devices

21
 Node.js Overview

Node.js is a powerful, open-source, cross-platform JavaScript runtime environment that

allows developers to run JavaScript on the server side, outside the browser. was developed
by Ryan Dahl in 2009 and has since become one of the most popular tools for building
server-side applications. Node.js uses the V8 JavaScript engine, which is the same engine
that powers Google Chrome, allowing it to execute JavaScript code with high efficiency and
speed.

1. Asynchronous and Event-Driven: One of Node.js’s standout features is its

asynchronous, non-blocking architecture. In traditional web servers, each incoming
request is processed sequentially, meaning one request has to finish before the next one
can begin. In Node.js, however, requests are handled concurrently. It uses an event-
driven architecture, allowing it to handle multiple requests simultaneously without waiting
for one request to finish before starting another.
2. Single-Threaded Architecture: Node.js operates on a single thread using the
event loop, but it can handle multiple connections simultaneously. This non-blocking,
single-threaded architecture makes Node.js ideal for I/O-heavy applications (e.g., APIs,
real-time chat apps, data streaming) that require high throughput and low latency.
3. Scalability: Node.js can handle a large number of simultaneous connections, making it
highly scalable. Its event-driven model enables it to handle thousands of concurrent
requests efficiently, making it a great choice for applications with high traffic, such as
social media platforms, e-commerce sites, or real-time gaming.
4. Rich Ecosystem (npm): Node.js comes with npm (Node Package Manager), the
largest ecosystem of open-source libraries and tools. npm allows developers to easily
install, share, and manage dependencies, speeding up development by providing access
to thousands of reusable modules for almost any task, such as handling authentication,
connecting to databases, or processing data.
5. Full-Stack JavaScript Development: Node.js allows JavaScript to be used both
on the client-side (in the browser) and on the server-side (via Node.js). This makes it
possible for developers to use a single language throughout the entire stack (front-end
and back-end), streamlining the development process and making full-stack
development more efficient.
6. Built-in Support for JSON: Node.js has excellent support for JSON (JavaScript
Object Notation), making it a natural fit for RESTful APIs and other web services that rely
on data exchange between servers and clients. Its ability to handle JSON efficiently
contributes to its popularity in building APIs.

22
 Use Cases for Node.js

1. Real-Time Applications: Node.js is particularly well-suited for real-time applications,

such as chat apps, live-streaming services, and collaborative platforms (e.g., Google
Docs). Its event-driven, non-blocking nature allows it to handle many concurrent
connections in real time without performance issues.
2. APIs and Microservices: Node.js is commonly used to create APIs and
microservices because it can handle multiple requests and process large amounts of
data efficiently. It allows developers to create lightweight, scalable APIs that can be
integrated into different services or platforms.
3. Single-Page Applications (SPAs): SPAs, which load a single HTML page and
dynamically update the page as the user interacts, benefit from Node.js because of its
ability to handle asynchronous data flow between the client and server.

23
 Express.js Overview
Express.js is a minimal and flexible web application framework for Node.js that simplifies
building server-side applications and APIs. Developed by TJ Holowaychuk, Express.js is
designed to provide developers with a lightweight and modular toolkit for building web
applications, while still offering a range of powerful features for managing routing, middleware,
and HTTP requests. It’s one of the most popular frameworks in the Node.js ecosystem .

Key Features of Express.js

1. Lightweight and Minimalistic: Express.js is often described as "minimalist" because

it provides a basic structure for building web applications without imposing too many
constraints or requiring a steep learning curve. It provides essential features such as
routing and middleware without dictating how an application should be built, leaving
room for flexibility.
2. Routing: Express.js simplifies the management of different URLs (or routes) within an
application. Using routing, developers can define how the server should respond to
different HTTP requests, such as GET, POST, PUT, and DELETE, depending on the
requested URL or API endpoint. For example, a GET request to /users might return a list
of users, while a POST request to /users might add a new user.
3. Middleware: Middleware in Express.js refers to functions that can modify the request
and response objects or perform specific tasks before passing control to the next
function. Middleware can be used for various purposes, such as handling authentication,
logging, or data validation. Express's flexible middleware system allows developers to
create reusable code for tasks like error handling or request parsing.
4. Support for Templating Engines: Express.js supports various templating engines
(such as EJS, Pug, and Handlebars) that allow developers to dynamically generate HTML
pages on the server side. This is particularly useful for rendering pages with user-specific
data or creating reusable components like headers and footers.
5. Integration with Databases: Express.js can easily be integrated with databases,
including MongoDB, MySQL, PostgreSQL, and others. This allows developers to build
full-featured web applications that interact with a database to store and retrieve data.
6. RESTful API Development: Express.js is a popular choice for building RESTful APIs.
Its simple routing and middleware structure make it easy to create APIs that handle
CRUD (Create, Read, Update, Delete) operations. Express’s flexibility makes it easy to
connect with other services or databases, making it a go-to tool for API-driven web
applications.

24
Use Cases for Express.js

1. Building RESTful APIs: Express.js is widely used for creating APIs that allow client-
side applications (like React, Angular, or Vue) to interact with the server. Its simple
routing and middleware system make it easy to define API endpoints for performing
various operations (e.g., reading data from a database or submitting user forms).
2. Single-Page Applications (SPAs): Express.js is often used to serve the back-end
logic for SPAs, where the front-end is handled by frameworks like React or Angular, and
Express.js handles the API endpoints or back-end logic.
3. Web Application Development: Express.js is well-suited for building traditional
multi-page web applications. By integrating with templating engines and middleware,
developers can build server-side rendered web applications where the server generates
HTML dynamically in response to user requests.

Advantages of Node.js and Express.js

1. Fast and Efficient Development: Node.js’s non-blocking architecture, combined

with Express.js’s minimalist design, enables developers to build fast and responsive
applications. They provide tools to handle everything from routing and data handling to
API development, making the development process quicker.
2. Single Language (JavaScript) Across the Stack: Using JavaScript on both the
front end and the back end (thanks to Node.js and Express.js) makes full-stack
development more efficient. Developers can use the same language across the entire
development stack, reducing the learning curve and improving productivity.
3. Large Ecosystem and Community Support: With npm, developers using Node.js
and Express.js have access to thousands of open-source packages and modules. This
vast ecosystem allows developers to quickly integrate new features or solve problems
using well-established libraries.
4. High Performance for I/O-Intensive Applications: Node.js’s event-driven
architecture allows it to excel in applications that require heavy I/O operations, such as
real-time data streaming, chat applications, or APIs that handle large volumes of
requests.

25
 PROJECT
Objective-Build a Website Based on one of the Sustainable Goals
Title- AshaWardrobe

Overview of AshaWardrobe

AshaWardrobe is an online platform created to facilitate the donation of clothes. The project,
developed during an internship, connects individuals who have surplus clothing with those in
need. AshaWardrobe allows users to easily donate clothes they no longer use, while also
enabling charities and individuals to request these donations. The platform aims to promote
sustainability by encouraging the reuse of clothing and reducing textile waste. By creating a
seamless connection between donors and recipients, AshaWardrobe fosters a sense of
community and social responsibility.

Introduction

AshaWardrobe was developed as a part of an internship project with the goal of creating a
meaningful and user-friendly platform for clothes donation. The platform addresses the problem
of unused clothing being discarded while many individuals and organizations lack access to
essential clothing items. The name “Asha” means hope, symbolizing the project’s goal of giving
hope and dignity to those in need by providing them with clothing. The site serves as a bridge
between donors and recipients, simplifying the process of clothes donation and promoting a
circular economy.

Objective

The main objective of AshaWardrobe is to create an efficient system where clothing donations
can easily be made, tracked, and distributed to those in need. Key objectives include:
• Facilitating the Donation Process: Provide an easy-to-use platform for individuals to
donate clothes.
• Reducing Textile Waste: Encourage people to donate clothes instead of discarding
them, contributing to environmental sustainability.
• Supporting Charities and Individuals in Need: Provide a platform where charities,
shelters, and underprivileged individuals can request clothes based on their specific
needs.
• Creating a Community of Givers: Build a network of donors, recipients, and charitable
organizations to promote giving and community support.

26
Scope

AshaWardrobe’s scope extends beyond simple donation transactions. It is a comprehensive

platform designed to:
• Reach a Wide Audience: Target individual donors, community organizations, and
charities.
• Handle Multiple Types of Donations: Support donations of clothes for various
demographics, including children, men, women, and special clothing needs (e.g., winter
clothes, formal attire).
• Allow Custom Donation Requests: Enable recipients (individuals or charities) to specify
the type and condition of clothes they need.
• Provide Efficient Communication: Facilitate communication between donors and
recipients for donation pickups or drop-offs.
• Promote Awareness: Educate users about the environmental and social impact of
clothing donations through blog posts, social media, and newsletters.

Technical Details

AshaWardrobe is a web-based platform built using modern web development technologies to

ensure a smooth user experience. The technical details include:
1. Front-End:
o HTML/CSS/JavaScript: These are used to create the basic structure and design
of the site. The interface is responsive and user-friendly, allowing donors and
recipients to easily navigate the site.
o React.js: The site uses React.js for building the user interface, allowing for
dynamic and fast interactions. React ensures that the platform is highly responsive
and interactive, improving the overall user experience.
2. Back-End:
o Node.js and Express.js: The server-side logic is handled using Node.js, with
Express.js managing the routing and API endpoints. This ensures the platform can
handle multiple users and large amounts of data efficiently.
o MongoDB: The site uses MongoDB as the database to store user information,
donations, and requests. MongoDB’s flexibility allows for the easy storage of
unstructured data such as user profiles and donation details.

3. Security:
o User Authentication: Secure user authentication is implemented to ensure that
both donors and recipients are legitimate. Features like password encryption and
secure sessions are employed to protect user data.
o Data Privacy: The platform follows best practices for data privacy, ensuring that
sensitive information such as user details, donation history, and communication
between users is safeguarded.

27
Features

1. User Registration: Users can sign up as either a donor or recipient. Donors can list the
clothes they wish to donate, while recipients can browse available donations or post
specific requests for items they need.
2. Search and Filter: Recipients can search for specific types of clothing and filter results
by size, gender, or condition, ensuring they find the items that meet their needs.
3. Donation Tracking: Donors can track their donations, from the moment they list an item
to when it is claimed by a recipient. This transparency helps build trust and encourages
continuous engagement.
4. Notifications: Both donors and recipients receive real-time notifications about the status
of donations (e.g., when a donation is claimed or when a request is fulfilled).
5. Request System: Charitable organizations or individuals can create specific requests for
clothes based on their needs (e.g., winter coats for a homeless shelter).

Conclusion

AshaWardrobe is a well-rounded platform developed to promote sustainable and meaningful

clothes donation. With a user-friendly interface, efficient backend, and a focus on community
engagement, the platform not only simplifies the donation process but also helps reduce
clothing waste. By connecting donors and recipients directly, AshaWardrobe makes it easy for
people to give back and support those in need. The project highlights the importance of
technology in solving real-world problems and creating a positive social impact.

28
 Project Snapshots
Home Page

29
30
31
32
Donations

33
 Mongodb Entry

Request Assisstance

34
Mongodb Entry

35
Volunteering

36
Mongodb Entry

Mail Received

37
Responsiveness

38
Github (proof of work)

Commits

39
40
 Weekly Report

Project Title: AshaWardRobe

Duration: 6 Weeks

Prepared By: Antariksh Gupta

Week 1: Completion of HTML Course

• Tasks Completed:

o An online course on HTML.

o Learned about basic HTML structure, elements, and attributes.
o Gained proficiency in creating forms, tables, and lists.
o Practiced by building a Completed simple webpage incorporating various HTML
elements.
• Skills Acquired:

o Understanding of semantic HTML.

o Ability to create well-structured web pages.

Week 2: Completion of CSS Course

• Tasks Completed:

o Finished a comprehensive course on CSS.

o Learned about styling techniques, selectors, and the box model.
o Explored layout techniques including Flexbox and Grid.
o Completed exercises to style existing HTML pages.

41
• Skills Acquired:

o Proficiency in responsive web design.

o Knowledge of animations and transitions in CSS.

Week 3: JavaScript Learning and Plan Completion

• Tasks Completed:

o Completed a JavaScript course focused on fundamentals and advanced concepts.

o Covered topics such as variables, functions, arrays, and objects.
o Developed a learning plan outlining goals and projects to undertake .

• Skills Acquired:

o Ability to write interactive web pages using JavaScript.

o Understanding of DOM manipulation and event handling .

Week 4: React JS and Concept Note Building

• Tasks Completed:

o Completed a course on React JS, focusing on component-based architecture.

o Built simple React applications to practice state management and props.
o Created a concept note outlining the project structure for AshaWardrobe,
including features and user flow.

• Skills Acquired:

o Proficiency in building reusable components.

o Understanding of React hooks and lifecycle methods.

42
 Week 5: Final Deliverable

• Tasks Completed:
•
o Integrated all learned technologies (HTML, CSS, JavaScript, React) to create the
AshaWardrobe website.
o Conducted testing to ensure functionality and usability.

o Prepared project documentation outlining features, setup instructions, and user

guide.

• Skills Acquired:

o Experience in full-stack development workflow.

o Enhanced problem-solving skills through project development.

Week 6: Project Submission

• Tasks Completed:

o Finalized the AshaWardrobe project, ensuring all features were working as

intended.
o Submitted the project for review along with the documentation.
o Received feedback from peers and mentors.

• Skills Acquired:

o Understanding of the project submission process.

o Ability to present and defend work effectively.

43
 Learning After Training

What I Learned During and After the Training

Embarking on this training program has been an enlightening journey filled with knowledge,
practical skills, and personal growth. Over the course of five weeks, I delved into various aspects
of web development, gaining expertise in essential technologies such as HTML, CSS, JavaScript,
and React. This structured learning experience not only equipped me with technical skills but also
helped me understand the nuances of the web development process, from conception to
deployment.

Week 1: HTML Fundamentals

The training began with an intensive HTML course, which laid the groundwork for my web
development knowledge. I learned the basic structure of HTML documents and how to create a
well-organized webpage. This included understanding elements such as headings, paragraphs,
links, images, and lists.
One of the key takeaways from this week was the importance of semantic HTML. I learned how
to use HTML elements to enhance accessibility and improve SEO. For instance, using <header>,
<footer>, and <article> tags correctly can make a webpage more comprehensible to both users
and search engines. I also got hands-on experience by creating a simple webpage, which
reinforced my learning and allowed me to experiment with different HTML tags and attributes.

Week 2: Styling with CSS

Building on the foundation established in the first week, the second week focused on CSS, which
is crucial for designing visually appealing websites. I learned about various styling techniques,
including the use of selectors, properties, and values to control the appearance of HTML
elements.
A significant part of my learning was devoted to understanding the box model, which is
fundamental to CSS layout. I discovered how margins, borders, padding, and content interact to
create the spacing and structure of web pages. Additionally, I explored advanced layout
techniques such as Flexbox and CSS Grid, which allowed me to create responsive designs that
adapt to different screen sizes.
By the end of this week, I had a solid understanding of how to apply styles to HTML elements,
and I completed several exercises that involved styling existing webpages. This experience not
only enhanced my technical skills but also ignited my creativity as I learned to bring my design
ideas to life.

44
Week 3: JavaScript and Learning Plan Completion

The third week marked a pivotal moment in my training as I ventured into JavaScript, a powerful
scripting language that adds interactivity to web pages. I learned about essential JavaScript
concepts, including variables, data types, functions, loops, and arrays. Understanding these
fundamentals was crucial, as they form the backbone of all programming in JavaScript.
I also took the opportunity to create a learning plan that outlined my goals for the training. This
plan helped me stay organized and focused on my objectives, ensuring I made the most of my
time. I practiced writing simple scripts to manipulate the Document Object Model (DOM), enabling
me to change the content and structure of web pages dynamically. This newfound skill made the
web pages more interactive and engaging for users.

Week 4: Diving into React JS

With a solid foundation in HTML, CSS, and JavaScript, I progressed to learning React JS, a
popular JavaScript library for building user interfaces. This week was particularly exciting as I
discovered the component-based architecture of React, which promotes reusability and
maintainability in code.
I learned how to create functional components and manage state using hooks, which simplified
the process of handling dynamic data in applications. Additionally, I explored React’s lifecycle
methods, which allowed me to understand how components are mounted, updated, and
unmounted within the application.
As part of my training, I began building simple React applications, which reinforced my
understanding of the concepts. Creating a project in React was a rewarding experience, as I could
see my code transform into a functional and interactive user interface.

Week 5: Final Deliverable and Project Submission

In the final week of training, I focused on integrating all the technologies I had learned into a
cohesive project: AshaWardrobe. This platform was designed to facilitate clothing donations,
and it served as a practical application of my skills.
I consolidated my knowledge of HTML, CSS, JavaScript, and React to develop a fully functional
website. This involved creating user interfaces, handling user inputs, and managing data flow
between components. I also worked on implementing features such as user registration, donation
listings, and request systems.
Preparing the final deliverable was both challenging and rewarding. It required thorough testing
to ensure that all features worked correctly and that the website provided a seamless user
experience. Additionally, I compiled project documentation that outlined the site’s features, setup
instructions, and user guides, enhancing my ability to communicate technical details effectively.

45
Reflection and Future Directions

Beyond the technical skills, this training has instilled in me a sense of confidence and a passion
for web development. I have learned the importance of continuous learning and adaptability in
this fast-evolving field. Each week presented new challenges, but with each challenge came an
opportunity to grow and refine my skills.
The training has also made me more aware of the significance of building user-centric
applications. Understanding the needs of users and creating intuitive interfaces is essential for
the success of any web project.
Moving forward, I am excited to continue exploring advanced topics in web development, such
as server-side programming, databases, and deployment strategies. I also aim to contribute to
open-source projects and collaborate with other developers to further enhance my skills and
experience.
In conclusion, this training has been an invaluable experience that equipped me with both the
technical skills and the mindset necessary for a successful career in web development. I look
forward to applying what I have learned in real-world projects and continuing my journey in this
dynamic field.

46
 References

• https://www.mongodb.com/cloud/atlas
• https://www.w3schools.com/
• https://stackoverflow.com/
• https://developer.mozilla.org/en-US/
• https://www.flaticon.com/
• https://www.npmjs.com/
• https://imagecolorpicker.com/en

47