{"id":28759509,"url":"https://github.com/huzaifakhandeveloper/lofi-music","last_synced_at":"2026-05-07T05:41:20.665Z","repository":{"id":297629807,"uuid":"997422927","full_name":"HuzaifaKhanDeveloper/lofi-music","owner":"HuzaifaKhanDeveloper","description":"A modern, immersive web app for streaming lofi music and ambient sounds. Enjoy curated moods, customizable background noise, and a built-in focus timer—all in a sleek, distraction-free interface.","archived":false,"fork":false,"pushed_at":"2025-06-06T14:15:17.000Z","size":57941,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-17T05:07:05.663Z","etag":null,"topics":["ambient-sounds","background-noise","chill","focus-timer","lofi","lofi-music","material-ui","modern-ui","music-player","open-source","productivity","react","redux","relaxing","responsive-design","scss","streaming","study-music","typescript","web-app"],"latest_commit_sha":null,"homepage":"https://lofi-music-bay.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HuzaifaKhanDeveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-06T13:56:26.000Z","updated_at":"2025-06-14T16:25:22.000Z","dependencies_parsed_at":"2025-06-06T14:42:52.677Z","dependency_job_id":null,"html_url":"https://github.com/HuzaifaKhanDeveloper/lofi-music","commit_stats":null,"previous_names":["huzaifakhandeveloper/lofi-chill"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HuzaifaKhanDeveloper/lofi-music","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuzaifaKhanDeveloper%2Flofi-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuzaifaKhanDeveloper%2Flofi-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuzaifaKhanDeveloper%2Flofi-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuzaifaKhanDeveloper%2Flofi-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HuzaifaKhanDeveloper","download_url":"https://codeload.github.com/HuzaifaKhanDeveloper/lofi-music/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuzaifaKhanDeveloper%2Flofi-music/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003726,"owners_count":26083610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ambient-sounds","background-noise","chill","focus-timer","lofi","lofi-music","material-ui","modern-ui","music-player","open-source","productivity","react","redux","relaxing","responsive-design","scss","streaming","study-music","typescript","web-app"],"created_at":"2025-06-17T05:07:07.434Z","updated_at":"2025-10-10T11:13:45.057Z","avatar_url":"https://github.com/HuzaifaKhanDeveloper.png","language":"TypeScript","funding_links":["https://github.com/sponsors/HuzaifaKhanDeveloper","https://ko-fi.com/huzaifakhandev"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/assets/imageDemo/demo1.png\" alt=\"Lofi Music Website\" width=\"800px\"/\u003e\n  \n  # 🎵 Lofi Music Website\n  \n  [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n  [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n  [![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge\u0026logo=redux\u0026logoColor=white)](https://redux.js.org/)\n  [![Material-UI](https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge\u0026logo=material-ui\u0026logoColor=white)](https://mui.com/)\n  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](http://makeapullrequest.com)\n  \n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n    \u003ca href=\"#-tech-stack\"\u003eTech Stack\u003c/a\u003e •\n    \u003ca href=\"#-getting-started\"\u003eGetting Started\u003c/a\u003e •\n    \u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e •\n    \u003ca href=\"#-support-us\"\u003eSupport Us\u003c/a\u003e\n  \u003c/p\u003e\n   \n  A modern, interactive lofi music streaming platform built with React.js and TypeScript. Experience a soothing and relaxing ambiance with our carefully curated lofi music collection. Perfect for studying, working, or just relaxing.\n  \n  \u003cimg src=\"https://img.shields.io/github/stars/HuzaifaKhanDeveloper/lofi-music?style=social\" alt=\"GitHub Stars\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/forks/HuzaifaKhanDeveloper/lofi-music?style=social\" alt=\"GitHub Forks\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/HuzaifaKhanDeveloper/lofi-music\" alt=\"GitHub Issues\"/\u003e\n\u003c/div\u003e\n\n## 🎯 Live Demo\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://lofi-music-bay.vercel.app/\"\u003e\n    \u003cimg src=\"public/assets/imageDemo/demo2.png\" alt=\"Live Demo\" width=\"600px\"/\u003e\n    \u003cbr/\u003e\n    \u003cstrong\u003eTry it out →\u003c/strong\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## 🌟 Features \n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003e🎵 Music Experience\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003e\u003cb\u003eDynamic Theme Switching\u003c/b\u003e - Seamlessly switch between day and night modes\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eRain Effect Toggle\u003c/b\u003e - Add ambient rain sounds to enhance your experience\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eCustomizable Timer\u003c/b\u003e - Set study/work sessions with our built-in timer\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eFullscreen Mode\u003c/b\u003e - Immerse yourself in the experience\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eBackground Videos\u003c/b\u003e - Dynamic videos that change with the theme\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eVolume Control\u003c/b\u003e - Adjust music and rain effect volumes independently\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003e💻 Technical Features\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003e\u003cb\u003eResponsive Design\u003c/b\u003e - Enjoy on any device\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eModern UI/UX\u003c/b\u003e - Clean interface with smooth animations\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eState Management\u003c/b\u003e - Efficient handling with Redux Toolkit\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eType Safety\u003c/b\u003e - Built with TypeScript\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003ePerformance\u003c/b\u003e - Fast loading and smooth transitions\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003eCross-browser\u003c/b\u003e - Works on all modern browsers\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## 🛠️ Tech Stack\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eFrontend\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eReact.js with TypeScript\u003c/li\u003e\n          \u003cli\u003eRedux Toolkit\u003c/li\u003e\n          \u003cli\u003eMaterial-UI \u0026 Bootstrap\u003c/li\u003e\n          \u003cli\u003eSCSS\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eTools\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eESLint\u003c/li\u003e\n          \u003cli\u003ePrettier\u003c/li\u003e\n          \u003cli\u003eTypeScript\u003c/li\u003e\n          \u003cli\u003eWebpack\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eAudio\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eReact Audio Player\u003c/li\u003e\n          \u003cli\u003eReact Player\u003c/li\u003e\n          \u003cli\u003eCustom Audio Controls\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## 📦 Dependencies\n\n\u003cdetails\u003e\n\u003csummary\u003eView Dependencies\u003c/summary\u003e\n\n### Core Dependencies\n```json\n{\n  \"react\": \"^18.2.0\",\n  \"react-dom\": \"^18.2.0\",\n  \"typescript\": \"^5.1.6\",\n  \"@reduxjs/toolkit\": \"^1.9.5\",\n  \"react-redux\": \"^8.1.1\",\n  \"react-router-dom\": \"^6.2.1\"\n}\n```\n\n### UI Dependencies\n```json\n{\n  \"@mui/material\": \"^5.2.7\",\n  \"@emotion/react\": \"^11.7.1\",\n  \"@emotion/styled\": \"^11.6.0\",\n  \"bootstrap\": \"^5.1.3\",\n  \"react-bootstrap\": \"^2.1.0\"\n}\n```\n\n### Audio Dependencies\n```json\n{\n  \"react-audio-player\": \"^0.17.0\",\n  \"react-player\": \"^2.9.0\"\n}\n```\n\u003c/details\u003e\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eRequired\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eNode.js (v14+)\u003c/li\u003e\n          \u003cli\u003enpm or yarn\u003c/li\u003e\n          \u003cli\u003eModern browser\u003c/li\u003e\n          \u003cli\u003eGit\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eRecommended\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eVS Code\u003c/li\u003e\n          \u003cli\u003eReact DevTools\u003c/li\u003e\n          \u003cli\u003eRedux DevTools\u003c/li\u003e\n          \u003cli\u003eGitHub CLI\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n### Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/HuzaifaKhanDeveloper/lofi-music.git\n\n# Navigate to project directory\ncd lofi-music\n\n# Install dependencies\nnpm install --legacy-peer-deps\n\n# Start development server\nnpm start\n```\n\nVisit `http://localhost:3005` to see the application.\n\n## 📝 Project Structure\n\n```\nsrc/\n├── assets/        # Static assets (images, videos)\n├── components/    # Reusable UI components\n│   ├── ModifierBoard/    # Timer and controls\n│   │   ├── index.tsx     # Main component\n│   │   ├── styles.scss   # Component styles\n│   │   └── types.ts      # Type definitions\n│   ├── RainToggleButton/ # Rain effect toggle\n│   └── DarkLightSwitch/  # Theme switcher\n├── constants/     # Application constants\n├── data/         # Data files\n├── layout/       # Layout components\n├── pages/        # Page components\n├── store/        # Redux store configuration\n└── types/        # TypeScript type definitions\n```\n\n## 🔧 Development Guidelines\n\n\u003cdetails\u003e\n\u003csummary\u003eView Development Guidelines\u003c/summary\u003e\n\n### Component Structure\n- Each component should be in its own directory\n- Include component-specific styles in a `styles.scss` file\n- Define types in a separate `types.ts` file\n- Use functional components with hooks\n- Implement proper prop typing\n\n### State Management\n- Use Redux Toolkit for global state\n- Use local state for component-specific state\n- Follow Redux best practices for actions and reducers\n- Use TypeScript for type-safe state management\n\n### Styling\n- Use SCSS for component-specific styles\n- Follow BEM naming convention\n- Use Material-UI and Bootstrap for base components\n- Maintain consistent spacing and colors\n\n### Performance Optimization\n- Use React.memo for expensive components\n- Implement proper code splitting\n- Optimize images and videos\n- Use lazy loading where appropriate\n\n### Testing\n- Write unit tests for components\n- Test Redux actions and reducers\n- Implement integration tests\n- Use React Testing Library\n\u003c/details\u003e\n\n## 🤝 Contributing\n\nWe love your input! We want to make contributing to this project as easy and transparent as possible.\n\n### How to Contribute\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 💖 Support Us\n\nIf you enjoy using this project and want to help it grow, consider supporting us!\n\n[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ff69b4?style=for-the-badge)](https://github.com/sponsors/HuzaifaKhanDeveloper)\n[![Ko-fi](https://img.shields.io/badge/Buy%20me%20a%20coffee-Ko--fi-29abe0?style=for-the-badge\u0026logo=ko-fi)](https://ko-fi.com/huzaifakhandev)\n\n- **Email:** [huzaifakhandeveloper@gmail.com](mailto:huzaifakhandeveloper@gmail.com)\n\nYour support helps us keep improving and adding new features. Thank you!\n\n## 🔮 Future Plans\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eShort Term\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eAdd more lofi music tracks\u003c/li\u003e\n          \u003cli\u003eImplement user playlists\u003c/li\u003e\n          \u003cli\u003eAdd more ambient sounds\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ch3\u003eLong Term\u003c/h3\u003e\n        \u003cul align=\"left\"\u003e\n          \u003cli\u003eCreate a mobile app version\u003c/li\u003e\n          \u003cli\u003eAdd user authentication\u003c/li\u003e\n          \u003cli\u003eImplement social sharing\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👥 Authors\n\n- Huzaifa Khan - Initial work - [GitHub](https://github.com/HuzaifaKhanDeveloper)\n\n## 🙏 Acknowledgments\n\n- Inspired by various lofi music platforms\n- Thanks to all contributors who have helped shape this project\n- Special thanks to the open-source community for their amazing tools and libraries\n- Thanks to the React and TypeScript communities for their excellent documentation\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/followers/HuzaifaKhanDeveloper?label=Follow\u0026style=social\" alt=\"GitHub Followers\"/\u003e\n  \u003cbr/\u003e\n  Made with ❤️ by Huzaifa Khan\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuzaifakhandeveloper%2Flofi-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuzaifakhandeveloper%2Flofi-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuzaifakhandeveloper%2Flofi-music/lists"}