https://github.com/craftingweb/sbuhack
https://github.com/craftingweb/sbuhack
hero-icons react react-circular-progressbar react-slider
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/craftingweb/sbuhack
- Owner: craftingweb
- Created: 2025-02-22T17:21:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-23T12:41:31.000Z (about 1 year ago)
- Last Synced: 2025-03-30T01:11:11.074Z (about 1 year ago)
- Topics: hero-icons, react, react-circular-progressbar, react-slider
- Language: JavaScript
- Homepage: https://focusflowapp.vercel.app
- Size: 178 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FocusFlow: A Smarter Way to Stay Productive https://focusflowapp.vercel.app/
## 🎯 Inspiration
As students, we often struggle with distractions and time management. Inspired by the Pomodoro Technique, we wanted to create an intuitive and visually engaging app that helps users stay focused while maintaining a healthy work-life balance.
## 🛠What We Learned
Throughout this project, we deepened our understanding of React hooks, state management, and component composition. We also explored UI/UX principles to ensure an intuitive user experience.
## 🔧 How We Built It
- **Frontend:** React.js for the UI and state management
- **Styling:** Tailwind CSS for a clean and responsive design
- **Features:** Customizable timers, progress visualization using `react-circular-progressbar`, and audio alerts for breaks
- **Version Control:** GitHub for collaboration and tracking progress
## 🚧 Challenges We Faced
- **Dependency Issues:** Resolving compatibility problems between `react-circular-progressbar` and React 19
- **State Management:** Ensuring real-time updates of the timer while maintaining smooth UI performance
- **Time Constraints:** As beginners, balancing feature implementation and debugging within the hackathon timeframe was tough
## 🚀 What's Next?
- Adding task tracking and analytics
- Integrating notifications and AI-powered productivity insights
- Mobile-friendly version for on-the-go focus sessions
FocusFlow is just the beginning—our goal is to empower users with better productivity habits. 💡