Affinidi-Shopping-Cart

added product category invoice added products footer user profile check if logged in to show profile icon

Table of Contents

1. Introduction
2. Setup for Developers
   • 2.1Account in Affinidi Vault
   • 2.2 Clone the repo
   • 2.3 Initialize
3. New features
   • 3.1 User Dashboard
   • 3.2 Product Category
   • 3.3 Invoice generator
   • 3.4 Footer

1. Introduction

Affinidi plays a transformative role in the development of the decentralized identity ecosystem by reshaping digital identioty management within today's digital landscape. Being at the forefront of this change, Affinidi is driven by a vision to redefine how digital identities are managed and shared online through innovative solutions. By empowering individuals to take control of their digital identities and enabling businesses to leverage consumer data for personalized experiences while prioritizing privacy, Affinidi addresses the challenges posed by fragmented digital identities controlled by third-party or centralized providers. Through its tools, Affinidi enhances trust in digital interactions and adheres to global data protection standards, contributing to a more secure and user-centric digital identity landscape. Highlighted products such as Affinidi Login and Affinidi Vault exemplify the company's innovative approach to digital identity management, marking its crucial role in shaping the future of online identity authentication and privacy preservation.

Affinidi Shopping Cart is a web application that utilizes the Affinidi Login service. It is a simple web application that allows users to login using their Affinidi Vault's credentials, add products to cart and checkout.

2. Setup for Developers

For developers who wish to test the application locally, here are the prerequisites and steps to get started.

2.1 Account in Affinidi Vault

To be able to use the login product, you will need to have an account in Affinidi Vault.

Install and create

Refer to this link to install Affinidi Vault on your local machine. It comes as a browser extension. You will then follow prompts that will allow you create and an account.

Browser Support

Firefox is not supported and so it is adviced to use Chrome browser to install Affinidi Vault.

2.2 Clone and install

Navigate to your directory of choice and clone the repository using the following command. Ensure to have git installed in your system.

git clone https://github.com/codegrann/Affinidi-Shopping-Cart.git

Then run the following commands to install the dependencies.

npm install

Once again navigate to the server-app directory and run the same command above.

2.3 Initialize

Inside the server-app directory, run

npm start

to start the server.

Also within the root folder, run the same command above to start the application on your localhost.

3. Added Features

Some of the features I added to the eccomerce application are discused below.

3.1 User Dashboard

There is an improvement to the site by introducing a user dashboard where each user can view their persoal info, offered by their vault credentials. Before a user logs in, the dashboard will not be visible and the link to the dashboard will also not be displyed. One will only be prompted to login.

After being logged in, an user icon appears in the header which redirects to the dashboard.

When one navigates to the dashboard, they will be greeted with the interface below, where a user can only view their personal info but not able edit.

3.2 Product Category

I was able to implement a product category feature in the application which could help a user filter out products according to their preferences. The filter lies at the top of the page for ease of accessibility.

I added more products to be able to demonstrate the feature, with each product having its category type. To be on point, my application has only to categories of products, "furniture" and "dressing". Products will be displayed depending on the filter triggered.

All products

Dressing category

Furniture category

One can move back and forth between the categories by clicking on the filter button.

3.3 Invoice generator

It is a good practice to have the user get a copy of all the items they have ordered on the go. I implemented a invoice generator which generates and downloads a pdf file of the items the user has ordered, the price and quantity of each item together with the total price purchase. This is triggered in the cart page before one checks out.

Clicking the Generate Invoice button triggers a function that checks for the cart content and generate a pdf containing items details.

The pdf is locally stored in the user's device and can be opened in any pdf reader.

One can thereafter go to checkout and make the purchase.

3.4 Footer

One of good practices in web development is giving users easy access to quick links even after scrolling to the bottom of the page. I included dummy links to social media accounts and a list of services offered.

Summary

Apart from the vault, Affinidi also has a product, the Affinidi Portal. Affinidi Portal is an interactive interface enabling developers to manage resources like Projects and Login Configurations to integrate Affinidi Login into their application. Developers can view the billing and analytics, including tracking the usage of the services. Visit the Affinidi docs to learn how to get started with a project in the portal.

Hope you have learnt from the reading and enjoyed the cool features I added to the application. Thank you.