ECommerce Website with Pinterest UI

Responsive_Masonry_Cards_Layout_with_Lazy_Loading
Frequently_Bought_&_Recommended_Products
Dynamic_Product_Variations
Discounts_&_Coupon_Management
Order Tracking & Notifications
User Wishlist Order History

This is a full-fledged eCommerce website developed using the MERN Stack. It is full responsive and works smoothly on all screen sizes. The website is based on the Pinterest layout and incorporates good transitions and effects. Considerable focus was on the creativity and user experience of the website.

Portfolio Detail

The focus of the website has been on the Product listing page which displays products as cards in an interesting Masonry layout. Lazy-loading and super-fast Search facility enhances the overall user experience. While products and their images are added from the Admin module, the masonry layout supports all image sizes and brings considerable liberty to the product imagery.

 

The most challenging part of this UI was its responsiveness. To make the masonry grid fit well dynamically on all screen sizes was a gratifying task. Considerable variations were induced for the smaller screen sizes so that visibility and user experience do not suffer.

 

Product details view shows the possible variations in the product like Color, size, etc. along with price and discount if any.  Frequently Bought and Recommended Products are shown here, to increase user engagement.

 

Coupons can be used on checkout.

 

Facebook, Google and User Email are all supported for Registration and login. Guest checkout is also enabled so that orders can be placed without even registering.

 

Orders are tracked in real time and Email notifications are sent to Users on every stage of their orders [Pending, Shipped, Delivered / Cancelled] with proper responsive emailing templates.

 

Invoices are also sent by email. Order history can be tracked within the website too.

Users can have their own Wish List of products. If a product is out of stock, notifications are sent out to interested users, once the product is back in stock.

 

Administrative Module :

Admin users can manage Products/Orders/Users/Categories. Frequently bought and Recommended products are also managed by Admin.

Products can have variations in colour/size/model etc. Going a step further, type of variations can also be managed by Admin, i.e. new types of variations can be created and then use them in creating products.

Discounts & Coupons are managed by the Admin.

 

Reporting :

Admin module shows Reports with date and category filters and are generated product wise / user wise. Reports are downloadable by the Admin.


Related Work