• 

  this is sub page

• 

  if we choose the our domain it will redirect to the page where domain is connected

• 

  this is the login page

🚀 FocusFlow – Your Personalized Study Companion

💡 Inspiration

The idea for FocusFlow was born out of a real problem faced by an engineering student who was struggling to stay consistent and productive. Between juggling timers, scattered notes, switching between YouTube videos, music apps, and study tools, managing study time became chaotic. This sparked the idea to build an all-in-one platform that helps students not just study—but do so with focus, clarity, and motivation. We wanted to create something that would help all students—regardless of their field—get into their “flow state.”

⚙️ What It Does

FocusFlow is a field-specific, all-in-one study platform designed for students in Engineering, Medical, Arts, Commerce, and Science.

Key Features:

• User Authentication and profile personalization
  
• Field Selection with custom content and layout
  
• Persistent Study Timer with break management and streak tracking
  
• Field-Specific Content & Tools:
  
  • Engineering: 100+ abbreviations, diagrams, YouTube channels
    
  • Medical: Body system explorer, anatomy illustrations, terms
    
  • Arts: Digital drawing canvas with color and brush controls
    
  • Commerce: Business calculator, golden rules, finance terms
    
  • Science: Scientific diagrams and curated learning content
    
• Spotify Integration for field-specific or custom study music
  
• Motivational Quotes that rotate every 10 seconds
  
• Community Forum, Resource Hub, and Progress Tracker
  
• Dark/Light Mode with responsive UI for all screen sizes
  

🛠️ How We Built It

• Frontend: React 18 + Vite for blazing-fast SPA performance
  
• UI: Tailwind CSS, Glassmorphism design, Framer Motion transitions
  
• State Management: Zustand for lightweight and persistent global state
  
• TypeScript: For type safety and better scalability
  
• LocalStorage: For saving sessions, timer state, and user preferences
  
• Spotify & YouTube Embeds: For personalized multimedia content
  

🧱 Challenges We Ran Into

• Making the study timer persist across routes and browser sessions
  
• Designing for 5 academic streams while maintaining a cohesive UX
  
• Ensuring full mobile responsiveness without bloating the UI
  
• Managing performance with large embedded media like diagrams and videos
  
• Spotify Playback Limitation: Due to API restrictions, we can’t play music directly inside the website yet—we currently embed playlists and plan to enable full playback in future versions

🏆 Accomplishments That We're Proud Of

• Designed and built a fully functional, modern study platform
  
• Created distinct field-specific learning environments within one app
  
• Achieved smooth UX with advanced features like persistent timers and music
  
• Successfully integrated community-focused and motivational tools
  
• Balanced aesthetic design with real productivity utility
  

📚 What We Learned

• How to architect modular React apps for large-scale feature sets
  
• Handling persistent user data with Zustand and local storage
  
• Designing for multi-field educational UX without clutter or confusion
  
• How powerful a clean, student-first UI can be in improving engagement
  
• The importance of user motivation via streaks, quotes, and music

🔮 What's Next for FocusFlow

• 🎧 Enable direct in-app music playback without relying on external embeds
  
• 🤖 Add an AI Study Buddy for doubt solving and daily suggestions
  
• 📱 Develop a mobile app version (React Native)
  
• 🏆 Introduce gamification: badges, streak multipliers, and level-ups
  
• 📝 Add note-taking and peer-to-peer content sharing
  
• 🎓 Launch an Admin Dashboard for teachers to upload content
  
• 🌐 Support multi-language options for inclusivity
  

Built With

• canvas
• framer
• localstorage
• react
• spotify
• tailwind
• typescript
• vite
• youtube