Lehigh Valley Hackathon - Full Stack Snacks
Team Members and What we Learned - Full Stack Snacks
- Angela Cui - I learned how to use AWS Bedrock and S3 buckets and implementing that into React
- Ester Frank - I learned how to use React and I gained some familiarity with using git
- Ahmed Lawal - I learned how to use React to make dynamic user friendly designs and buttons
- Sophia Chen - I learned how to use React and its associated libraries (+ Node,js) to implement dynamic web elements
What it does
Project Overview
This web app consists of 4 main components: ChatBot, Mood Tracker, Quick Tips, and Resources to assist Lehigh Students with their mental health on campus.
Project Link
Demo
Inspiration
- Lehigh University being ranked 2nd in most hours spent studying.
Selected Track
- [ ] Academic Career Success
- [ ] Course Planning
- [X] Health and Wellness
- [ ] Campus and Community Resources
- [ ] Financial and Resource Management
- [ ] Diversity, Social, and Extracurricular Engagement
Accomplishments that we're proud of
What Special Features did we include?
- [X] AI
- [X] AWS
- [X] Stunning Visuals
- [X] Mobile Compatible
How we built it
Tech Stack
- Version Control - Git
- Web - React - Javascript, HTML, CSS
- AWS - S3 Buckets, Lambda - Python, API Gateway, Bedrock
- AI - Bedrock - Claude Sonnet 3
- Testing - Postman
- Deployment - Vercel
Challenges we faced
- Github merged conflicts between branches - resolved by teaching all members how to use Github properly
- AWS Lambda handler issue Internal Server error 500 or Bad Gateway error 502 - needed to use proper request and response JSON formatting or wrong arn modelId
- Merging Component files together - resolved through carefully code reviewing and looking through console
- Designing using CSS - learned how to use CSS Grids for more responsive website.
Project Details by component
| Component Name | Description |
|---|---|
| Chat Bot | Chat uses Bedrock and Lehigh Wellness related Knowledge Bases (from custom PDF) in S3 Buckets to curate ideal responses for students that need a quick mental chat with AI. The bot calls an API call that calls a Lambda function/handler that is written in Python. |
| Mood Tracker | The Mood Tracker allows users to log their daily emotions and mental state. It helps students identify emotional patterns and trends over time by visually tracking their mood in a user-friendly interface. The data is visualized in an interactive pie chart rendered using the Recharts library. JavaScript handles the mood logging and state management, while responsive styling is provided by CSS. |
| Quick Tips & Resources | The Quick Tips feature provides immediate advice to students. This advice is aimed at relieving stress, improving focus, and managing anxiety through short, actionable tips. The Resources section offers students a curated collection of mental health tools, information, and contact points at Lehigh University. It gives students easy access to mental health services on campus. |
| Calendar | The Calendar allows provides users a convenient way to navigate between different time periods and reflect on their mental health journey. It leverages React and the React-Calendar library to provide an intuitive date-picking interface. JavaScript handles the logic behind date selection. |
What's next for Mindful Hawks
- Since our chatBot is highly reliant on AWS Bedrock it's difficult to keep going on that aspect.
- Since our calendar doesn't have high functionality yet, we would like to redesign the calendar in a way that when you click on the chosen date, you are able to track your mood for that specific day. Further more, for different months, the calendars can have different themes based on the month or season.
Appendix
References
Built With
- amazon-web-services
- api-gateway
- bedrock
- css
- github
- html
- iam
- javascript
- lambda
- python
- react
- s3
- vercel

Log in or sign up for Devpost to join the conversation.