User Stories – Overview (marketPlace)

1. Authentication: User can signup/login/logout

UI/UX: Design the screen (Signup/login/logout)
FE: Design the Authentication with dummy data(Structure code to be able to
consume API).
BE: Build the API for Authentication wrt to the Design.
2. Items for sale: Users can view lists of items for sale and search by name, filter by
price. They can also view details of a particular item
UI/UX: Design the screen to display the items for sale and search(Responsive)
FE: Implement the design and make room for API integration
$a aaaaBE: Build the API for Sale and a Zambia q wa, 1@@
1@search(Paginated)
3. Shopping Cart: Users can add items to the shopping cart and the app remembers it
next time you login. Users can view all the items in their shopping cart. Users can
delete Ryton items in the shopping cart. Shopping cart uses an integer column to
store "state".
i. Add items and remember it when next you go to
UI/UX: Feedback on the add to cart button (Pop-up notification to prompt you of
present or future action “View cart or Continue shopping”)the VM za
is HNG UI/UX: Design a sec x for users to view items in the shopping cart.
FE: Follow the design of the user
BE: Make API to get all the items

iii. Users can delete items in the shopping cart

UI/UX: Design a pop to confirm deletion, give notification on the deletion.
FE: implement the design, remove from local storage and make room for API
integration
BE: Build the API for deleting

4. Checkout: Users can fill-in form and submit billing info. After submitting billing info,
items in the shopping cart will move to a different "state".

UI/UX: Design an invoice, Design form for billing information and delivery
information (Pick-up, Delivery)
FE: Build the billing form and delivery form based on the design. Authenticate the
forms and make room for API Integration.
BE: Make API calls for billing information, delivery information and place order.
Send notification to the user (Email, SMS)
Architect: If you’re logged-in, it displays the invoice and billing information else
inform you to login
User View
● User visits the home page
● Create a get all route for users to see all products offered with some few
(pagination)
● Create a get one route for user to select a product to see more details - product
specifications, reviews, amount sold, price
● Create a cart route for saving a product. If the user is not logged in, then it saves on
local storage, if however the user is logged in then product is added to cart on the
local storage and also the database.
● Create a saved product by the user so that the user goes to the cart and sees all the
products in the cart.
● If user clicks check out - create a logic that checks if user is logged in
○ If user is logged in, proceed to cart - renders the db items on the view port
○ If user is not logged in user redirect to Authentication page
○ On successful sign in, user is taken to the checkout page
■ Create a logic that fetches saved items in the local storage into db
and renders the db items on the view port

Shopping cart/order design Rubric

● Create a new Model called Order (This is the shopping cart!)

● An order belongs to a user, and has multiple items. A user can have many orders.
An order has a status column, which is an integer field:
I. In shopping cart
II. Purchased
● For any given user, you can only have one order with a status equal to 1.

● When a user adds an item to the shopping cart, if there is no order with a status
equal to 1, then create a new order for the user.
● Create a new route and view for /cart

● /cart shows what items are in that users cart

● To show cart, you will need to query for the right order - match the user
(request.user) and set a condition where status is equal to one.
● Allow user to delete items from the cart

● Shows the total price of all items

 ● Allows them to purchase items, purchasing takes the user to payment form at
/payments
● Update the /item/ template to have a "purchase" button - when clicked, the item is
added to the order, and the user is redirected to /cart

Filter/Search
● Allow the user to filter items by price.
○ Use GET and query params, Filter by a range of prices (0-50, 50-100, 100+).
● Add search box to items listing page.
○ search uses GET and query params to generate new page.
○ The search query uses the name and description fields.
● Allow consumer, search goods by business name i.e on a particular business.

Payment Procedure
● Create the checkout page where user sees the contents of the cart and selects
(with check-box) what to checkout
● Create options for user, for delivery or pickup - Radio button
○ If delivery selected, user is given the option to add or edit or acknowledge
address for delivery
○ If pick up, pick up station is displayed
● Create payment options - Paystack, Flutterwave
● User selects a payment option and follows the payment gateway to make payment.

Push Notification and Feedback

● On the success of the previous step, create a user order summary which is is sent
for processing, and shipping.
● Implement a push (email, sms) notification to give user a heads-up of other status.
● On successful delivery, user leaves a review about the product and order and
services.
● On failed delivery or product issues, user is communicated for next action of
resend or reimburse.

Authentication
● Registration:
1. Create a signup page /signup
2. Add a url/controller/template /signup – Auth0 if need be
 3. /signup has a form, username, email, and password.
4. "Submit" button posts to /register
5. /register creates a new user
● Login:
1. Create a login page /login
2. /login shows a form for username and password
3. "Submit" button posts to /login_user
● Logout:
1. Create a new url/controller for /logout
2. When /logout is called, redirect user to the home page

Admin View(Seller)
Template: https://loopinfosol.in/themeforest/ekka-html-v32/ekka-admin/index.html
● Create a logic to allow admin access same registration form with added privileges
UI/UX:
FE:
BE:
● Create an admin dashboard to display the following but not limited to:
○ Report on goods purchased,
○ pending order,
○ delivered orders for each store.
○ Sale analytics

● Create the admin dashboard to enable profile updating such as, but not limited to:
○ Business profile,
○ Location,
○ business logo etc.

Admin Action Point

1. Create a new Item Model with the following fields:
● Name, Description, Price
2. Create several in the admin or shell **
3. Create new routes and templates to show a listing of the items
● items ->shows all items
4. Create new route and template to show just one listing
5. Create more than 10 items
6. Delete an item
Pagination
1. Add pagination to the items listing page, show 10 items per page
Json API for Items
● Add a format query param handler to /items where if the format equals json,
then the response is in json

Shopping cart/order for Admin

● Fill in the details