MemoryBox

• 

  Home Page

Inspiration

The idea behind MemoryBox was to develop a useful and sympathetic tool for caregivers. In addition to offering meaningful, entertaining activities that support patients in strengthening and preserving their memories, it is designed to make the daily tasks of delivering care easier. The main notion is that technology can help us preserve the tremendous stories that may be found in a simple photo.

What it does

MemoryBox is an all-inclusive online resource for caretakers. It provides a range of resources to help patients manage and support their everyday lives. Its primary function is a customized photo memory game in which caregivers can record the right answers while uploading their own photos. After then, patients can participate in the game by expressing their responses and getting immediate feedback. Additionally, the app has sections for scheduling daily tasks, tracking medications, and managing patient information.

How we built it

1.The project was built using a modern frontend stack to ensure a fast, responsive, and intuitive user experience. 2.Frontend: We used React to create a dynamic, single-page application with a modular, component-based structure. 3.Styling: Tailwind CSS provided a utility-first approach to quickly build a clean, mobile-first, and fully responsive user interface. 4.Data Persistence: We utilized the browser's local storage to ensure that patient information and game data persist across browser sessions and do not get lost on a page refresh or re-login. 5.Speech Recognition: The interactive memory game uses the browser's native MediaRecorder API to capture speech and a simulated backend API to transcribe the spoken answers into text for validation. 6.Routing: React Router was used to manage navigation between the different sections of the dashboard.

Challenges we ran into

Implementing a speech recognition feature was a key challenge due to our backend-as-a-service model, which wasn't compatible with a traditional speech-to-text API. We tackled this by creating a local workaround that simulates the transcription process. Instead of abandoning the feature, we captured the audio using the browser's native MediaRecorder API and then compared the spoken words directly to the correct answer using Gemini API. This taught us to be creative and adaptable when faced with technical constraints and to find alternative solutions to keep a project moving forward.

Accomplishments that we're proud of

We are most proud of building an interactive memory game that uses voice recognition, making it accessible and engaging for patients. We're also proud of creating a comprehensive dashboard that centralizes all the essential tools a caregiver needs into one clean and easy-to-use interface. The fact that the entire application is fully responsive and works well on all devices is another key accomplishment.

What we learned

Building this project taught us a lot about managing state and data persistence in modern web applications. We learned how to handle asynchronous browser APIs, such as MediaRecorder, and the importance of choosing the right CSS properties for responsive and aesthetically pleasing layouts. It was a great lesson in building an application that is not only technically sound but also genuinely helpful and empathetic to its users.

What's next for MemoryBox

1.A proper backend integration 2.Improved UI/UX 3.Accessible for hospitals too 4.Caregivers can add many patients.

Built With

• geminiapi
• javascript
• mediarecorderapi
• react
• supabase