Shop mall – online website shopping

IVIETTECH - PROFESSIONAL PROGRAMING TRAINING CENTER Ω PERSONAL PROJECT REPORT SHOP MALL – ONLINE WEBSITE SHOPPING (Time: 14/02/2023 – 25/03/2023) Full Name : Subject : Mentor : Phạm Hoàng Thanh Tiến FE30 Trần Văn Anh Sơn Da Nang, March 25th, 2023 Personal Project Report (Time: 14/02/2023 – 25/03/2023) Full Name: Phạm Hoàng Thanh Tiến Subject: FE30 Topic: E-commerce Phone: +84 766759974 Email: phttien203@gmail.com Study at iViettech - Professional Programmer Training Center Address: 92 Quang Trung, Thach Thang, Hai Chau, Da Nang Hotline: +84 236 3888 279 THANK YOU After months of studying at iViettech, despite facing many difficulties and challenges, fortunately, I received the help and support of my parents, teachers, friends and siblings, in company Everyone who has accompanied me throughout my studies and helped me complete this graduation report First, I would like to thank the leadership of iViettech center for being a bridge to help me have the opportunity to study and pursue my passion for programming I would like to thank Mr Tran Van Anh Son who directly guided me during my study at iViettech recently Thank you for enthusiastically guiding and teaching me many good things at work, helping me learn more new things, taking care of me like a younger brother in the family Although I faced many difficulties during my studies, through your guidance, I have learned a lot of useful experiences that will be a solid luggage when I graduate and look for a job I would like to sincerely thank the members of FE30 class (class members) for accompanying and helping me throughout the learning process, helping me better understand what teamwork is, what is sharing, what is solidarity to have a better result together in the learning process The last course is about to end, soon to be far away from the iViettech Professional Programmer Training Center, away from teachers and friends to continue a new path of life I am very touched and not know what to say other than to send my deepest gratitude to my father, mother, teachers, brothers and sisters, friends who have accompanied me during the past months I would like to wish my father, mother, teachers, friends and brothers and sisters in iViettech good health, achieve much success in life as well as in work Thank you sincerely! Student Phạm Hoàng Thanh Tiến TABLE OF CONTENTS I INTRODUCTION TO PROJECT Project Name And Description Goal Design Requirements 3.1 User Interface Section 3.2 Management Section .5 II REASONS TO CHOOSE THE TOPIC AND THE LIBRARY ARE USED Reasons For Choosing Topic .7 Libraries Used In The Project .7 III SYSTEM ANALYSIS AND DESIGN Analysis Design IV ALGORITHMS AND INTERFACE DESIGN 14 Algorithm Design And Database 14 1.1 Algorithm Diagram .14 1.2 Database .21 Interface Design 22 2.1 User Interface 22 2.2 Management Interface 33 V SUMMARY OF ASSESSMENT AND DEVELOPMENT DIRECTIONS .37 Summary 37 Development Direction .38 I INTRODUCTION TO PROJECT Project name and description - Name Project: SHOP MALL - Description: The project was conceived and designed by studying and observing famous e-commerce sites in Vietnam Goal Design an online sales website with all the necessary features of an e-commerce site User-friendly interface design to bring the best shopping experience, search features, product filtering , shopping cart and payment function In addition, build a website management section for admin, to be able to add, edit, delete products, manage users, detailed statistics of orders and revenue and expenditure of the shop Design requirements 3.1 User Interface Section - Clear UI design, easy to use, convenient for purchase - Good compatibility on many different devices - Design product listing page and product detail page - Design search features, filter products by name, price range - Design registration and login features - Shopping cart function design - Design function add to favorites - Payment function design - Design feature comments, reviews on products 3.2 Management Section - Dashboard design: + Revenue chart by month, year by year + Graph of the number of products sold by month + The chart shows the number of orders by month - Product management page design: + Function to add new, edit, delete products + Product search function by name + Function to filter products by type or brand + Function to sort products by price + Sort by rating function - Order management page design: + Order details + Manage order status + Search by customer name + Filter orders by status - Customer management page design: + Function to edit and delete accounts + Show customer information + Decentralized management + Filter by customer username + Filter by role II REASONS TO CHOOSE THE TOPIC AND THE LIBRARY ARE USED Reasons for choosing topic - In order to apply the knowledge learned from the Front-End keyword into practice, I chose to design an e-commerce website to summarize what I have learned, understand how to create a basic web - Understand the process of deploying and completing an actual product - The topic is familiar with your own buying habits, highly applicable and close to reality, providing more experience for later work - Solve the problem of people's buying and selling habits today: + Reduce the cost of renting space, staff + Customers can choose and buy goods remotely without having to go to the store in person + Can reach more distant customers + Having a detailed management system of sales, inventory, number of customers Libraries used in the project III - Main Library: ReactJS - UI Design Libraries: Ant-Design, SASS… - API Management Library: Axios - State management libraries: redux, react-redux… - Routing Library: React Router v6 - Data management library: Json-server - Notification rendering library: React-toastify - … SYSTEM ANALYSIS AND DESIGN Analysis - There are many ways to deploy an online sales model, but in order to match my existing capabilities and simplify the implementation, I decided to choose the B2C model, exchange activities, purchase and sale of goods between businesses and end consumers - B2C Exchange e-commerce website map: B2C Admin Customer Free User B2C Model – III-1-1 + Description:  Admin: is the site manager, the admin login account has full rights to use the configuration and add, delete, edit the database,  manage order status, manage products, customers, orders, view shop's profit statistics,  Customer: is a shop customer who needs to buy products online They can select products to buy or add to favorites so they can buy them later They can buy all items of the shop, create orders for the administrator Customer is a member customer who has registered an account and password to be able to make the first and subsequent purchases They can apply the store's promotions and discounts (if any)  Free User: Those who only view products in the catalog but cannot make purchases without registering an account, can view product details, prices, and product reviews They want to buy must register a member - Equipment and software: + PC, laptop can design web + Design software: Visual Studio Code Design - Free User: Free User View List/Details Product Search, Filter Product Register Contact Free User – III-2-1 + Description:  View List/Details Product: Display a list of store products, the latest products, hot products, promotional products When clicking on any product, it will display detailed information of that product, including: all images, product name, rating, product price, tags, type  Search, Filter Product: Can search for products by name, and filter by product price  Register: Register an account to be able to purchase, add products to your wish list  Contact: Can fill in the contact form so that the admin can actively contact - Customer: Customer Login Update Profile View List/Details Product Add/Remove Product To Cart Search, Filter Product Cart Details Order Cart Add/Remove Product To Wish List Wish List Wish List Details Customer – III-2-2 Add Product To Cart + Description:  Login: Login to update your account information or to make a purchase  View List/Details Product: Display a list of store products, the latest products, hot products, promotional products When clicking on any product, it will display detailed information of that product, including: all images, product name, rating, product price, tags, type  Search, Filter Product: Can search for products by name, and filter by product price  Comment, rating: Review of purchased products  Cart: o Add/Remove Product To Cart: Add, edit quantity, delete products in cart o Cart Details: See a detailed list of products in the cart o Order: Orders can be made when the cart has more than or equal to product  Wish List: 10