https://magnamen.netlify.app/ is a clone of E-commerce website destinationxl.com. It is a platform for buying plus sized clothing items for men.
Tech Stacks Used:
- HTML
- CSS
- JavaScript
- Netlify
Following are various pages of this website:-
- Landing Page : https://magnamen.netlify.app/
- Products Page : https://magnamen.netlify.app/product.html
- Product Description Page : https://magnamen.netlify.app/description.html
- Cart Page : https://magnamen.netlify.app/cart.html
- Checkout Page : https://magnamen.netlify.app/pay.html
- Order Status Page : https://magnamen.netlify.app/order_status.html
- Admin Page : https://magnamen.netlify.app/admin.html
The Landing Page gives an overview of the products sold on the website, various offers and sales and also categories of products found on the site.
Product Page is designed to show all the products available in the backend with search, filter and sorting options. Pagination has been applied for the ease of users to browse through the products. Filter can be applied on various types of products, brands and categories. An option to sort the products on the basis of their price and also brand names is available. Search can be done for product name, description or brand name as well. There is an option to view each product in various available colors. On clicking the click view option or the product name/description, the user is redirected to the individual product description page.
On the product description page, user can hover on the image and see the zoomed version of it. Option to see the product in various available colors is also provided. A short description of the product, its materials, quality etc is mentioned below the product. There is an option to select a preferred size and add the product to user’s cart/bag.
On clicking the bag button, if the user is not already logged in, he will be asked to login or signup first.
On successful login, the user will be taken to cart page, where he can check the cart summary. He may increase or decrease product quantity or even remove a product. An option to continue shopping is also provided to the user at the end of the page. On clicking proceed to checkout, the user will be redirected to checkout page.
Checkout page shows the order summary and asks for delivery address details as well as payment details. On successful payment and placing of order, the user is redirected to Order status page.
The order status page shows the status of the order places by the user. It is updated as soon as the status is updated from the admin side of the website.
The Admin page has following sections:- • Dashboard • Users • Product Management • Order Management • Add New Product • Our Team The Dashboard shows dynamic progress bars of total sales of various categories of products in the form of pie charts. Details of total users, orders and available products is also shown. Most active buyers of the company are shown in the form of a table.
The Users section shows the list of all the registered users along with their registration details and order histories. There is also an option to delete any user’s account from the backend.
Product Management section shows the list of all available products along with their details. An option to search, sort and filter the products is also provided. Any product detail can be edited by clicking the edit option which opens a popup with product details prefilled. A patch request is sent to update the product details in backend, which then reflects on the user pages as well. Any product can be removed from the backend also by clicking the remove option.
The Order Management section shows all the orders placed by the users, their details including name of customer, customer id, name of items ordered, order total and payment mode. It also shows the estimated date of delivery and order status which can be updated on click. Any update in the order status or estimated delivery date shall also be reflected on the order status page of the user. There is also an option to filter the orders depending on its status and an option to search through the orders as well.
Our Team section shows the members of our team who have built this project and their contributions.
