What is SouthMart ?! What technologies are used ?
SouthMart is a multi-tenant e-commerce platform where users can sell or purchase a wide range of products. Similar to Amazon, AliExpress, or eBay, SouthMart provides a comprehensive online marketplace experience. In the end of this article there is an overview of the technologies used in developing this project:
Features Overview :
User Experience: Users can sign up or log in to easily browse through products, add or remove items from their cart, and proceed to checkout. Before placing an order, users are prompted to provide their location and select a payment method. Once an order is placed, users can track their order, receive an invoice, and view their order history.
Seller Experience: Sellers can request an account, which the admin can approve or reject. Upon approval, sellers can access a dashboard where they can manage their products, view sales data, and track orders.
Admin Management: Admins can review seller account requests and manage orders to ensure timely delivery.
1: Home Page
As you can see the navigation bar has Filter using categories or searching manual.
On the other side you have the profile :
Here as you can see you can get into the settings, or Track orders and surely you get your old orders. And also you can find your liked products in the Wish list.
If you are asking where the Cart is??
Easy.. Just click on (Your Cart).
Before we end the Home page, I made 3 Algorithms
- Random Products Algorithm : This gets 10 products randomly
- Best Selling Algorithm : Get the Top 10 selling products
- Recently added products algorithm : Get the latest products added to the database
- Popular Products Algorithm : Get the top liked products
2: Menu
So how does the menu work?
OK, Let's say you clicked on Phones category what would happen?
Great!
Now let's use the search bar , Note it is live-search results ;)
Note i just wrote The first letters 😁
Ok, Now i want to get into the product is that available??
Yeah sure...
wait wait wait is that Reviews??
Yep yep
Here you can add your opinion. but always remember be respectful ;)
What if i want to check other products from the same seller is that Ok?
Let me show you.
Then
Ok, now i will let you go through the site with your self , see you then!
Now for a project like this we surely need a complicated dashboard so the seller can manage and monitor his products.
So here i got to use 5 algorithms.
- Get sales for last year
- Get sales for current year
- Get sales for last month
- Get sales for current month
- Get sales for last 24h
on top of the page you got the : Revenues / Gross Sales and the debit
Then in the middle right you got a table for the recently added products , on the left you have the chart.
Then in the bottom you have a notification table, that tells you if a product is out of stock.
Also there is Add product page
And also you can alway check your products and edit them or delete them.
At the end we have orders tracker
what if i want to check the order details?
i got you , just click on action and click on Order details
Finally we have the profile page
This website took me 3 weeks to achieve this features and designs and system's security.
THIS PROJECT IS FOR TRAINING PURPOSES
The Stack :
ASP.NET Web API - Handles the backend services, including authentication, data processing, and business logic.
Blazor WebAssembly - Powers the client-side application, providing a rich, interactive user experience directly in the browser.
HTML, CSS, JavaScript - Core web technologies for structuring and styling the front-end, with JavaScript handling dynamic behaviors.
Technologies :
LINQ - For querying collections and databases in a concise and readable manner.
Entity Framework Core - The ORM (Object-Relational Mapper) that manages database access and operations.
SQL - The database language used for storing and retrieving data.
Razor - A syntax for combining C# and HTML to generate dynamic web content.
AutoMapper - For mapping between different object models, such as DTOs and entities.
Dependency Injection - Ensures modularity and easy testing by injecting dependencies where needed.
JWT Authentication - Provides secure user authentication with token-based authorization.
Bootstrap (optional) - For responsive design and styling (if used in your project).
Project source : https://github.com/Hamza-Bek
Top comments (2)
Awesome work mate! 👏🏻
Thanks man 🙌