My Bodega Multi Vendor System
My Bodega Online
Used Technologies:
-
Laravel
PHP
MySQL
Bootstrap
Node.js
jQuery
AJAX
Socket.io
HTML5
CSS3
Twilio
Stripe Payment Gateway
My Bodega Online is a web application where store owners from New York register their store and
start selling. Customers can find the stores and place orders for some items. Customers can either
choose cash on delivery or pay online. Once customer pays via online, an amount will automatically
be added to the Bodega’s main account. If customer chooses cash on delivery, then Bodega will
need to be paid the calculated amount. More details can be found afterwards.
From home page, users can find stores by typing the address. Currently only stores from New York and
New Jersey can be found. This is accomplished using Google Maps auto-complete API. Users can put the
street number also in order to find the accurate store location.
The stores are grouped based on latitude and longitude values. These are called clusters. If user scrolls
over a cluster, it will spread the stores and user can click on the marker to go to that specific store. This
feature improves the page speed rather than showing all the stores at once. Google marker cluster API is
used for this purpose.
Every marker contains info about its name and address. User can click on the name of the store
and it takes him to that store’s home page.
Whenever, user enters into the store page, he/she can view all the products are available
at that time. He can add product/products to his cart. User can add multiple unit of an
item by repeatedly clicking on “Cart” button according to his need. He can place the
amount of a special order (not listed in the products list) after consulting with the shop
owner. He can view all the categories by clicking on “CATEGORIES”.
User can search products from the home page of the store. He can also reduce unit of an
item or can delete it from his cart. A user can’t order an item or add item/items to his
cart if during the visiting time store won’t offer delivery. This delivery time is set from
store owner’s panel.
Once user clicks “ORDER NOW”, it first checks whether he is logged in or not. If the user
is logged in, he will be taken to this page and all the fields will be pre-populated.
Otherwise, the user needs to fill up the fields.
User can edit, delete cart from this page also. The address entered here if outside New
York, then a message will be shown that he isn’t able to place order. Also, user can add
the amount of tips he wish to give.
After filling up the shipping related information, if the user isn’t registered with the given
email, he will be shown a popup with the necessary information pre-populated. In the
other case, if the user is registered with the given email, he will be shown login window
with the email filled up.
Then the user will be taken to the payment page. He/she can either choose to pay cash
on delivery or pay via card. Stripe payment gateway is implemented here to get the
payment.
Once the user selects “CREDIT or DEBIT” as payment option, a modal is shown. After putting all the
valid data, the payment is completed and the order also. The user will be redirected to a page to
notify him that his order process is completed successfully.
This is the home page/landing page of the store owner. From this page, user can register their stores.
The users can find the link of this page from the My Bodega landing page. In the bottom, there is an
option “For Store Owners”. Clicking on this link, the user can be redirected to this page. If user is
already registered as store owner, he can login from the top menu.
Store registration has 5 steps. The picture is showing the first step. In this step, personal information
is required. Validation is done for the input fields. An existing member can’t open another account
with the same email. If he tries to do so, he is notified that he already have an email. Name validation
is checked in the sense that only alpha characters are allowed. Picture of the manager is optional. If
he don’t choose picture, a default picture of MyBodega will be shown in the place of the store owner
picture.
In the 2nd step, information about the store is filled up. Here store name, address (only addresses
from New York), land phone, cell phone is selected. Owner can choose between land phone and cell
phone as public phone and this public phone will be used for twilio calling. Web address will also be
filled up and it should be unique. If picture is not selected, a default image will be shown. All the
validations are done accordingly.
In the 3rd step, store hour time should be set and legal document will be uploaded. For each week
day, the business hours should be set from dropdown list.
In the 4th step, delivery fees should be set up. There are some logic here. (1) If “No Delivery Service” is
selected, then all the amount boxes should be disabled. (2) If “Free Delivery all the time” is selected,
then store owner can set an amount for “Additional Rush Delivery Fee”. If customers want quick
delivery he/she should the pay this specified amount. (3) If “Free Delivery after a minimum of” is
selected, the specified amount from the text box should be filled. This means, if user can purchase
greater than this amount, delivery free will be free. But if he wants quick delivery, then the value
specified in the “Additional Rush Delivery Fee” field should be given. (4) If “Fee Delivery all the time”
is selected, then customer is always needs to pay the specified amount in the textbox. He can also
choose to select rush delivery option.
The final step is to connect store owner’s stripe account to My Bodega platform. The
information will be used while deducing amount during purchase. Transferring funds will also
be performed using the information from the below form.
Once registration process is completed, the store owner can login. He should enter email and
password. This login modal is separate from that for the customers.
This is orders page where store owners can show all the orders and manage them. Once an
order is placed by the customer to this store, the store owner will be shown notification in
real time. This real time feature is done by Node JS and Socket.io technology. He can view all
the items and units, sub-price, total price, status, ordered time etc. He can perform the
following operations also:
Change status of the order
Call the customer (customer’s public phone will be used here)
Text the customer (customer’s public phone will be used here)
For messaging and calling, Twilio service is used. More details about Twilio can be found at:
https://www.twilio.com
Store owner can change order status as:
Preparing
Delivering
Completed
Cancel
If status is changed to “Completed” then the time between ordered and the time when delivered is
calculated and saved into the database.
If customer requests the store owner to cancel the order, then he/she can change the status to
“Cancel”. Request can be sent either by calling or messaging.
This is the “Funds” page. Store owner can see their earnings in this page. He can choose a
time period and earnings will be shown in that period. Cash sales, credit sales, credit card
fees, my bodega online fees all these info can be viewed. There may be some amounts to be
paid to my bodega. These amounts are from the cash sales. In every “cash delivery” order.
This application sums all mybodega fees as due regarding the cash delivery. Store owner can
view the amount to be paid to mybodega. Once he clicks on “Pay My Bodega Fee”, the due
amount will be paid.
From the inventory page, the following operations can be performed:
Add, edit category
Change status of the category
Add product under a category
Update product info and status
Validations are performed so that product or category can’t be duplicated
These are two pictures showing modal for adding new category (top image) and update product. If
store owner make “IN STORE” checked, then the product will be shown in the customer’s panel. It will
be shown under specified category.
This is the “STATS” page. Cash sales, credit card sales, weekly volumes, orders and tips – these
information can be found here. While page loads, this information is shown for one week. The
owner can change or filter by changing the checkbox for “30 days” or “12 months”. The stats will
be change accordingly. Google bar charts and pie charts are used here.
This image is showing the “Chat” window. Real time chat feature between customers and store
owners is implemented here. Node Js and socket.io is used here to make it real time. Skype like
sound alert is integrated here using javascript.