Build a Complete Real World ECommerce App with .NET MAUI

Create an Azure SQL Database, configure a server with admin credentials, set firewall rules including allow Azure services, adjust the pricing tier, and publish the web app to Azure.

Publish a REST API to Azure by configuring Azure SQL connection strings in appsettings.json and program.cs, then deploy with a publish profile and test with Postman.

Explore api endpoints using the apa documentation file in Postman, import the file, and browse the watch store apa collection covering users, categories, products, shopping cart items, and orders.

Test register and login endpoints in Postman, using a shared Azure web app URL, sending JSON payloads, and obtaining an access token to access secured API endpoints.

Explore shopping cart endpoints to add, get, update, and remove items using postman; pass user id, product id, and quantity; observe 201 created and changes to quantity and total amount.

Master the orders endpoint by placing an order with a post request using address and user id, then retrieve your orders and inspect details by order id.

Set up a .NET MAUI project by creating a .NET MAUI app in Visual Studio on Windows, name it watch store application, and select .NET 10 as the target framework.

Download and unzip the provided assets, then place them into the MAUI project's resources/images folder to load visuals in the dotnmobi app.

Add custom fonts to the dot-and-maui project by placing fonts in resources/fonts and registering them in maui program.cs with an alias; remove entry borders on all platforms with maui handlers.

Install the .mavi.connectivitybanner plugin for a net maui ecommerce app to detect connectivity. Add its namespace, place the banner in a grid, and observe offline and online banners.

Create C# model classes for user authentication by mapping register and login json data from postman, including a token response, in a net maui project.

Create category and product model classes for a real world ecommerce app by generating C# properties from JSON data at the categories and products endpoints.

Develop model classes for shopping cart and orders—shopping cart, shopping cart item, order, order item, and order detail—and connect them to Postman endpoints for add, get, and place actions.

Build a clean, reusable api client foundation in .NET MAUI with a central http client to handle rest api calls (get, post, put, delete) and avoid header and token duplication.

Create a central api client in a services folder, reuse a static http client with a base url from appSettings, and implement getAsync, postAsync, putAsync, and deleteAsync with json serialization.

Create the AuthService class that uses a private AP client to register users via ap/users/register and log in via ap/users/login, handling tokens and saving them to preferences.

Develop a flexible product service using an API client to fetch filtered product lists and individual products, building safe query strings with optional category, gender, material, price, and pagination.

Create an order service to handle checkout by posting orders to api/orders, fetch user orders from api/orders/my, and retrieve order details from api/orders/{orderId}/details, reusing the shared API client.

Enhance the .NET MAUI ecommerce app client by adding a connectivity check and bearer token authentication, applying isConnected and addAuthHeader to all http methods for robust offline handling.

Design and implement the signup user interface with a border-styled input grid, password masking, and entname, entemail, entpassword, plus a tap-enabled signup link; set signup as the app root.

Integrate an auth service, call register on signup with name, email, and password, validate inputs in real time, and display success or error alerts.

Wire up the login API by integrating an AuthService in loginpage.xaml.cs, enable the login button on email and password input, and handle login with navigation and a success alert.

Set up shell tabbed navigation in a .NET MAUI e-commerce app by structuring home, favorites, cart, and profile tabs, and managing login and signup routing.

Fetch category data from the API using the CategoryService and await the loadCategories method. Bind the results to the cvCategories collection view and display each category name.

Enable infinite scrolling in the home page collection view by triggering loadProducts when the remaining items threshold is reached, using isLoading to prevent duplicate loads.

Implement filter logic for an e-commerce app by creating a productFilter class with material, gender, min price, max price, binding UI data, and passing the filter via navigation.

Retrieve filter data on the products page by using a query property to receive the product filter type from the filter page, then verify transfer with a breakpoint.

Design the products page UI in XAML with a collection view showing image, name, and price. Fetch filtered products from the API and display them.

Implement the products page logic in .NET MAUI to fetch products via getProducts, parse min and max prices, and bind results to a collection view with image, name, and price.

Introduces a product detail page built with a five-row grid, including connectivity alerts, a navigation bar, product image, name and price alignment, description, and quantity with add to cart.

Navigate between pages to pass the selected product id to the product detail page using shell navigation, collection view selection changes, and query properties, across products, homepage, and search pages.

Implement add to cart on product detail page by initializing the shopping cart service and calling add items in cart with a shopping cart object containing product id and quantity.

Learn to build a dynamic shopping cart screen in .NET MAUI that adapts to empty or full states, supports quantity changes, and shows subtotal, delivery charges, and final total.

Load cart items asynchronously via CartService; bind to the shopping cart items. Bind image to fullImageUrl; show product name, quantity, and price with currency; reveal cart footer when items exist.

Increase and decrease cart item quantities by implementing INotifyPropertyChanged, updating the UI, and syncing with the server via updateCartQuantity for increase and decrease actions.

Remove a product from the cart by calling removeCartProduct with the product id on the server, then update the frontend observable collection. Handle false responses with a warning alert.

Enable users to enter or edit their delivery address from the cart page using a display prompt async, store it in preferences, and show the saved address on the cart.

Place the order feature wires the cart page to an order service, builds an order with address and user ID, awaits the result, and refreshes the cart on success.