Introduction: -

In this project, I developed Fashion Web-APP using Angular. Angular is a

framework based on TypeScript. Here I used Angular because Angular is a framework
of TypeScript and TypeScript is a free open-source high-level programming language.
TypeScript is OOPs based high-level programming language which is why we can use
interesting OOPs features in our project and build an amazing Single Page Application
also called Web-APP. Angular latest version is 15 and we used the latest version of
Angular for our Web-APP. Angular is very useful for making Single Page Application's
front-end modules. Single Page Application means JavaScript changes DOM
(Document Object Model) means it changes HTML code during runtime. And that is
why we cannot see the refresh page every time we interact with our Web-APP
because Angular is not reached out to the server for every page load instead it loaded
data in the background and JavaScript will change every DOM as the user want.

The application is a Men's fashion Application. Prepose of building this

application is to provide ease to the Business owner that is running a small fashion
business. Using this application business owners can put his/her business product on
the Internet so that anyone can interact with the application using any device that
has an Internet connection because it is Web-APP. This application will provide
Business owners with functionality like create-product, read-product, update-
product, and delete-product. The business owner can do all these operations very
efficiently so which will provide easiness to the business owner to run the business.
Users can sign-up for this application by providing its details and able to login into this
application after that users can finally able to shop in this application and place the
order also.

There are some prerequisites to understanding this report with better understanding.
 HTML (Hyper Text Markup Language) For App Structure
 CSS (Cascading Style Sheet) For Styling
 TypeScript (Primary Programming Language for Angular Web-APP
Development) For App Logic
LEARNING OUTCOMES:

Here is the list of Technical Skills that I acquired during my

internship:

o Web-Development
o HTML Programming Language
o CSS
o Bootstrap (CSS framework)
o JavaScript
o Angular (A JavaScript Framework for Front-end
Development)
o TypeScript (Primary Programming Language for Angular)

CONTRIBUTIONS:

o Build Single-Page-Application
o Build Fashion Web Application on Angular
(TypeScript framework) that is build and managed
by Google.
o Used JSON server for back-end part of the
application.
Project Setup:
 First, we need Angular CLI that will help to automate many development
tasks that are required to build our Web-APP. CLI also helps to heavily
optimize our code when we finally deploy our application to the browser.
And it also converts TypeScript code to JavaScript code because browsers
only understand JavaScript language. We can install Angular CLI globally
(so that we cannot install it every time we create a new angular Web-
APP) by following the command:

 After that, we can create our Angular-APP using the following command:

 Here we are using routing in our Application, Router will provide to move
from one view of the application to another view so to navigate between
the different views in our Web-APP we need Router. Every view has its
component or wise versa every component has its view.
 For styling our Web-APP pages we are using CSS.
 Here we have to modify our app component HTML template so that we
can use Router in our application and we are ready with our application
setup.
 We also install Bootstrap in our application to easily style our web pages.
Command: ng add @ng-bootstrap/ng-bootstrap
Document the Requirements:

 Requirements Gathered:

o The seller can log in to Web-APP

o Creation and management of product by the seller
(All CRUD operations on a product can be done by
the Seller)
o The seller filters the product to make CRUD
operation easier
o Users can Sign-up into Web-APP
o Users can log in to Web-APP
o Single Page Application (Primary Goal)
o User can shop
o User Places the order
o The user has a cart and can add and remove the
product from the cart
Project Work-flow:
Let's start with Components are the primary key feature of Angular and
we also called them a basic building block of our Angular application. In this
application, we are going to build many different components and then finally
we can compose our application using these components. At first, when we are
creating our Angular app in the project setup, we have one root component
also called the app component which holds our entire application. So, this root
component will be the component where we later nest or add the other
components that we are going to build in this project (we can also call it the
basic building block of our application).

Why components are needed and why it's very useful when we build
complex web applications? It gives us the functionality to slit up our complex
web app into reusable parts and we can use these components more than once
in different places on the web pages. The component has its logic so we also
don't have to write business logic again when we are reusing that component.
Components have their own styling and HTML template so that we also don't
have to again write the code.

 Header Component:

Let's start with creating a Header component we can create the

component in our application using the following command:
After running this command, we get the following files in our project:

Here header.component.css file will contain styling for that component,

the header.component.html file will contain the HTML template, and all the
business logic of the header component will hold in the header.component.ts
file.

Our header component will contain a side navigation button, business

branding, a search bar, and a menu bar. Here menu bar will change dynamically
according to different scenarios if the user has a login, then the menu bar will
for the user, and the same will change for seller and no-user login.

Business Logic for the header: so, to dynamically change the menu bar in
the header we have to use the Router module. For understanding more about
modules, you can check this reference: Modules. Using the router module we
can get the current URL of our Web-Application and according to Web-URL, we
change our menu bar. For that, we ``have to take one variable called
menuBarSwitch which is a string type variable and this variable will have
different values according to different scenarios if the user login into the
application, then we will assign the menuBarSwitch variable to 'user'. To find
whether the user login into the application or not we have to check local
storage and find if is there any data of the user. To find whether we are in the
seller section of our web application we can check our current Web-APP URL
and if the URL has a value of seller, then we assign menuBarSwitch to 'seller'.
And if none of these conditions is true then we assign the variable to 'default'.
After successfully assigning a variable value, we can use the ngSwitch directive
to hide or show html template code depending on a variable value.
 User Component:

Now let's move to the User component. The user component will
contain a user login and sign-up page. And template of the component will
contain a login and sign-up form and the user can log in or sign-up by filling this
form. Here we are going to use Angular FormsModule to retrieve the data from
the form and after that, we can store this data in the back end for User
authentication. After the user successfully login into the application we can
store our local Cart data in the User Cart using the following logic: so first we
can get our local Cart data from local storage and then we are going to store
this data in the user Cart. We will also discuss how we can store product data in
Cart for both scenarios whether User login or without User login. But first, let's
discuss how User authentication can be done using the service. Use this
reference to understand what is service in Angular: Service. We can generate
service in our Angular application using the following command:

After generating a user service, we can create a User Signup service in

our user service. This function has data as input parameter (data of user details
like name, email, and password) and we can now store this data using
HttpClientModule in the back-end using the post method.

This is a snippet for the User sign-up function and after successfully
storing the data we can navigate to the home page using a router.
 User Login Service: This function has data as input parameter and using
this data we can request to get this data using HttpClientModule Get method.
And if data is present in back end, then we get some result from the Get
method. And if result has value of true and has some length then user login
authentication is success and now, we store this result in local storage for the
reference of whether user is login or not.

This is a snippet for the User login service function and after successfully
storing the data in the local storage we can navigate to the home page using a
router. Same authentication for seller login is used in this web application.

 Add-to-Cart Component:

Add-to-Cart component is complex and very important component we

can say because we used so much business logic for this component and its
also very interesting feature of our web application. A user can add the product
into cart from product details page. First, we have made some condition for
add the product into the cart. So, a user can not add the product before
choosing the size of the product. After selecting the size, Add-to-Cart button is
now enabled and we used event binding in this button for add the product into
the cart.

So, to add the product into cart we have two scenarios: first is with user
login and second is without user login. Let’s first discussed without user login
scenario. So, if user is not login in the application, we store the product that we
want to add into the cart in the local storage. Following is snippet for store the
product in the local storage: The function has one input parameter that we
passed in event binding of add-to-cart button.

Second scenario: with user login. So, if user is login in the application,
then we can store add-to-cart product in the user cart in the back end so that
user can access its cart from any device by login in the application. For storing
the product into user cart, we used product service. Following is the snippet for
UseraddToCart service:

In the product service we have one event emitter to store current user’s
cart data so that if we want details of the current user cart we don’t have to
reach every time to the server and get the Cart-list of the current user. This
event emitter will assign the data every time when user login into the
application. So, when user login in the application we request the cart data of
that user using following snippet and then we assign this data to event emitter
that has name CartData. Following is the snippet for get the cart data of the
current user:
 Here input parameter data is the user id of current user and we ca find
this id from local storage where we stored the user details after successfully
user login in the application.

 Seller Guard:

Guard in the Angular will control the accessibility of a route. We can control
accessibility of route based on different condition using guard. In our
application we implemented seller guard to control seller route. If seller has
not login in the application, then we can access seller login route but after the
login it’s not ideal to have access to seller login route. For this problem we used
guard and after the seller login in the application we denied the access of seller
login route using guard.

 Seller CRUD Operations:

Seller can do all the CRUD operations in the application. To perform these
operations in the application we used following product service:

Create Product operation: to create or add new product in the

application we have to create add-product component. In the template of this
component, we create one form that will have fields of all the details of
product and using NgFormModule we can get the data related to product that
seller filled in this form. After that we will use AddProductservice in ngSubmit
 to add the product data in the back-end. Seller can perform other CRUD
operation using different product service that mentioned above.

 Product Details Component:

In the back end of our application, every product has their own product
id. So, to open the product detail page we used router link. We assign routing
path for the product detail component as path: 'product/:Productid'. Here
Productid is unique for every product so we can used Productid to get the
complete details of that product. We used getProductservice of product service
for retrieve the data of product. Following is the snippet for getProductservice:

Here input parameter data is the product id. And After getting all the
details of the product using this service we display all the data of product in the
product details page.

 Back-end:

For the back-end part of the application we used JSON server. It is not an
ideal to use JSON server for the back-end part in the web development. But in
this project our primary focus on front-end not the back-end so we don’t spend
to much time in the back-end part. JSON server is the fake API that we can use
to test the web-application but its not good practice to use JSON server. When
we finally deploy the application to Internet JSON server can not handle big
data and it is very slow to handle big task.
 Acknowledgement:

I would like to acknowledgement that the entire work that is required to

complete this whole project was done by me and no one is participate in the
work to build this project. I would also thank my mentor Mr. for his time and
efforts provided throughout this Internship. He also gives me some advice and
suggestions were really helpful to me during the project’s completion

 Conclusion:
According to Statista Angular is top-rated web application frame work to
develop frontend. Angular is one of the industry's leaders in web construction
platforms. It is a framework significantly designed for companies and developer
to develop single page very big complex application. Angular CLI makes your
life easier. We can create more modular application with Angular easily. Our
primary goal of this project is to build single page application and Angular has
this ability. These are the reason why we used Angular to developed this
application. Of course, JSON server is not a good idea to use but we can push
further and make our API faster and more reliable using Angular's HTTP Client
and In-Memory-Web-API service.

 Abstract:
This document is a model and instructions for Single Page Web
Application. In this report we discussed all the necessary steps that are
required to build this Web Application. For development we used Angular
(TypeScript framework). We also discussed all the business logic that are used
in this Web Application. Angular is used to develop more modular and more
complex Web Application. This application is for store seller that run offline
 fashion business and wants to run online business also. This application shall
enable all the CRUD operation for seller to perform on the business product for
makes the business task easier.

 Bugs fixing:
In the development of this application, we faced some of the bugs. But
there is one major bug. Let’s discussed how we fixed this bug. So, the bug is
that when a user login in the application we checked whether there is any data
in local Cart and if found we transfer this data from local Cart to user Cart. But
if any product that is already in the user Cart, then we get the duplicate item
found after user login in. So to solve this bug we request a current user Cart
data before transfer the local Cart data to User Cart and then we filter the data
that is already in User cart from the local Cart and after applying filter we
transferred the local Cart data to User Cart. Following is the snippet for fix this
bug: