Angular Shopping Store E-Book

Abdelfattah Ragab

• Herausgeber: tredition
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 31

Veröffentlichungsjahr: 2024

Beschreibung

In this book, you'll learn how to create an online shopping store using the Angular framework. To get your store up and running, you need more than Angular. You need a backend, a database, payment and shipping gateways and much more. This book is only about the frontend part. The goal of this book is to show you in detail how to create the frontend part of your online store. You will create everything from scratch and end up with a complete frontend shopping store. To make things even more interesting, I've created a small Nodejs application to help you with Stripe payments so you can sell items in your store. However, in reality, you need to use webhooks to make sure the money has landed in your Stripe account before you release the product to the customer. All these details are part of full-stack development. Also in this book, we will focus only on the front-end part of the application to strengthen your Angular skills and prepare you for full-stack projects.

Leseprobe

Angular Shopping Store

From Scratch to Successful Payment

Abdelfattah Ragab

Introduction

Welcome to the "Angular Shopping Store".

In this book, I explain how to create an online shopping store using the Angular framework.

To get your store up and running, you need more than Angular.

You need a backend, a database, payment and shipping gateways and much more.

This book is only about the frontend part.

We will create everything from scratch and end up with a complete frontend store.

To make things even more interesting, I have created a small Nodejs application that will help you with Stripe payments so you can sell items in your store.

However, in reality, you need to use webhooks to make sure the money has landed in your Stripe account before you release the product to the customer.

All of these details are part of full-stack development.

In this book, I focus only on the front-end part of the application to strengthen your Angular skills and prepare you for full-stack projects.

By the end of this book, you will be confident working with Angular and ready to work on full-stack projects.

Let us get started.

Source code

The source code is available on the authors' website

https://books.abdelfattah-ragab.com

Chapter 1: Preview

1.1 Desktop Preview

1.2 Mobile Preview

1.3 Application Flow

1.4 Projects

● Angular Project

● Node Project

Chapter 2: Angular Project Structure

2.1 Pages

● Home Page

● Cart Page

● Success Page

● Cancel Page

Checkout will be done on Stripe

2.2 Layout

2.3 Home Page Layout

2.4 Cart Page Layout

On desktop

On mobile

2.5 Project Folder Structure

src

├── app/

│ ├── data

│ ├── layout/

│ │ ├── footer

│ │ └── top-bar

│ ├── pages/

│ │ ├── cancel

│ │ ├── cart/

│ │ │ └── components/

│ │ │ ├── cart-item-card

│ │ │ └── quantity-stepper

│ │ ├── home/

│ │ │ └── components/

│ │ │ ├── btn-continue

│ │ │ ├── deals

│ │ │ ├── popular-products

│ │ │ └── product-card

│ │ └── success

│ ├── pipes

│ └── services

├── assets/

│ ├── icons

│ └── images

└── environment

2.6 Development Steps

This is how we will proceed:

First I will create the Angular application

Next I will create the layout of the application

Create the top bar

and next Create the footer

Create the home page

Create the deals component

Create the products component

Create the product-card component

Create the Cart Service

Update the products component

Update the top bar component

Create the Cart Page

Create the cart items component

Create the cart-item-card component

Create the quantity-stepper component

Create the total component

Create the Node.js application

Create the Success page

Create the btn-continue component

Create the Cancel page

Chapter 3: Create the Angular Application

3.1 Create the Angular Application

Execute the command

ng new shopping-store

Once done, open the application in Visual Studio Code

3.2 Preparatory Steps

Copy the assets from the attached project to the assets folder in the new project.

You can download the source code from the book page on the author's website.

Change the application title in the index.html file to “Shopping Store”

<title>Shopping Store</title>

Set the favorite icon of the project to use the logo.png from the images folder

<link rel="icon" type="image/png" href="assets/images/logo.png">

Add the global styles to the styles.css file

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

html,

body {

min-height: 100%;

background-color: var(--text-color);

color: rgba(0, 0, 0, 0.7);

}

body {

font-family: Arial, Helvetica, sans-serif;

}

.link:hover {

filter: brightness(1.1);

}

:root {

--main-color: #2196f3;

--accent-color: #ff4081;

--text-color: #ffffff;

--footer-color: #42a5f5;

--search-input-height: 40px;

}

.shadow {

box-shadow: 0 0.0625rem 0.125rem 0.0625rem #00000026;

}