EcommerceStore – Angular, Node.js, TypeScript, Stripe

This is a modern, full-stack eCommerce web application built with Angular 18.20 ( with Angular CLI version 18.2.3), Node.js, TypeScript, and Stripe (for payment processing) features a fully functional shopping cart, product browsing, and checkout experience.

• This web app allows users to browse products across various categories, explore detailed item descriptions, and easily add items to their shopping cart.
• Users can manage their cart by adding, reducing, or deleting items, with the option to continue shopping or proceed to checkout.
• The checkout process is seamlessly integrated with the Stripe API, ensuring a secure and smooth payment experience. Store owners can also configure shipping and delivery services during checkout.

The UI is structured using Angular Material and Tailwind CSSto design a responsive, clean UI. This project integrates the Fake Store API (https://fakestoreapi.com/) as the data source for products, including categories, descriptions, prices, and images.

Process Overview:

• Home Page:
  • Users browse and filter products.
  • Add items to the cart and adjust the number of products displayed per page.
• Cart Page:
  • View added items, update quantities, and remove items.
  • The total price is updated automatically based on the items in the cart.
• Checkout:
  • When ready, users can proceed to the Stripe-powered checkout, where they enter payment details, and the cart total is processed securely.

Home Page:

Displays products with pagination options for 12, 24, or 36 items per page.

Users can adjust the number of columns for product display. Product cards include an "Add to Cart" button with dynamic category, description, and price data.

Cart Page: Shows all items added to the cart with options to change the quantity or remove items.

Automatically recalculates the total price as items are modified.

Provides navigation back to the home page for continued shopping.

Checkout Page with Stripe Integration:

• Users can proceed to checkout, where they are redirected to the Stripe-hosted payment page.
• The Stripe page displays the selected products and calculates the total price, including shipping fees.
• After payment, Stripe returns a session ID to the backend, which is then handled by the server.

this web app followed this tutorial: https://www.youtube.com/watch?v=Kbauf9IgsC4

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.