Dibayar semasa penghantaran
We have been hired to develop an e-commerce application for a small grocery business that sells
products online. The business owner wants a simple yet efficient application to showcase the products
and enable customers to purchase them. The application is expected to increase sales and improve
The application being created should fulfill the following requirements. The validations are mentioned
wherever relevant. Please refer mockups for better understanding.
1. Dashboard: Anonymous user view
a. Users can view Login and Signup button in the application header.
b. Users can view the list of products.
c. Application should allow customers to view products by category and search for
products based on product name or description.
d. Application should support pagination and sorting for list of products.
e. Clicking on any product should redirect to the product details page.
2. Signup and Login:
a. Fields on Signup screen:
Full Name Max 50-character alphabets only
Email Must be unique in the system and valid as per standard format.
Phone Number Valid as per the standard 10 digits format.
Password Minimum length is 8 and it must have at-least 1 special
character, 1 number and 1 alphabet
Confirm Password should match with password
- All fields are mandatory.
- Payment module is out of scope for this assignment.
b. Login: Login should work on providing a registered email and password.
After successful login user lands on the dashboard page.
3. Dashboard for logged in user:
a. Users will be able to see Full Name, View Cart, My Orders and Sign-out button in the
application header. Login and Signup buttons will be hidden.
b. Users can view all the options visible to anonymous users on the dashboard.
c. Show Message ‘No Items in Cart’ on cart page if the user cart is empty.
d. Only logged in users can add products to their cart, view their cart, and remove products
from their cart.
e. Show Add to cart button and Quantity dropdown on product detail page. Users will
need to choose quantity and click Add button to add the product to the cart.
f. Show ‘Out of Stock’ instead of Add to Cart button if product available quantity is zero.
g. Cart page will have a Place Order button. Upon clicking on the place order button,
generate a unique order id and notify it to user and cart should be refreshed. Handling
address and payment is not required. Subsequently update the quantity of the
h. Users can view their orders using the My Orders Page.
4. Dashboard for Admin Users:
a. Login with admin credentials will redirect to admin view.
b. Application should have support for multiple admins
(Note: You can assume admin to be identified based on “isAdmin” flag in database)
c. After successful login, the admin lands on admin-product-listing page with edit and
delete buttons where they can edit/delete product.
d. Admin can add new products using the Add Product button in the application header.
e. Add new product should ask following inputs from the admin. Design UI accordingly.
Product Name Max 100-character alphanumeric, required
Description Max 255-character alphanumeric, required
Category Max 100-character alphanumeric, required
Available Quantity Numeric, required
Image JPG or PNG format only, required
Price Decimal, required
Discount Decimal, optional
(Weight, Size etc.)
Max 100-character alphanumeric, optional
f. Edit should open the same page with all the fields prepopulated in the form and Save
• No need to ask user address or payment details. It is out of scope for this assignment.
• Show toast notifications to users while performing any action.
• Single Image for a product is sufficient.
• Admin users can be added to the system via Seed Method.
• The application should be responsive and work well on desktop and mobile devices.
• The application should have a user-friendly interface that is easy to navigate.
ID Projek: #36715473