39,99 €
Mehr erfahren.
- Herausgeber: tredition
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Welcome to the book "Shrova Mall: A-to-Z e-commerce full-stack application". In this book, I explain how you can create a full-stack e-commerce application using Angular and NestJS. The application provides payment and shipping functionalities by integrating Stripe for payments and Shippo for shipping. To begin, I will show you the application we are going to build and then start by creating the database. Next, I will explain the backend and finally the frontend application. By the end of this book, you will be able to create your online e-commerce store and cover all possible scenarios. Let's get started.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 65
Veröffentlichungsjahr: 2024
Ähnliche
Shrova Mall
A-to-Z e-commerce full-stack application
Abdelfattah Ragab
Source code
The source code is available on the book's website
https://books.abdelfattah-ragab.com
Introduction
Welcome to the book "Shrova Mall: A-to-Z e-commerce full-stack application". In this book, I explain how you can create a full-stack e-commerce application using Angular and NestJS.
The application provides payment and shipping functionalities by integrating Stripe for payments and Shippo for shipping.
To begin, I will show you the application we are going to build and then start by creating the database. Next, I will explain the backend and finally the frontend application.
By the end of this book, you will be able to create your online e-commerce store and cover all possible scenarios.
Let’s get started.
Screenshots
I will start by showing some screenshots of the application to understand what we are about to build.
The homepage
You should improve your styling and include more promotional staff on the homepage, but I'll leave that up to you.
The admin sidenav
The manage products page
This page is only for administrators to manage products.
The add product page
The store settings page
The store details are used as the shipping address when sending products to customers
The register page
The login page
The forget password page
The reset password page
The about page
The contact page
The policies pages
You should add policy pages for:
Depending on your needs, you can add all or some of them.
The profile page
The profile/address page
The profile/address add page
The product details page
The category page
The search/filter page
The cart page
The shipping page
The summary page
The payment page
During development, we use a test key from Stripe, which we replace with the live key as soon as we are finished. This way you can test the full cycle with payments without paying real money until you go live. To go live, you simply use the live key instead of the test key.
The success page
The cancel page
The my orders page
The application is fully responsive and also works on the desktop.
User scenarios
Almost all of us are familiar with online shopping and we place many online orders from time to time.
We are familiar with the process and it is the same for almost all online stores.
Usually you visit the store's website and search for the product, add it to your shopping cart, enter the shipping details and pay online.
You can view your order history and track the delivery of your shipment.
Since you are the owner of the store this time, I have added more pages to manage products and store details.
Our store will have all the features you find in all the big stores in the world.
You will need to add more promotional components to your store to make it more attractive to customers, but I'll leave that up to you. I will mainly focus on the core features like authentication, product management, shipping, payments and so on.
The application is fully optimized for mobile devices and desktops.
To make it even clearer, I'll explain how we can use the application for different scenarios.
Admin
A typical use case for the admin includes the following steps
Register new user
The first thing the user encounters when visiting the website is the homepage.
At the top right is the “Sign Up” button, which takes the user to the registration page.
By filling in the required data and clicking on “Sign Up”, the user has now created a new user in the system.
Login
New users are automatically logged in, and the refresh token remains active for a period of 7 days, after which it expires and prompts the user to log in again. Would it be better to use a shorter period for security reasons? Sure. The 7 days is the period of the refresh token, not the access token. The lifetime of the access token is 5 minutes, which means that a new access token is issued every five minutes based on the 7-day refresh token. Requests are automatically processed with new tokens and repeated without user intervention to ensure a seamless user experience with best-in-class security metrics.
After successful login, the shopping cart icon is displayed in the top right corner. You may want to change this behavior and allow guests to add products to the cart and delay logging in until they proceed to checkout. I found this unnecessary as they can't complete orders without logging in, so I started asking them to register only when they want to buy products. You can agree to this or not.
To make a user an admin, you must set the isAdmin flag to true in the database. There is no option in the application to make a user an admin.
After you have set it as admin in the database, you must log out of the application and log in again so that the application is loaded as admin.
Store settings
The first thing you should do as an admin is to make the store settings. Go to the "Store settings" page in the side menu and enter the details of the store.
You will need to enter the name and address of the store. The store address is important because it will be used as the address for shipping products and calculating shipping costs for your customers' orders.
Manage products
Now let’s add some products to our new store. Go to the “Manage products" page via the side menu.
Here you can edit products and add new ones. Click on the “+Add” button to add new products.
Add new product
Let’s add a new product
These are the most common scenarios for administrators, now let’s look at the common scenarios for normal users.
User
A typical use case for the admin includes the following steps
Register new user
The same registration process applies to users. Go to the registration page by clicking on the “Sign Up" button at the top right.
Forgot password
Users can change their password at any time by selecting “Forgot password” on the login page.
If you click on the “Forgot password" button, you will be redirected to a page where you can enter your email address.
If you click on the “Reset password” button, an email will be sent to the email address provided containing a link to the "Reset password" page where you can enter your new password.
It may end up in the spam folder, so check that too.
The email looks like this and the “Reset password" link has a token embedded and here is the full link in the email
https://shrovamall.com/reset-password?token=a90c4b8800615137.badf178d385e12d32e41dd1760ca964a09480c0c27170cb3b2f25ac2200209d6&[email protected]
When you submit a new password, a token is appended to the request, the same token that was sent to the email. It is compared to the token that was stored in the user table in the database when he started the password reset process. It must match within the specified time period of one hour, otherwise it will be rejected.
Fill your profile
You can change your first name and surname on your profile page.
The other important part of the profile page is the Addresses tab, where you can enter your billing and shipping address.
You can add as many addresses as you like and specify which one should be used by default for shipping and invoicing.
The default shipping address is automatically used to fill in the shipping details when purchasing new products.
Now, it is time for shopping.
Products on the homepage
All stores have products on the homepage, and we are no exception, so I have added some products to the homepage for users to buy.
In your store you will do better, but for development this is enough and we can live with it.
