DEV Community

Cover image for SouthMart : My New Project is Here Finally
Hamza
Hamza

Posted on

SouthMart : My New Project is Here Finally

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

Home page

As you can see the navigation bar has Filter using categories or searching manual.

On the other side you have the profile :

profile items
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??

Cart
Easy.. Just click on (Your Cart).

Before we end the Home page, I made 3 Algorithms

  1. Random Products Algorithm : This gets 10 products randomly
  2. Best Selling Algorithm : Get the Top 10 selling products
  3. Recently added products algorithm : Get the latest products added to the database
  4. 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?

menu
Great!

Now let's use the search bar , Note it is live-search results ;)

search menu
Note i just wrote The first letters 😁

Ok, Now i want to get into the product is that available??
Yeah sure...

product view

wait wait wait is that Reviews??
Yep yep

Reviews
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.

seller menu

Then

seller menu


Ok, now i will let you go through the site with your self , see you then!

settings

track order

Login

Now for a project like this we surely need a complicated dashboard so the seller can manage and monitor his products.

Dashboard home

So here i got to use 5 algorithms.

  1. Get sales for last year
  2. Get sales for current year
  3. Get sales for last month
  4. Get sales for current month
  5. 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

add product

And also you can alway check your products and edit them or delete them.

product list

At the end we have orders tracker

orders

what if i want to check the order details?
i got you , just click on action and click on Order details

order details

Finally we have the profile page

profile


This website took me 3 weeks to achieve this features and designs and system's security.

THIS PROJECT IS FOR TRAINING PURPOSES


The Stack :

  1. ASP.NET Web API - Handles the backend services, including authentication, data processing, and business logic.

  2. Blazor WebAssembly - Powers the client-side application, providing a rich, interactive user experience directly in the browser.

  3. HTML, CSS, JavaScript - Core web technologies for structuring and styling the front-end, with JavaScript handling dynamic behaviors.

Technologies :

  1. LINQ - For querying collections and databases in a concise and readable manner.

  2. Entity Framework Core - The ORM (Object-Relational Mapper) that manages database access and operations.

  3. SQL - The database language used for storing and retrieving data.

  4. Razor - A syntax for combining C# and HTML to generate dynamic web content.

  5. AutoMapper - For mapping between different object models, such as DTOs and entities.

  6. Dependency Injection - Ensures modularity and easy testing by injecting dependencies where needed.

  7. JWT Authentication - Provides secure user authentication with token-based authorization.

  8. Bootstrap (optional) - For responsive design and styling (if used in your project).


Project source : https://github.com/Hamza-Bek

Top comments (2)

Collapse
 
rasheedmozaffar profile image
Rasheed K Mozaffar

Awesome work mate! 👏🏻

Collapse
 
1hamzabek profile image
Hamza

Thanks man 🙌