Angular Shopping Store: From Scratch to Successful Payment
()
About this ebook
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.
Abdelfattah Ragab
Abdelfattah Ragab is an experienced software developer with over 20 years of experience in the field. In his long career, he has specialized in various aspects of web development, especially front-end technologies. He is known for his expertise in frameworks such as Angular and React, as well as his knowledge of HTML5 and CSS. Abdelfattah is also a successful author who has written several books for beginners and experienced developers. His works include titles such as "Responsive Layouts: Flex, Grid & Multi-Column" and "Angular Shopping Store"," which provide a comprehensive insight into modern web development practices. These books cover not only basic concepts but also advanced techniques, making them valuable resources for anyone looking to improve their skills in web technologies. With his publications, Abdelfattah aims to bridge the gap between theoretical knowledge and practical application. His books often include practical projects, such as developing e-commerce applications and integrating payment systems like Stripe, which help readers gain real-world experience. This approach reflects his commitment to providing his readers with a deeper understanding of web development. In addition to his writing, Abdelfattah works as a front-end lead, which allows him to stay up to date on industry trends and best practices.
Read more from Abdelfattah Ragab
CSS Multi-Column Layout Rating: 0 out of 5 stars0 ratingsAngular Workshop: From Beginner to Pro, Creating Applications for the Real World Rating: 0 out of 5 stars0 ratingsAngular Observables and Promises: A Practical Guide to Asynchronous Programming Rating: 0 out of 5 stars0 ratingsAngular Performance Optimization: Everything you need to know Rating: 0 out of 5 stars0 ratingsCSS Grid Layout Rating: 0 out of 5 stars0 ratingsCSS Selectors and Specificity Rating: 0 out of 5 stars0 ratingsAngular for Kids: Start Your Coding Adventure Rating: 0 out of 5 stars0 ratingsJavaScript for Kids: Start Your Coding Adventure Rating: 0 out of 5 stars0 ratingsReact Portfolio App Development: Increase your online presence and create your personal brand Rating: 0 out of 5 stars0 ratingsAngular Reactive Forms: Everything you need to know Rating: 0 out of 5 stars0 ratingsAngular Generative AI: Building an intelligent CV enhancer with Google Gemini Rating: 0 out of 5 stars0 ratingsResponsive Design: All CSS responsive features Rating: 0 out of 5 stars0 ratingsCSS Box Model and Layouts Rating: 0 out of 5 stars0 ratingsShrova Mall: A-to-Z e-commerce full-stack application Rating: 0 out of 5 stars0 ratingsNgRx SignalStore: An effortless solution for state management Rating: 0 out of 5 stars0 ratingsCSS Typography and Web Fonts Rating: 0 out of 5 stars0 ratingsFirebase Storage for Angular: A reliable file upload solution for your applications Rating: 0 out of 5 stars0 ratingsResponsive Design: All CSS responsive features Rating: 0 out of 5 stars0 ratingsCSS Flexbox Layout Rating: 0 out of 5 stars0 ratingsAngular HTTP: Connecting to the REST API Rating: 0 out of 5 stars0 ratingsStripe Integration in Angular: A Step-by-Step Guide to Creating Payment Functionality Rating: 0 out of 5 stars0 ratingsAngular for Beginners: Everything you need to know Rating: 0 out of 5 stars0 ratingsResponsive Layouts: Flex, Grid & Multi-Column Rating: 0 out of 5 stars0 ratingsAngular Portfolio App Development: Create your personal brand Rating: 0 out of 5 stars0 ratingsShippo Integration in Angular: A Step-by-Step Guide to Creating Shipping Functionality Rating: 0 out of 5 stars0 ratingsAngular Routing: Everything you need to know Rating: 0 out of 5 stars0 ratings
Related to Angular Shopping Store
Related ebooks
Angular Portfolio App Development: Create your personal brand Rating: 0 out of 5 stars0 ratingsObject Oriented Programming with Angular: Build and Deploy Your Web Application Using Angular with Ease ( English Edition) Rating: 0 out of 5 stars0 ratingsMastering MEAN Stack: Build full stack applications using MongoDB, Express.js, Angular, and Node.js (English Edition) Rating: 0 out of 5 stars0 ratingsAngular Routing: Everything you need to know Rating: 0 out of 5 stars0 ratingsResponsive Design: All CSS responsive features Rating: 0 out of 5 stars0 ratingsAngular for Beginners: Everything you need to know Rating: 0 out of 5 stars0 ratingsDesigning Next Generation Web Projects with CSS3 Rating: 0 out of 5 stars0 ratingsBootstrap for ASP.NET MVC - Second Edition Rating: 5 out of 5 stars5/5React Portfolio App Development: Increase your online presence and create your personal brand Rating: 0 out of 5 stars0 ratingsModern JavaScript Applications Rating: 0 out of 5 stars0 ratingsLearn Angular: Build a Todo App Rating: 0 out of 5 stars0 ratingsExt JS Application Development Blueprints Rating: 0 out of 5 stars0 ratingsShrova Mall: A-to-Z e-commerce full-stack application Rating: 0 out of 5 stars0 ratingsAngular Design Patterns and Best Practices: Create scalable and adaptable applications that grow to meet evolving user needs Rating: 0 out of 5 stars0 ratingsPractical Programming 6 in 1: Python Machine Learning, JavaScript, React 17, And Angular With Typescript Rating: 0 out of 5 stars0 ratingsMastering Sass Rating: 0 out of 5 stars0 ratingsWeb Development Essentials: A Beginner's Guide to HTML, CSS, JavaScript, and SEO: HTML 101 : Beginner to pro Rating: 0 out of 5 stars0 ratingsHTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site Rating: 4 out of 5 stars4/5Practical HTML and CSS: Elevate your internet presence by creating modern and high-performance websites for the web Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4 Rating: 5 out of 5 stars5/5Getting Started with Bootstrap 3.2 Rating: 0 out of 5 stars0 ratingsMastering KnockoutJS Rating: 0 out of 5 stars0 ratingsGetting Started with nopCommerce Rating: 0 out of 5 stars0 ratingsAngular for Enterprise Applications: Build scalable Angular apps using the minimalist Router-first architecture Rating: 0 out of 5 stars0 ratingsOpenCart Theme and Module Development Rating: 0 out of 5 stars0 ratingsStep-by-Step Angular Routing: Learn To Create client-side and Single Page Apps with Routing and Navigation Rating: 0 out of 5 stars0 ratingsResponsive Web Design With Html 5 & Css Rating: 0 out of 5 stars0 ratingsDeep Inside osCommerce: The Cookbook Rating: 0 out of 5 stars0 ratingsReact Design Patterns and Best Practices Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5Build a WordPress Website From Scratch 2024: WordPress 2024 Rating: 0 out of 5 stars0 ratingsHTML, CSS, & JavaScript All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsUX/UI Design Playbook Rating: 4 out of 5 stars4/5Canva Tips and Tricks Beyond The Limits Rating: 3 out of 5 stars3/5Notion for Beginners: Notion for Work, Play, and Productivity Rating: 4 out of 5 stars4/5Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 4 out of 5 stars4/5CISM Certified Information Security Manager Study Guide Rating: 4 out of 5 stars4/5WordPress For Dummies Rating: 0 out of 5 stars0 ratingsREMOTE ACCESS VPN- SSL VPN: A deep dive into SSL VPN from basic Rating: 5 out of 5 stars5/5The Jeremy Fragrance Story: Power, Baby! Rating: 0 out of 5 stars0 ratingsThe Gothic Novel Collection Rating: 5 out of 5 stars5/5JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5Learn PHP in 24 Hours Rating: 0 out of 5 stars0 ratingsGet Started in UX: The Complete Guide to Launching a Career in User Experience Design Rating: 4 out of 5 stars4/5Principles of Web Design Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 4 out of 5 stars4/5Vue.js: 11 Practical Projects Rating: 0 out of 5 stars0 ratingsHow to Master Visual Communication and Marketing on Instagram Rating: 5 out of 5 stars5/5React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360 Rating: 0 out of 5 stars0 ratingsDjango Design Patterns and Best Practices Rating: 5 out of 5 stars5/5Get Into UX: A foolproof guide to getting your first user experience job Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5RESTful API Design - Best Practices in API Design with REST: API-University Series, #3 Rating: 5 out of 5 stars5/5
Reviews for Angular Shopping Store
0 ratings0 reviews
Book preview
Angular Shopping Store - 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
Chapter 2: Angular Project Structure
2.1 Pages
Checkout will be done on Stripe
2.2 Layout
2.3 Home Page Layout
2.4 Cart Page Layout
On desktop
On mobile