2024 Solution Challenge: Hearo 🦸🏻‍♀️

GDSC EWHA - Team GoogleEyes

Minju Choi(@hmuri), Cherry Yi(@official-Cherry), Youngseo Lim(@yslim21), Haewon Lee(@Haewonny)

💡 Project Introduction

Hearo is a web-based, voice-driven online shopping service designed specifically for individuals with visual impairments.
Its primary goal is to serve as an eye for the blind. Hearo uses Google AI to provide oral descriptions of product nutrition fact images and to summarize product reviews.
This initiative aims to improve the overall shopping experience for individuals with visual impairments.

🎯 Hearo's Goal

🛠️ Tech Stack

Our frontend application leverages a robust set of technologies and libraries to ensure high performance, responsiveness, and an engaging user interface:

• React 18.2.0: A JavaScript library for building user interfaces, ensuring a reactive and component-based development approach.
• TypeScript 4.9.5: Adds static type definitions to JavaScript, enhancing code quality and maintainability.
• Material-UI 5.15.9: A comprehensive library of React UI components that implement Google's Material Design, used for crafting a visually appealing and consistent user interface.
• Styled Components 6.1.8 & Emotion 11.11.3: CSS-in-JS libraries that allow for styling applications with actual CSS syntax inside JavaScript.
• Recoil 0.7.7: A state management library for React that provides a more efficient way to manage global state.
• React Router DOM 6.22.0: Manages navigation and routing in our single-page application (SPA), enabling seamless page transitions without reloading.
• React Query 3.39.3: A powerful tool for fetching, caching, and updating asynchronous data in React applications, contributing to a smoother data management experience.
• Axios 1.6.7: A promise-based HTTP client for making HTTP requests to fetch or save data, making it easier to communicate with back-end services.
• Lottie-React 2.4.0: Enables the use of Lottie animations in React applications, enhancing the UI with high-quality animations.
• React Speech Recognition 3.10.0 & Web Speech Cognitive Services 7.1.3: Integrates speech recognition capabilities into the app, offering users an interactive and accessible interface.

☁️ How to run

1. Clone project

$ git clone https://github.com/GoogleEyes-ewha/hearo-web.git

2. Run
   • npm start: Runs the app in development mode.
   • npm run build: Builds the app for production to the build folder.

🖥️ Live Demo

Experience Hearo right now 👉🏻 Click here!

🚀 Keyboard Shortcuts

To enhance your experience and navigation on our webpage, we've implemented the following keyboard shortcuts:

• Ctrl + Alt: main
• Ctrl + X: Logout
• Ctrl + Shift: Login
• Ctrl + Enter: Display the login/signup modal window
• Alt + 1,2,3,4,5,6,7,8: Directly navigate to category pages
• Ctrl + Right/Left Arrow: Move through product search result pages one page at a time
• Tab + Enter: Access components
• Tab: Navigate components

These shortcuts are designed to make your navigation smoother and more efficient. Enjoy exploring Hearo with ease!

👩🏻‍💻 Back-End Contributors

Minju Choi	Cherry Yi
@hmuri	@official-Cherry