"Benê Arte e Café" is a coffee shop located in the heart of São Paulo, which has conceived a brilliant concept: Inclusive Menus. The "Menu Speaker" represents an innovative approach tailored to visually impaired individuals. Through keyboard interaction, it plays audio to assist these individuals in seamlessly navigating the coffee shop's website and menu offerings.
The Benê Arte e Café website comprises 5 distinct pages: the main homepage, the keyboard command usage instructions page, the coffee shop's captivating history page, the comprehensive menu page, and the shopping cart page. The site's functionalities are entirely keyboard-operated, although on-page buttons are also available for use. This design caters not only to visually impaired individuals but also to scenarios where a non-disabled companion is accompanying them.
On the homepage, you'll find the Menu Speaker logo along with a "Next" button. Upon pressing the "0" button, an audio prompt will guide the user, providing instructions on how to initiate their experience on the website.
On the instructions page, you'll encounter a text detailing how the keyboard buttons operate. For visually impaired individuals, pressing "0" will trigger an audio playback of the same instructions provided in text format. Additionally, there are buttons available to return to the previous screen, proceed to the next screen, and call for assistance from the waiter in case of any uncertainties.
On the "Benê Arte e Café" page, you will find the coffee shop's logo accompanied by a narrative recounting the establishment's history. For visually impaired individuals, pressing "0" will activate an audio playback containing the same content as displayed on the screen. Additionally, there are buttons available to return to the previous screen, proceed to the next screen, and summon assistance from the waiter in case of any queries.
On the menu page, you'll find a selection of products available at the establishment. In this setup, only one product is displayed at a time, allowing you to add or remove the focused product from the cart. Each product is accompanied by a photo and a concise description, including its price. Using keyboard prompts or on-screen buttons, you can navigate to the next product or return to the previous one. Pressing "0" for each product will trigger an audio playback of the product's description and price. Additionally, buttons are provided to go back to the previous screen, proceed to the next screen, and request assistance from the waiter in case of inquiries.
On the cart page, there's a concise textual summary of the ordered items. Each entry includes the product name, the quantity added to the cart, and its corresponding price. At the end of the list, the total purchase amount is displayed. This page intentionally excludes an audio playback of the total value due to the nature of the audio recordings being pre-recorded rather than generated through text-to-speech. You'll also find buttons available to navigate back to the previous screen and to call the waiter for assistance in case of questions. The concept revolves around the idea that once the individual finishes selecting items and placing them in the cart, they would press the "Call Waiter" button. The waiter would then retrieve the tablet with the person's order and take it to the kitchen for preparation.
HTML: Plays a crucial role in ensuring the proper functioning of the application.SCSS (Sass): Plays a pivotal role in indicating user interaction with the graphical interface.TypeScript: Will provide all the functionalities of the application.Angular 16.1.6: Transforms the application into a Single Page Application (SPA).
- bootstrap
version 5.3.1 - angular fontawesome
version 0.13.0 - uuid
version 9.0.0
The project has been completed.
In this repository, you have access to all the files and codes of the application.
To open the project, simply clone the repository and enter the command npm install in the terminal to install the project's packages.
To run the project, simply type the command ng serve in the terminal and navigate to the specified localhost address.