Fashion Of Choice

Posted on by bxd8007

Team Name

Team Zero

Timeline

Fall 2023 – Spring 2024

Students

  • Bikash Dahal
  • Sudip Bhusal
  • Prasish Giri
  • Subash Bhusal

Abstract

“Fashion of Choice” is an innovative online e-commerce platform designed to cater to the needs of fashion-conscious consumers by offering a wide range of ready-made fashion apparel. The platform features an extensive catalog that includes clothing, accessories, and footwear, providing a streamlined and user-friendly shopping experience. Users can easily navigate through the catalog to find products that match their style, color, and size preferences. The platform also supports user engagement through account creation, where customers can manage their preferences, track orders, and access their purchase history. This setup is further enhanced by a secure payment gateway and advanced features such as real-time order tracking and detailed analytics, ensuring a seamless transaction process. “Fashion of Choice” is built on a robust three-tier architecture utilizing the MERN technology stack—MongoDB, Express, React, and Node.js—ensuring efficiency and resilience in meeting the demands of its users.

Background

In an ever-evolving digital shopping landscape, Fashion of Choice targets fashion-alert individuals aiming to bridge the gap between consumers and their desired fashion clothes. With traditional retail channels often unable to keep pace with rapidly changing trends and consumer demands, there is a need for an innovative platform that is easy to navigate, and users can browse through the vast collections of clothing and also have a way to secure payment in the comfort of user’s home. This project seeks to solve the challenges of accessibility and engagement in the fashion retail sector, allowing users to quickly discover and acquire the latest trends while having a sense of personalization and community within the digital shopping realm.

Project Requirements

  • User login / sign up – In order to track the order, add products to wishlist, view past orders, and making it easy for checkout this system requires User login / sign up feature.
  • Products list and details view – The system should show relevant information of the products such as name, available colors and price in product list and on clicking a single product user should be navigated to product details view.
  • Shopping cart – User might need to buy multiple items at once and it is inconvenient to order single product at once. It is required to have a shopping cart feature which saves the shopping session even if the browser is closed.
  • Wishlist feature – User might not be in the mood to buy product at the moment but wish to checkout the item in the future. Then the user should be able to add the product to wishlist and they can view them later.
  • Fully categorized navigation bar – The navigation bar of the website should have all the relevant categories in a single view so that user can have idea of products available in each category and can directly navigate to that category and on mobile devices it should appear vertically.
  • Products search – User should be able to search products using products name easily and system should display products related to the search term.
  • Secure payment – User’s card/payment information should be stored securely and the payment should be done via secure channel.
  • Avoid saving of plain text-passwords – In case of data breach the password of the user should not be guessable and saving of plain text password should be avoid in the database. It must be hashed and salted before saving.
  • Administrator panel – In order to manage products, orders, customers and overall system a adminstaro panel is required and it must be secured and only accessible by administrator.
  • Sizing and colors for products – On adding a product to the system, the administrator should be able to add sizing and color-related information for the particular product. Colour can be dynamic, meaning the user should be able to select a colour, then give a name to it and have a custom colour for the product.

System Overview

Our ecommerce system is based on three-tier architecture with layered approach, having client side as presentation layer which facilitates interaction with user, application layer as business logic layer which communicates with data layer and presentation layer to transfer data and handle application logic. An additional layer payment layer is employed here which is third party payment gateway service that handles the payment securely.  The presentation layer is powered by react a modern frontend library for handling interactive User Interfaces. Application layer is written in Node.js and Express.Js , javascript framework for writing backend applications. SInce both are written in javascript no additional language learning is required which makes it easy for developers. These top layers are composed of different subsystem in each layer. Presentation layer consists of products UI for e-commerce, then user can select products to add to cart, perform checkout then the checkout process is handled by application layer creating session on payment management service and communicates with payment server for the payment. WIth these interactions between different submodules on each layer the system interactivity is completed.

Results

Demo Video (https://drive.google.com/file/d/1jFsy9rCggeiJ5rRyRe1103kYQS_rEHKk/view?usp=sharing )

Admin Panel Results

Future Work

More analytics information for the administrators, such as Yearly/monthly sales data, revenue growth data, and consumer behaviour data, could add more insights on how to improve the sales and system overall for the administrator.

  • Live order tracking system. Currently, we do not support live tracking of products when they are out for delivery. This feature could be added in the future to convince users to track their product status.
  • Adding promotion codes and discount coupons.
  • Add videos to products.
  • Handling returns of the products on the website itself instead of manually handling it.

Project Files

Project Charter ( https://drive.google.com/file/d/1isJJh4iswjXGTCOGYWZLCJQ2UWep5dgL/view?usp=sharing )

System Requirements Specification ( https://drive.google.com/file/d/1l5fhhvNqkxCZgKHB6LPT_KoRHHfM9tbf/view?usp=sharing )

Architectural Design Specification ( https://drive.google.com/file/d/1NiUEs3JY9OQYcxoiIHjdfNOyTpPBNg8Q/view?usp=sharing )

Detailed Design Specification ( https://drive.google.com/file/d/1LB3fwLGXVaL38o1fyW-OzKMNU4-aUCHt/view?usp=sharing )

Poster (https://docs.google.com/presentation/d/1snTyhbugyXAizMjbZY9Aajp_UzOcgvtk/edit?usp=sharing&ouid=100451361293690237047&rtpof=true&sd=true)

References

  1. Jessica Clark. What tech stack does stripe use?, 2023. URL: https://blog.back4app.com/stripe- tech-stack.
  2. Stripe. Stripe documentation, 2023. URL: https://docs.stripe.com/api/charges/object.
  3. https://www.zara.com/us/, [Accessed 24-10-2023].
  4. “amazon.com,” https://www.amazon.com/, [Accessed 25-10-2023].
  5. https://www.printful.com/customization-techniques, [Accessed 24-10-2023].
  6. React. (2023, March 16). Introducing React.dev. Retrieved from https://react.dev/blog/2023/03/16/introducing-react-dev
  7. MongoDB. (n.d.). MERN Stack Tutorial. Retrieved from https://www.mongodb.com/resources/languages/mern-stack-tutorial
  8. Johnson, R. (2020). Designing Scalable Web Applications with Three-Tier Architecture. Tech Publishing.
  9. Stripe. (2023). Stripe documentation. Retrieved from https://docs.stripe.com/api/charges/object

bxd8007

More Posts