A React Web application for placing and managing orders
The website is designed to allow customers to make purchases of firewood from the Rotary Club of Kelowna Ogopogo charity firewood selling operation, it also includes an administrator portal for management of orders, inventory, selling locations, other administrator accounts, and product pricing.
The MERN stack was used to develop this website, with the database as MongoDB, the backend server language as Node.js, and support from the Express library. The frontend language framework is React.js.
The three major API’s used in the development of this project include Square(credit card payments), Twilio (automated text-messaging), and SendGrid (automated emailing services).
This website was built by a group of 4 UBC students:
Admin Portal
by selecting admin portal on the navbar we reach our admin sign in page:
Two types of administrators exist, regular and super admins. This is determined by sign in credentials.
Regular admins have acess to location specific orders and inventory management. they can approve and deny orders based on their specific location assigned
Here is what the portal looks like for a regular admin of the location 'rutland':
admins can see orders that are ready for pickup, heres what our UBC admin would see:
they can also see orders that need approval (cash and e-transfer orders), when an order is approved a text message is sent to the customer using the Twilio Api
logging in as super admin gives the option to view this page for all locations as well as a dropdown to select individual locations
Super admins have access to a page with search tools and filter tools on all orders in the database:
Other features super admins also have access to is admin accounts management, managing selling locations , and even changing the price of the firewood
Customer Facing Content
When customers open the web application they are greeted with the welcome page, which gives a description of the website and a large order button:
By selecting the order button customers are taken to a form that allows them to fill out their information:
customers can fill out their information and can also select a pickup location from the list of locations available in the database:
Customers will then be given an order summary and options for paying including credit card (integrated with Square API) cash and e-transfer
After orders have been placed customers will recieve a text and email confirmation with their order information, customers can also view the view orders page by using the navbar, there they can enter a phone number and see associated orders and their status:
