Industrial Training Report

FolkFindz
Submitted In partial fulfillment of the

Requirement of the award of

Degree of Bachelor of Technology in Information Technology

Submitted By

Name: Akshit Hooda

University Roll No: 02496402721

Submitted To:
Department of Computer Science and Engineering
Maharaja Agrasen Institute of Technology

GGSIPU, Delhi
CERTIFICATE

2
 DECLARATION

I hereby declare that the internship report entitled "FolkFindz" is an authentic record
of my own work as requirements of 4 weeks internship during the period from
August 10, 2024 to September 10, 2024 for the award of Bachelor's Degree in
Information Technology, GGSIPU, under the guidance of Mr. Ashish khanna.

Akshit Hooda

02496402721

Date: 28/09/2024

3
 ACKNOWLEDGEMENT

The successful completion of this course report would not have been possible without
the support and assistance of many individuals and organizations. I have learnt a lot
of new concepts and things during the completion of this course. I would like to take
this opportunity to offer my earnest admiration to each and every one of them.

First and foremost, I am highly indebted to Mr. Ashish khanna, who has taught the
projects with utmost dedication and preciseness. I had a wonderful and unforgettable
experience learning new things.

Then, I would like to thanks my teachers who decided and encouraged me to engage
in some useful stuff like this course in this break to enhance my skillset.

Finally, my thanks and appreciations go to each and every one of my colleagues who
irrespective of the situation, always encouraged and supported me to prepare this
report.

Akshit Hooda

(02496402721)

4
 Table of Content

PAGE.
S. No CONTENT
NO

1. About the Platform 8-10

1.1 Introduction 8

1.2 Mission and Vision 8

1.3 Origin 8

2. About the Internship 9-10

2.1 Description 9

CHAPTER

1. Introduction 11-12

1.1 Introduction 11

1.2 Objective 11

1.3 Motivation 12

2. Tools & Technologies Used 13-23

2.1 Languages and frameworks used 13-21

2.2 Software's used 21-23

5
3 Technical Content 24-25

4. Project Structure 26-29

4.1 File Structure 26-27

4.2 Website Features 27-29

5. Snapshots 30-35

6. Results and Discussions 36-37

7. Conclusion and Future Scope 38

8. Learning After Training 39-40

9. References 41

6
S.No Name of Figure Page No.
Table
1 Fig 1. User Authentication 30 of

2 Fig 2. Client View 30

3 Fig 3. All Products Page 31

4 Fig 4: Product Description Page 31

5 Fig 5: Add to Cart Page 32

6 Fig 6. Checkout Page 32

7 Fig 7: Payment Gateway 33

8 Fig 8 : Admin View 33

9 Fig 9: Update Product Page 34

10 Fig 10: Add New Product Page 34

11 Fig 11: Orders Page 35

Figures

7
 ABOUT THE PLATFORM
CODSOFT

8
1.1 Introduction:

CodSoft are IT services and IT consultancy that specializes in creating innovative

solutions for businesses. We are passionate about technology and believe in the
power of software to transform the world. Our internship program is just one of the
ways in which we are investing in the future of the industry.

At CodSoft, we believe practical knowledge is the key to success in the tech industry.
Our aim is to help students lacking basic skills by offering hands-on learning through
live projects and real-world examples. Our team consists of industry experts who are
dedicated to equipping interns with the knowledge and skills needed to succeed in
their careers. We foster an inclusive and supportive environment that encourages
learning, growth, and creativity.

1.2 Mission and Vision:

● Software development is an iterative process, and the mission includes continually

improving software solutions. This entails gathering feedback, identifying areas
for enhancement, and implementing updates to make the software more efficient,
user-friendly, and reliable. Continuous improvement also involves staying up to
date with the latest technologies, tools, and industry trends.
● The vision of software development is to create innovative solutions that push the
boundaries of technology. This involves leveraging emerging technologies,
exploring new ideas, and developing software that brings novel approaches to
solving problems and improving the lives of users.

ABOUT THE INTERNSHIP

2.1 Description:
This Web Development course is without a doubt the most comprehensive web
development course available online. Even if you have zero programming
experience, this course will take you from beginner to mastery. Here's why:

● The course provides an in-depth exploration of web development,

encompassing front-end and back-end technologies like HTML, CSS,
JavaScript, server-side programming, and databases.

9
 ● Students engage in practical projects, building real web applications. This
practical experience is invaluable for applying theoretical knowledge and
building a strong portfolio.
● The course is taught by seasoned experts in web development who offer
personalized guidance. This mentorship ensures that students can overcome
challenges and gain a deep understanding of the subject matter.
● In addition to technical skills, the course focuses on job readiness. Students
receive training on interview preparation, resume writing, and effective
communication, equipping them for success in the competitive tech job
market.
● The curriculum is regularly updated to reflect the latest industry standards and
trends, ensuring that students learn relevant and up-to-date skills.
● PrepInsta Prime's Full Stack Web Development Course offers flexible learning
options, making it accessible to those with busy schedules. Students can learn
at their own pace and on their terms, accommodating diverse learning needs.

Throughout this comprehensive course, we cover a massive amount of tools and

technologies, including:

● Front-End Web Development

● HTML5
● CSS3
● Javascript ES6
● DOM Manipulation
● Git, GitHub and Version Control
● Backend Web Development
● Node.js
● Express.js
● RESTful API
● APIs
● DBMS
● MongoDB
● Mongoose
● React.js
● Next.js
● Web Design

10
 1. INTRODUCTION
1.1 Introduction:
During my summer break after 2 nd year of my graduation, I have completed this
internship, which included a project on Web Development.

11
I have completed this internship under Mr. Prabh Singh. This internship was started
on August 10, 2023 and ended September 10, 2023, summing up to the durations of 4
weeks.

During the internship, I was working on the project entitled "FolkFindz" which is an
e-commerce website and the website is made using HTML, CSS, Tailwind CSS
JavaScript, React.js, Next.js, Node.js, Express.js, MongoDB, and APIs. This website
is a complete full stack project with modern, interactive and responsive design.

1.2 Objective:
● The main objective of the project is to expose students with the real-world work
environment and to provide them the industrial experience.
● Project is created so as to explain the concepts that has been learnt under the
supervision of the instructor.
● To get familiarize with the concepts of front-end development and to implement
them in the real life.
● Helping student to learn new skills such as HTML, CSS, Tailwind CSS,
JavaScript, React.js, Next.js, Node.js, Express.js, MongoDB, APIs etc.
● Creating a development environment in the society.
● Helping students to implement the concepts that they have learnt.
● Teaching them about the responsive design of the websites.
● Helping students to work on the modern and advanced design patterns and
structures of the websites.

1.3 Motivation:
After thinking the idea of the project and creating the basic framework for it, main
task was to explore new and cool features to add in the website to make it look more
attractive and wiser. So, for that I surfed a lot of websites and watched a lot of videos
to incorporate those cool features in my project.

E-learning is a subset of education technology which offers an online learning and

teaching platform to disperse knowledge with the help of internet technology. E-
12
learning offers conceptual and experimental learning through machines, media
platforms and network solutions. E-learning takes place both inside and outside of the
classrooms. As, CODSOFT is one of the most reputable E-learning platforms, at first,
I came to know about the course through LinkedIn. But later after researching further
I got its complete details. Being impressed by the objectives and content of the
course, I decided to choose this course.

2. TOOLS AND TECHNOLOGY USED

2.1 Languages and frameworks used:

The Web and HTML:
World Wide Web (WWW) programming deals with the development of hypertext
document interaction mechanisms, which provide the client with a rich and intuitive
13
interface to the information that he or she desires to view. Web development heavily
utilizes the functionality of the Hypertext Markup Language, commonly known as
HTML. HTML is a simple scripting language that is interpreted within a web
browser. It provides functionality to identify and specify how information is
presented to the user. Some of the important features of HTML that make it ideal for
online representation of information are –

● Ease of Use – HTML constructs are very easy to comprehend and can be used
effectively by anybody.

● Machine Independence – The methodology used by HTML to markup

information is independent of its representation on a hardware or software
architecture.

● Standardization – HTML syntax is a worldwide standard, developed by the

W3C

● Flexible – HTML has been extended in many forms to provide additional

functionality.

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
● Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
● As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web browser
how to structure it to display.

CSS:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs, variations in display for different devices and
screen sizes as well as a variety of other effects.
14
CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
A CSS comprises of style rules that are interpreted by the browser
and then applied to the corresponding elements in your document.
A style rule is made of three parts −
● Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
● Property - A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could
be color, border etc.
● Value - Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.
Three Ways to Insert CSS:

● External style sheet

● Internal style sheet
● Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by
changing just one file! Each page must include a reference to the external style sheet
file inside the <link> element. The <link > element goes inside the <head> section:

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
Inline Styles
An inline style may be used to apply a unique style for a single element.

15
To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

Tailwind CSS:
Tailwind CSS is a popular utility-first CSS framework that streamlines web
development by providing a set of pre-designed classes for building responsive and
customizable user interfaces. Unlike traditional CSS frameworks, Tailwind doesn't
rely on custom CSS rules but rather encourages the use of utility classes directly in
the HTML markup. This approach offers developers a more efficient and
maintainable way to style web applications.

Tailwind's extensive class library covers everything from typography and layout to
color and spacing, making it easy to create consistent, attractive designs. With its
configuration system, developers can also customize the framework to suit specific
project requirements. Thanks to its flexibility, efficiency, and active community,
Tailwind CSS has become a favored choice for web developers looking to streamline
their workflow and create modern, responsive web applications.

JavaScript:
Java script is one of the most simple, versatile and effective languages used to extend
functionality in websites. Uses range from on screen visual effects to processing and
calculating data on web pages with ease as well as extended functionality to websites
using third party scripts among several other handy features, however it possesses
some negative effects that might make you want to think twice before implementing
JavaScript on your website.

Advantages:

● JavaScript is executed on client side

this means that the code is executed on the user's processor instead of the web
server thus saving bandwidth and strain on the web server.

● JavaScript is relatively easy language

The JavaScript language is relatively easy to learn and comprises of syntax that
is close to English. It uses the DOM model that provides plenty of prewritten

16
 functionality to the various objects on pages making it a breeze to develop a
script to solve a custom purpose.
● JavaScript is relatively fast to end users
As the code is executed on the user's computer, results and processing is
completed almost instantly depending on the task as it does not need to be
processed in the site's web server and sent back to the user consuming local as
well as server bandwidth.
● Extended functionality to web pages
Third party add-ons like Grease monkey enable JavaScript developers to write
snippets of JavaScript which can execute on desired web pages to extend its
functionality. If you use a website and require a certain feature to be included,
you can write it yourself and use an add-on like grease monkey to implement it
on the web page.

Node.js

Node.js is an open-source, cross-platform, JavaScript runtime environment. It

executes JavaScript code outside of a browser. For more information on using
Node.js, see the Node.js Website. The Node.js project uses an open governance
model. The OpenJS Foundation provides support for the project. This project is
bound by a Code of Conduct.

A common task for a web server can be to open a file on the server and return the
content to the client.

Here is how Node.js handles a file request:

● Sends the task to the computer's file system.
● Ready to handle the next request.
● When the file system has opened and read the file, the server returns the
content to the client.
● Node.js eliminates the waiting, and simply continues with the next request.

Node.js runs single-threaded, non-blocking, asynchronously programming, which is

very memory efficient.

17
Advantages of Using Node.js

● The ability to scale up quickly — Each of the nodes in Node.js is based

around an “event.” A customer buys an in-app purchase, or sends an email to
customer service, for instance.
● Speed and Performance — Its non-blocking, input-output operations make
the environment one of the speediest options available. Code runs quickly, and
that enhances the entire run-time environment.
● Flexibility — In a discussion of Node.js pros and cons programming flexibility
is perhaps the biggest benefit of all. When you make a change in Node.js, only
that node is affected.
● Efficient caching — In a debate over the pros and cons of Node.js, caching
always comes up as a key Node.js benefit. It has a powerful ability to cache
data.

Express.js

Express is the most popular Node web framework, and is the underlying library for a
number of other popular Node web frameworks. It provides mechanisms to:

● Write handlers for requests with different HTTP verbs at different URL paths
(routes).
● Integrate with "view" rendering engines in order to generate responses by
inserting data into templates.
● Set common web application settings like the port to use for connecting, and
the location of templates that are used for rendering the response.
● Add additional request processing "middleware" at any point within the request
handling pipeline.
While Express itself is fairly minimalist, developers have created compatible
middleware packages to address almost any web development problem. There are
libraries to work with cookies, sessions, user logins, URL parameters, POST data,
security headers, and many more.

Advantages of Express.js

1. Makes Node.js web application development fast and easy.

18
 2. Easy to configure and customize.
3. Allows you to define routes of your application based on HTTP methods and
URLs.
4. Includes various middleware modules which you can use to perform additional
tasks on request and response.
5. Easy to integrate with different template engines like Jade, Vash, EJS etc.
6. Allows you to define an error handling middleware.
7. Easy to serve static files and resources of your application.
8. Allows you to create REST API server.
9. Easy to connect with databases such as MongoDB, Redis, MySQL

APIs

Application Programming Interfaces (APIs) are constructs made available in

programming languages to allow developers to create complex functionality more
easily. They abstract more complex code away from you, providing some easier
syntax to use in its place.

As a real-world example, think about the electricity supply in your house, apartment,
or other dwellings. If you want to use an appliance in your house, you plug it into a
plug socket and it works. You don't try to wire it directly into the power supply — to
do so would be really inefficient and, if you are not an electrician, difficult and
dangerous to attempt.

They generally fall into two categories:

● Browser APIs are built into your web browser and are able to expose data
from the browser and surrounding computer environment and do useful
complex things with it. For example, the Web Audio API provides JavaScript
constructs for manipulating audio in the browser — taking an audio track,
altering its volume, applying effects to it, etc. In the background, the browser is
actually using some complex lower-level code (e.g. C++ or Rust) to do the
actual audio processing. But again, this complexity is abstracted away from
you by the API.
● Third-party APIs are not built into the browser by default, and you generally
have to retrieve their code and information from somewhere on the Web. For
example, the Twitter API allows you to do things like displaying your latest
tweets on your website. It provides a special set of constructs you can use to
query the Twitter service and return specific information.

19
In particular, the most common categories of browser APIs you'll use (and which
we'll cover in this module in greater detail) are:
● APIs for manipulating documents
● APIs that fetch data from the server
● APIs for drawing and manipulating graphics
● Audio and Video APIs

Databases

A database is a storing system that collects organized data, to make some works
easier like searching, structure, and extend.

In web development, most databases use the relational database management system
(RDBMS) to organize data and programming in SQL. Some databases, however,
don't follow the former mechanism to organized data, which called NoSQL.

Some famous server-side RDBMS are MySQL(or MariaDB which is a fork of it),
SQL Server, and Oracle Database. On the other hand, some famous NoSQL
examples are MongoDB, Cassandra, and Redis.

What are databases used for?

Businesses use data stored in databases to make informed business decisions. Some
of the ways organizations use databases include the following:

● Improve business processes. Companies collect data about business processes,

such sales, order processing and customer service. They analyze that data to
improve these processes, expand their business and grow revenue.
● Keep track of customers. Databases often store information about people, such as
customers or users. For example, social media platforms use databases to store
user information, such as names, email addresses and user behavior. The data is
used to recommend content to users and improve the user experience.
● Secure personal health information. Healthcare providers use databases to
securely store personal health data to inform and improve patient care.
● Store personal data. Databases can also be used to store personal information.
For example, personal cloud storage is available for individual users to store
media, such as photos, in a managed cloud.

20
MongoDB
MongoDB is an open-source document database and leading NoSQL database.
MongoDB is written in C++. This tutorial will give you great understanding on MongoDB
concepts needed to create and deploy a highly scalable and performance-oriented
database.

Advantages of MongoDB over RDBMS

● Schema less − MongoDB is a document database in which one collection holds

different documents. Number of fields, content and size of the document can differ
from one document to another.

● Structure of a single object is clear.

● No complex joins.

● Deep query-ability. MongoDB supports dynamic queries on documents using a

document-based query language that's nearly as powerful as SQL.

● Uses internal memory for storing the (windowed) working set, enabling faster
access of data.

Why Use MongoDB?

● Document Oriented Storage − Data is stored in the form of JSON style documents.

● Index on any attribute

● Replication and high availability

● Auto-Sharding

● Rich queries

● Fast in-place updates

● Professional support by MongoDB

Git Version Control System

A version control system is a software that tracks changes to a file or set of files over
time so that you can recall specific versions later. It also allows you to work together
with other programmers.

21
The version control system is a collection of software tools that help a team to
manage changes in a source code. It uses a special kind of database to keep track of
every modification to the code.

Developers can compare earlier versions of the code with an older version to fix the
mistakes.

React.js
React makes it painless to create interactive UIs. Design simple views for each state
in your application, and React will efficiently update and render just the right
components when your data changes.

Declarative views make your code more predictable and easier to debug.
React components implement a render() method that takes input data and returns
what to display. This example uses an XML-like syntax called JSX. Input data that is
passed into the component can be accessed by render() via this.props.

Next.js
Next.js is a powerful and versatile framework for building web applications. It is a
popular choice for developers due to its impressive features and flexibility. Next.js
simplifies the development process by offering server-side rendering, static site
generation, and client-side rendering in a single framework, making it suitable for a
wide range of projects.

One key feature of Next.js is its automatic code splitting, which optimizes
performance by loading only the necessary JavaScript for each page. It also supports
hot module replacement, making development and debugging smoother. SEO-
friendly server-side rendering enhances search engine visibility, while easy
integration with popular libraries and tools like React, and CSS-in-JS empowers
developers to create modern and responsive applications efficiently.

Whether you're building a small website, a complex e-commerce platform, or a

progressive web app, Next.js is a valuable tool for enhancing your project's
performance, SEO, and developer experience.

22
2.2 Software's Used:
Visual Studio Code:

Visual Studio Code is a lightweight but powerful source code editor which runs on
your desktop and is available for Windows, macOS and Linux. It comes with built-in
support for JavaScript and Node.js and has a rich ecosystem of extensions for other
languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and
Unity).

Postman:

Postman is an API platform for building and using APIs. Postman simplifies each
step of the API lifecycle and streamlines collaboration so you can create better APIs
—faster.

● API Tools
A comprehensive set of tools that help accelerate the API Lifecycle - from
design, testing, documentation, and mocking to discovery.

● API Repository
Easily store, iterate and collaborate around all your API artifacts on one central
platform used across teams.

Command line:

The command line is a text interface for your computer. It’s a program that takes in
commands, which it passes on to the computer’s operating system to run.

From the command line, you can navigate through files and folders on your
computer, just as you would with Windows Explorer on Windows or Finder on Mac
OS. The difference is that the command line is fully text-based.
23
Chrome:

Chrome is the name of the Web browser developed by Google Inc., that appeals to
many users as it combines a minimal design with sophisticated technology to make
the Web faster, safer and easier to browse. Google Chrome was first released in
September, 2008, for Windows, and later ported to Mac, Linux, iOS and Android
devices. Chrome acts as a tester software for the website. Along with this, chrome's
extension such as color picker, developer tools, etc., helped quite a lot in the
development of the project.

24
 3. TECHNICAL CONTENT
During the internship period, my main job is to learn about the course content which
is full stack development including the HTML, CSS, Tailwind CSS, Next.js etc
technologies and to practically implement these concepts. So, to implement it
practically, I have to develop a project based on these things, which is a E-commerce
Website.

:- Setting up the things

So, my work is that for the creation of project, I have to first think about the project
structure and basic needs and necessities of the project like what are the basic
functions which a E-commerce Website has, for example: login/signup or
authentication, order products , create a product , products page, payment gateway,
etc.

:- Ordering the content

After thinking about all these basic requirements, I have to figure out the design of
the website that is, where should I view the products, how to add a payment gateway,
create a product, etc.

:- Designing phase

After that, look of the website is created, which means what color combination will
suits the website, design of the buttons and icons, what extra things to be included to
make site look better.

:- Folder Structuring

Than folder structure is created, which means that proper locations to the files are
assigned like CSS files will be placed in different folder, JavaScript files will be
placed in the different folder, Tailwind files in the different folders. This is done
because it is easy and fast to sort things out if proper order of the files and folders is
maintained.

:- Code and Documenting

25
After creating proper folder structure, the main and longest task has to be performed
that is of coding. In this, all the files which we have created in the project, whether
HTML file, CSS file or JavaScript files are coded, and along with the coding proper
documentation of code is also done, so that it becomes easy for developer to read and
make changes to code in the future. Documentation of the code enhances the
readability of the code.

:- Minimal Changes

After all these steps, at last small changes which needed to be incorporate are done, to
enhance the user experience and to add more beauty to the project. These include
minor UI changes, functionality changes, etc.

26
 4. PROJECT STRUCTURE

Briefing about my project, my project is a Threads web app which covers full stack
development. Project title is "Threads". Using this prototype customers can virtually
use the product before purchasing. This will give them a real world experience of
how the watch and its features work.

4.1 File Structure:

Project consists of a number of files and directories:

app directory:

The "app" folder in your Next.js project seems to serve as a central directory for your
application's core components and backend functionalities. It's a common practice to
organize pages, layout files, controllers, and backend logic in a dedicated "app"
directory. This structured approach helps keep your project organized and maintains a
clear separation of concerns, making it easier to develop and maintain your Next.js
application.

components directory

The "components" folder in a Next.js project typically contains component files.

These components are reusable building blocks of your application's user interface.
By organizing them in a dedicated "components" directory, you maintain a structured
and modular approach to your project, making it easier to manage and reuse UI
elements throughout your application.

public directory

The "public" folder in a Next.js project serves as a repository for project assets. This
includes images, fonts, and other static files that need to be publicly accessible.
Placing assets in the "public" folder ensures they can be directly referenced in your

27
components and pages, making them accessible to users without the need for server-
side processing.

services directory:

The "services" folder typically contains utility functions, API calls, or server-side
logic that provide various services to the application. These services can include data
fetching, authentication, or other backend functionality crucial for the app's
functionality, helping maintain a clean project structure.

middleware directory:

The "middleware" folder typically contains custom server-side middleware functions.

These functions can be used to handle requests and responses before they reach the
route handlers, allowing developers to implement authentication, logging, or other
custom logic. Middleware enhances the app's functionality and improves request
processing.

controllers directory:

The "controllers" folder typically contains JavaScript files or modules that define
server-side logic for handling specific routes or API endpoints. These controllers are
responsible for processing incoming requests, performing actions, and generating
responses, helping to organize and manage the application's server-side functionality
effectively.

4.2 Website features:

4.2.1 Login/Signup/User Authentication

The app ensures the security and privacy of user data through a robust authentication
system. New users can easily register by creating an account, while existing users can
log in to access their personalized experience. User authentication is a fundamental
feature that not only safeguards personal information but also enables users to
establish their unique identities within the app.
28
4.2.2 Home Page

On the homepage of a clothing e-commerce website, the virtual storefront showcases

a wide range of fashion items, from apparel to accessories. It emphasizes user-
friendly design, easy navigation, key categories, featured items, and search options.
High-quality visuals, compelling CTAs, and clear branding elements create a
welcoming and informative entry point for online shoppers.

4.2.3 Categories

The categories feature on a website is a vital organizational tool, simplifying the

browsing experience. It classifies products into distinct groups, such as clothing
types, styles, or occasions. This feature streamlines navigation, helping shoppers
quickly locate their desired items. Well-organized categories enhance user
satisfaction and increase the website's usability.

4.2.4 Create Product Page

The product page is the heart of any e-commerce website, meticulously designed to
showcase individual items. It includes high-resolution images, detailed descriptions,
pricing, and sizing information. User-friendly features like reviews, product
variations, and easy-to-use shopping carts make the page a crucial tool in the
conversion process, guiding customers toward their purchase.

4.2.5 Cart Page

The cart page on an e-commerce website is a pivotal stage of the shopping journey. It
collects selected items for purchase, displays a summary, and calculates the total cost.
Users can review, modify, or remove items before proceeding to checkout. It plays a
crucial role in finalizing the buying process and making the shopping experience
efficient and convenient.

4.2.6 Checkout Page

The checkout page on an e-commerce website is the crucial final step in the shopping
journey. It summarizes selected items, displays the total cost, and provides payment
and shipping options. Shoppers enter personal information and complete the
29
transaction. A seamless and user-friendly checkout process is essential for customer
satisfaction and conversion.

4.2.7 Payment Gateway

A payment gateway is a critical component of e-commerce websites, facilitating

secure online transactions. It encrypts sensitive financial data, allowing customers to
make purchases with confidence. By offering various payment options, such as credit
cards, digital wallets, and more, it caters to diverse customer preferences, ensuring a
seamless and trustworthy checkout process.

30
 5. SNAPSHOTS

Fig 1. User Authentication

Fig 2. Client View

31
 Fig 3. All Products Page

Fig 4: Product Description Page

32
Fig 5: Add to Cart Page

Fig 6. Checkout Page

33
Fig 7: Payment Gateway

Fig 8 : Admin View

34
 Fig 9: Update Product Page

Fig 10: Add New Product Page

35
Fig 11: Orders Page

36
 6. RESULTS AND DISCUSSIONS

Finally, the web development internship and the project "FolkFindz" has completed
and report of the project is also completed. Here, to summing up, I have completed
my summer training after 3rd year of my graduation from a popular and well reputed
online E-learning platform, CODSOFT on the full stack development of the website.
Along with this I have to create a working project on the same domain.

About the course, it consists of some popular languages and frameworks for the front-
end web development, which are HTML, CSS, Tailwind CSS, Next.js and back-end
development Node.js, Express.js, MongoDB and APIs.

Along with this it also consists of some utilities for web development like chrome
extensions and developer tools and also some small level projects as well. I have
learnt all the concepts of front-end and back-end web development under the
supervision of instructor Mr.Prabh Singh.

It was a great experience working under the supervision of him, he has completely
covered my concepts relating the topic and have developed enough confidence in me
to work on this field whenever or wherever possible.

About the project, project consists of a website having front-end and back-end techs.
This website is constructed using the technologies which I have learnt in the course
which are HTML, CSS, Tailwind CSS, Next.js, Node.js, Express.js, MongoDB and
APIs and uses Google Chrome for testing the website during development phase.

The home page navigates to all other pages like contact page and pricing page, it also
contains the link to test the smart watch section.

Threads’ main page contains the clock and a switcher to get access to other
features.Other features contains of few apps like Interacting with products, viewing
products, creating a new product, cross-platform compatibility.

About the training report, this report consists of a Word file and a PPT. file, which
clearly depicts my working during the whole course of the project and course, it
consists the details about my course, instructor, duration of the course and also
consists the details about my working project that is which technologies, I have used,
37
how they are implemented, file structure of the project, website structure etc. and
screenshots of my project. It also consists of my personal record and my self-
evaluation report.

38
 7. CONCLUSION AND FUTURE SCOPE

E-learning is a subset of education technology which offers an online learning and

teaching platform to disperse knowledge with the help of internet technology. E-
learning offers conceptual and experimental learning through machines, media
platforms and network solutions. E-learning takes place both inside and outside of
the classrooms. E-learning solution consists of both instructor-led synchronous
learning tools as well self-paced asynchronous style e-learning platforms. E-learning
has gained tremendous importance because of the several competitive advantages in
a number of areas like accessibility, inclusiveness, flexibility, technology and
convenience.

Advantages of e-learning:

Home based e-learning is also trending above regular classroom teaching for the sake
of convenience, comfort and savings it offers in terms of space, pace, money and
time. Instead of attending regular classroom lectures, e-learning websites allow
students to learn from the comfort of their own home, library, or anywhere else with a
PC/Mobile/Tablet/Laptop and a working internet connection. The study content of
various grades can be easily accessed by the student in the format of e-books, online
study guides and stepwise solution manuals, e-mail exchange with online tutors, live
chat with online tutors, downloadable videos, prerecorded lectures, audio study
guides and pre-loaded content on controlled Tablet devices.

FUTURE SCOPE

Especially if I don't have any experience, finding work can be a real challenge. A
successful internship can help me turn an experience into a career opportunity. So
as a successful internship my future scopes will be:
● To work in an IT company
● To work as a Software Engineer
● To work as a Web Designer
● To work as a Web Developer
● To solve real life challenging problems
● Can work on the government programs for the help of public.
39
 9. Learning after training

A course is a learning experience of its own kind. The importance it has got over the
years in building one’s career is not exaggerated; given what it has to give back.

Neither is it spoon-fed school learning, nor pressure filled workload. And in between,
you not only learn the basics of work life but also the soft skills required for a
brighter professional career.

1. New Skill

The first reason behind going for a course is learning new skills and work to sharpen
your existence skills. I think that I was completely able to do so. I worked on some
new technologies like HTML, CSS, Tailwind CSS, Next.js and many more.

2.Problem Solving Skills

What real-life problems have you solved till now other than to decide what to wear
the next day and how to dodge the upcoming assignment deadline? A training
introduces you to real-life work problems and hence develops your problem-solving
skills.

3. Work Ethics

You won’t really learn about work ethics until you are in a tangible work
environment. In college education, we are used to making excuses for late
submissions and what not! But it is only when we are introduced to the actual
environment that we learn work ethics.

4. Adaptability Skills
40
Not everyone is adaptable from the beginning. In fact, you can refuse to be so even
during your internship experiences but the loss is yours. Being adaptive to your
surroundings easily is one of the most useful soft skills not only desirable to
employers but also important to your self-growth. So, make the most of your
internship experiences and learn some adaptability skills while you are there.

5. Communication Skills

Talking of soft skills, can the importance of communication skills be ever put into
words? It’s one of the top listed skills that recruiters look for in a resume and
something that can get you from bottom to top. Communicating well is a gem of a
skill which you can learn during your internship experiences.

6. Responsibility

Often missed out in the list of soft skills, being responsible is an integral skill
required in the job arena. Your internship experience makes you more responsible
and accountable for what decisions you make and how you execute what’s been
allocated to you.

7. Time Management
Last on our list, but still as important as the others, is time management. Earlier, you
could just miss a class because you had some personal commitments. During an
internship which is almost the beginning of your work life, you can’t mark your
absence on a regular basis.

Hence, it helps you learn to manage your time better by maintaining a balance
between your work and personal life, without harming any of them

41
 10. References

● https://www.w3schools.com/
● https://v2.tailwindcss.com/docs
● https://stackoverflow.com/
● https://developer.mozilla.org/en-US/
● https://nextjs.org/docs
● https://www.mongodb.com/cloud/atlas

42