Revive

• 

  Revive Landing Page

• 

  Revive Dashboard

Inspiration

As someone who enjoys hackathons and has a passion for wellness, I wanted to combine the two to create something that could make a positive impact on people's lives. Revive is the result of that fusion—a web app designed to promote emotional intelligence, mindfulness, and overall well-being for hackathon participants.

What it does

Revive is a wellness app that aims to elevate the user's emotional and mental state while fostering self-awareness and mindfulness. The app allows users to log their current emotional state, providing a moment of reflection and self-awareness. Additionally, it displays stretches to encourage users to engage in physical movement, promoting bodily awareness and increased focus. To combat digital eye strain and maintain healthy eyesight, Revive also utilizes the American Optometric Association's "20-20-20 rule," reminding users to look at something 20 feet away for 20 seconds every 20 minutes. Moreover, the app fetches inspirational quotes, providing doses of motivation and guidance.

How we built it

For this web app, I accomplished front-end development using React and Chakra UI. React allowed me to create a dynamic and responsive user interface, while Chakra UI simplified the process of designing an aesthetically pleasing and intuitive app. To make the app functional, I learned how to call APIs and display the retrieved data in real-time. The exercise API, quote API, and timer for the 20-20-20 rule were all integrated to ensure a positive user experience. For deployment, I chose Cloudflare, making the app easily accessible to users. I created the logo and the other landing page assets using Adobe Illustrator.

Challenges we ran into

As a first-time web app developer, I had to navigate through the learning curve of React and Chakra UI. Understanding state management and component interactions was both exciting and daunting. Additionally, integrating APIs and handling asynchronous data fetching required a lot of debugging.

Accomplishments that we're proud of

Despite the challenges, I'm immensely proud of creating Revive, my first web app. Learning React, Chakra UI, and API integration was a significant achievement for me. Seeing the app come to life with a nice design and functional features was very rewarding. I'm proud that Revive has the potential to positively impact the hackathon community by promoting emotional intelligence, mindfulness, and overall well-being.

What we learned

I learned valuable skills in front-end development, React, and Chakra UI, enabling me to create modern and user-friendly web applications. Working with APIs taught me the importance of data handling and real-time updates. The process of deploying on Cloudflare expanded my knowledge of server-side considerations and hosting a live project.

What's next for Revive

The immediate next step would be to develop a robust backend system that enables users to securely log in and have their log information stored. Beyond that, I envision expanding the app's features to offer personalized well-being recommendations based on user input and emotional logs. This could involve allowing users to set their own wellness goals that align with their hackathon workload and utilizing machine learning algorithms to analyze patterns and provide a tailored user experience. Revive can also collaborate with hackathon organizers to offer a customized experience for all participants by allowing them to integrate their own physical wellness and mindfulness activities directly into the app. To promote a sense of community, Revive can introduce social features that allow participants to share wellness tips, progress, and words of encouragement with each other. Finally, Revive could integrate coding challenges that encourage participants to incorporate mindfulness and focus into the coding process, proving that wellness and productivity go hand in hand.

Built With

• adobe-illustrator
• api-ninjas
• chakra-ui
• cloudflare
• github
• javascript
• react