Venue Blog:
The Concept
Venue is a progressive web application that is catering to the need to transform the culture of the dining experience through the use of technology. The concept in a nutshell is to allow a user to find menu items in restaurants that will reflect the diet of the user. So let's say for instance John is on a Keto diet. When John opens up the Venue application on his phone he will be able to locate restaurants nearby and pull out the restaurants menu items that tailor to his diet.
The implementation:
React.js
Serverless
AWS
Mongo DB
Material UI
For The implementation of the Venue. Deciding to use AWS for our cloud platform to handle all of our backend. Mongo DB is what is being utilized to store data like the customer orders or menu items that are being entered from adminstraion. Material UI is being used to implement design structure. And the Serverless framework is used to handle all of our backend call on a pay per use bases to minimize cost of running a server.
Home Page:
From the home page a user will be able to login/logout. View Diet specific menus by utilizing switches that will then only display specific diet menu items in nearby locations. The user will be able to choose a menu items, choose a quantities, and then be able to add those menu items to their personal carts. A modal pops up that will then display an option to customize their order.
Menu Item Cards:
This is the view in which we are mapping through each menu item that is being stored through MongoDB which is triggered by the AWS Lambda function to call the API GET request through AWS Amplify. Material UI was used to style the Card below.
Administrator Panel:
This is the Admin Panel that is used for Administration to control certain functionality like Adding a Menu Item to the Page, allows the Administrator to view all orders that were placed. And also be able to remove or update any existing menu items
All Processed Orders Page:
This is a table that is displaying the line details for all orders that were made. The table was created by using the Table component from Material UI. The information that is being grabbed is from transaction that is being processed after the payment is confirmed.()
Administrator Menu Input:
Administrator will be able to use this form to allow menu items to be stored into the Mongo DB through API Gateway Post request. A user will be able to upload an image that will be stored through an AWS S3 bucket and this information is what is used to populate the home page menu items from the MongoDB.
Checkout Page:
The Checkout Cart Page allows users to to change the quantity of items in the card. Display which items are actually in the cart and allow them to remove items from the cart if needed. Using the Table and Button components made for quick reusable styling to create the cart.
Process Payments Page:
This is the form Venue uses to process payments from the customer. The user will be able to send the credit card information in which Stripe is used to process the payment which is PCI compliant. There are also fields in this form to gather other information from the user. This information is then being sent to the MongoDb through an AWS Lambda function.Ultimately Completing the transaction.
Top comments (0)