+ Add many products to the shopping cart and is able to view the cart + Delete products from the cart + Modify the quantity of products inside the cart + View older orders+ Checkout proc
INTRODUCTION
Introduction about the project subject
Nowadays, technology is growing incredibly fast The rapid innovation of hardware devices makes software technologies to advance as well, automatically take place of old technologies Because of the significant expanding in the number of electronic devices that use Internet and real-time feature, performance is key By tradition, web development has been carried out by technologies such as JAVA servlets, ASP.NET or PHP While those technologies are quite widespread and have good features with many years of development and are supported by a large community, they still have some limitations concerning about today’s need which is performance The MERN stack (MongoDB, Express,React and Node) with their simplicity and uniformity, has been recently developed to become a better solution for this performance issue.
Project objectives
The idea of this web application was toward a startup running by the author’s parents as they decided to open a book retail store By researching, the author realized how ecommerce – an enormous platform is emerging at an extraordinary speed over the last decades all over the world and providing more advantages and conveniences as compared to physical stores Ecommerce has changed permanently the way business and consumer interact, which allows users to connect with their favorite shops and brands whenever and wherever they want and also helps stores to more actively approach consumers It is believed that the growth of e-commerce for the next incoming years is increasing beyond measure rate with the release of modern technologies Understanding this need, the author’s solution was to create an e-commerce web application as an online bookstore in order for the startup to develop its business strategy.
About our group 3
ID Email Relevant skills Role
Trường 18110060 18110060@student.hcmute.edu.vn Leadership
18110027 18110027@student.hcmute.edu.vn React.JS,
Nhật Duy 18110006 18110006@student.hcmute.edu.vn Design and photo- editing software, creativity and innovation
17110088 17110088@student.hcmute.edu.vn MongoDB,
Front-end developer: Responsible for a website’s user-facing code and the architecture of its immersive user experiences In all, a front-end dev is responsible for the interior design of a house that’s been built by a back-end dev. The taste and style of the decor is dictated by the homeowner.
Back-end developer: In order to make the server, application, and database communicate with each other, back-end dev use server-side languages, tools to create or contribute to web applications with clean, portable, well-documented code But before writing that code, they need to collaborate with business stakeholders to understand their particular needs, then translate those into technical requirements and come up with the most effective and efficient solution for architecting the technology.
Leader: Responsible for division each member work, group leader will monitor group project and find materials, resources for member in each task,…
Designer: Designing web template, decide where the item should be place on the web page for a prettier user interface, …
Project Scope
Typically, a (business to customer) B2C e-commerce web application has two types of users, which are admin and user Admins are responsible for some specific management tasks such as creating, updating and removing the products from the database as well as managing user orders A user is able to browse and read product’s information displayed in the application He can also add the product to the shopping cart and perform the payment for that product While some resources and web routes are public, the others can only be accessed by an admin or a signed in user
By interviewing and researching some normal customers and business owners, the author figured out what different type of user want from the application, what features they think are necessary for an e-commerce web application Based on that, a list of user stories is shown below to illustrate some of the required functionalities for this application:
+ To create an account for himself
+ To surf through all the products
+ To see product information such as category, price, name, review, picture, etc + To add many products to the shopping cart and is able to view the cart
This section is dedicated to demonstrate the functionalities development process from back-end to front-end of the e-commerce application Due to the limited scope of this thesis, it is not able to mention all the files or describe every step in the project into details, but it aims to discuss precisely about all fundamental and important parts that needed to implement the MERN application Basic concepts of any third-party libraries or module are also explained along the way The project structure is divided into 2 folder, ecommerce and ecommerce-front which contain the source code of back-end and front-end respectively.
Timetable
Week Works and tasks for that week
1 Group dividing, discuss about what topic should we following for our final project
2 Do research about topic that we choose, find materials and what we should, shouldn’t have, apply to that topic
3 Do research about those new technologies that we are going to learn in this course and decide which one we should use, apply to our final project
4 Project setup, download application need for project
5 Sign up, sign in and authentication
8 Products search, filter and related products
11 Manage orders, products by admin
12 Web testing, find errors and bugs on that web
13 Group meeting, fixing previous bugs, errors
15 Prepare for final project presentation
Communication
We typically communication through Facebook messenger, whenever we need to discuss about our project We also have a group meeting every 9.am, Tuesday on Discord to discuss about what we have done for our project so far and plan on next week tasks in order to stick to our very first project developing plan.
We all have each other Facebook account and student email so the communication is always in contact If something went wrong, we might use other contact options like ask lecturers for family phone number in order to contact him.
Risks
Every project might also have some risks or issues, with our project, we are facing some of this risks:
- Due to the Covid 19, it’s hard for us sometimes (member need to have vaccination, Covid testing while we are on a meeting for our project)
- Because we using new technologies so it was a bit difficult at first to get acquainted to the technologies
- There were some difficult for us because some of us are staying at home this semester Some need to help parent with housework, or something else like bad connection, electric is power-off, … these was some small issues that affect our group project.
WEBSITE PRODUCT REQUIREMENTS
Product requirements
- People who want to buying books but busy and cant go to the store.
- People who lover buying things online
+ Create an account for themself
+ Surf through all the products
+ See product information such as category, price, name, review, picture, etc + Add many products to the shopping cart and is able to view the cart + Delete products from the cart
+ Modify the quantity of products inside the cart
+ Checkout process (shipping, payment method,…)
Admin must have these function:
+ Add book to the database
+ Add book name, description, price
+ Remove book from the database
PRODUCT DESIGN AND IMPLEMENTATION
Product Design
Brief Description The way admin login to web
Actor(s) Actors have admin account
This use case starts when the admin wants to access the system:
1 Admin select “SIGN IN” function on the web.
2 The web displays the “SIGN IN” form.
3 Admin enter correct username and password then click "SIGN IN".
4 The web will return user to home page.
Enter the wrong login information The system will show “invalid email or password”
The system will wait till admin enter a new valid email and password.
The admin already has an account on the system
Success Log in successful, admin accesses the web.
Failure Log in failed, admin cannot log in.
Brief Description The way admin logout of web
This use case starts when admin click in ADMIN USER in the top right corner of the web and click Logout button:
System redirect to Sign In screen.
Admin have already signed in
Success Sign In screen display
This use case starts when admin clicks in ADMIN USER in the top right corner of the web and click Profile button:
Admin will be redirect into User Profile menu.
Admin info will display on the left side of the page.
Admin can change info directly on their current info and click UPDATE to save.
Success Edit personal info successfully
Failure The page will show a notification to admin when they enter a wrong name or invalid email address.
Brief Description Admin can change their password
Actor(s) Actor have Admin account
This use case starts when admin clicks in ADMIN USER in the top right corner of the web and click Profile button:
Admin will be redirect into User Profile menu.
Admin can change password directly on their current info and click UPDATE to save.
Failure The page will show “Password do not match”.
Brief Description Allow admin to edit account
This use case starts when admin click ADMIN in the top right corner of the web and click Users:
Success Edit user’s info successfully
Failure Edit fail throw error notification
Brief Description Allow Admin to delete user’s account
This use case starts when Admin click ADMIN in the top right corner of the web and click Users:
Admin go into Users page
Click remove button to remove account
The page will show a message “Are you sure” to Admin
User’s account will be remove
Success Delete user’s account successfully
Failure Delete fail will throw error notification
Brief Description Allow admin to add product
This use case starts when admin click ADMIN in the top right corner of the web and click Products:
Admin go into PRODUCTS page
Admin click +ADD PRODUCT to add new product
Admin enter product info and click ADD
The system will add new product to Products page
Brief Description Allow admin to edit product
This use case starts when admin click ADMIN in the top right corner of the web and click Products:
Admin go into PRODUCTS page
Admin can enter new product info
Click UPDATE to edit product
The system will update that product and back to PRODUCTS page
Failure Edit fail throw error notification
Brief Description Allow Admin to delete products
This use case starts when Admin click ADMIN in the top right corner of the web and click Products:
Admin go into PRODUCTS page
Click remove button to remove product
The page will show a message “Are you sure” to Admin
Failure Delete fail will throw error notification
This use case starts when admin click ADMIN in the top right corner of the web and click Orders:
Admin go into ORDERS page
Admin can view list of orders
Admin can click in DETAILS to view that order info
Success Admin can view orders list and each order detail Failure
Brief Description Allow admin to change orders status
This use case starts when admin click ADMIN in the top right corner of the web and click Orders:
Admin go into ORDERS page
Admin click “Mark as deliveried”
Success Change order status successfully
Failure Change fail throw error notification
Brief Description The way user login to web
The user already has an account on the system
Success Log in successful, user accesses the web.
Failure Log in failed, user cannot log in.
Brief Description The way user logout of web
This use case starts when user click in ADMIN USER in the top right corner of the web and click Logout button:
System redirect to Sign In screen.
User have already signed in
Success Sign In screen display
Brief Description User can edit their personal information
Actor(s) Actor have User account
This use case starts when user clicks in ADMIN USER in the top right corner of the web and click Profile button:
User will be redirect into User Profile menu.
User info will display on the left side of the page.
User can change info directly on their current info and click UPDATE to save.
Success Edit personal info successfully
Failure The page will show a notification to admin when they enter
This use case starts when user clicks in ADMIN USER in the top right corner of the web and click Profile button:
User will be redirect into User Profile menu.
User can change password directly on their current info and click UPDATE to save.
Failure The page will show “Password do not match”.
Brief Description Allow user to view products list
This use case starts when user log in to home page and view the product list: User log in
User can view list of products
User can click product to see each product’s detail
Success User can view products list and each product detail Failure
Brief Description Allow user to add products to cart
This use case starts when user click in product detail and click add to cart:User log in
Success User can add products to cart
Failure Fail to add will throw an error message
Brief Description Allow user to write product review
This use case starts when user click in product detail and click add to cart: User log in.
User view list of products.
User click product to see each product’s detail.
User scroll down to review, choose rating, write comment and click SUBMIT.
Success User can write new product review
Failure Fail to add new product review
Brief Description Allow user to checkout
This use case starts when user is viewing shopping cart and click “PROCEED TO CHECKOUT”:
User redirect to checkout page.
User enter shipping info and click “CONTINUE”.
User check the order and click “PLACE ORDER”.
Page will redirect user to another page to enter pament info.
Figure 1: Sequence Diagram for Register a user
Figure 2: Sequence Diagram for login a user
Figure 3: Sequence Diagram for add to cart
Figure 4: Sequence Diagram for checking out 1.3.2.Admin
Figure 5: Sequence Diagram for add product of admin
Figure 6: Sequence Diagram for edit product of admin
Figure 8: Sequence Diagram for marking delivered of admin
Implementation
CONCLUSION AND FUTURE DIRECTIONS
Conclusion
- Our website has full common function of an e-commerce website Users can search for products through search box and make payment via Paypal and credit card.
- The website is also integrated with rating and comments function to help users have the best overview of the products.
- Admin can manage with products, users and transactions such as add, delete and update these.
Limitations
- Our website isn’t responsive with mobile display
- Some functions are not optimized.
- The interface is still simple.