https://github.com/huzaifakhandeveloper/lofi-music
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.
https://github.com/huzaifakhandeveloper/lofi-music
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
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/huzaifakhandeveloper/lofi-music
- Owner: HuzaifaKhanDeveloper
- License: other
- Created: 2025-06-06T13:56:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-06T14:15:17.000Z (about 1 year ago)
- Last Synced: 2025-06-17T05:07:05.663Z (about 1 year ago)
- 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
- Language: TypeScript
- Homepage: https://lofi-music-bay.vercel.app/
- Size: 55.3 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🎵 Lofi Music Website
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://redux.js.org/)
[](https://mui.com/)
[](https://opensource.org/licenses/MIT)
[](http://makeapullrequest.com)
Features •
Tech Stack •
Getting Started •
Contributing •
Support Us
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.
## 🎯 Live Demo
## 🌟 Features
🎵 Music Experience
-
Dynamic Theme Switching - Seamlessly switch between day and night modes
-
Rain Effect Toggle - Add ambient rain sounds to enhance your experience
-
Customizable Timer - Set study/work sessions with our built-in timer
-
Fullscreen Mode - Immerse yourself in the experience
-
Background Videos - Dynamic videos that change with the theme
-
Volume Control - Adjust music and rain effect volumes independently
💻 Technical Features
-
Responsive Design - Enjoy on any device
-
Modern UI/UX - Clean interface with smooth animations
-
State Management - Efficient handling with Redux Toolkit
-
Type Safety - Built with TypeScript
-
Performance - Fast loading and smooth transitions
-
Cross-browser - Works on all modern browsers
## 🛠️ Tech Stack
Frontend
- React.js with TypeScript
- Redux Toolkit
- Material-UI & Bootstrap
- SCSS
Tools
- ESLint
- Prettier
- TypeScript
- Webpack
Audio
- React Audio Player
- React Player
- Custom Audio Controls
## 📦 Dependencies
View Dependencies
### Core Dependencies
```json
{
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.1.6",
"@reduxjs/toolkit": "^1.9.5",
"react-redux": "^8.1.1",
"react-router-dom": "^6.2.1"
}
```
### UI Dependencies
```json
{
"@mui/material": "^5.2.7",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"bootstrap": "^5.1.3",
"react-bootstrap": "^2.1.0"
}
```
### Audio Dependencies
```json
{
"react-audio-player": "^0.17.0",
"react-player": "^2.9.0"
}
```
## 🚀 Getting Started
### Prerequisites
Required
- Node.js (v14+)
- npm or yarn
- Modern browser
- Git
Recommended
- VS Code
- React DevTools
- Redux DevTools
- GitHub CLI
### Quick Start
```bash
# Clone the repository
git clone https://github.com/HuzaifaKhanDeveloper/lofi-music.git
# Navigate to project directory
cd lofi-music
# Install dependencies
npm install --legacy-peer-deps
# Start development server
npm start
```
Visit `http://localhost:3005` to see the application.
## 📝 Project Structure
```
src/
├── assets/ # Static assets (images, videos)
├── components/ # Reusable UI components
│ ├── ModifierBoard/ # Timer and controls
│ │ ├── index.tsx # Main component
│ │ ├── styles.scss # Component styles
│ │ └── types.ts # Type definitions
│ ├── RainToggleButton/ # Rain effect toggle
│ └── DarkLightSwitch/ # Theme switcher
├── constants/ # Application constants
├── data/ # Data files
├── layout/ # Layout components
├── pages/ # Page components
├── store/ # Redux store configuration
└── types/ # TypeScript type definitions
```
## 🔧 Development Guidelines
View Development Guidelines
### Component Structure
- Each component should be in its own directory
- Include component-specific styles in a `styles.scss` file
- Define types in a separate `types.ts` file
- Use functional components with hooks
- Implement proper prop typing
### State Management
- Use Redux Toolkit for global state
- Use local state for component-specific state
- Follow Redux best practices for actions and reducers
- Use TypeScript for type-safe state management
### Styling
- Use SCSS for component-specific styles
- Follow BEM naming convention
- Use Material-UI and Bootstrap for base components
- Maintain consistent spacing and colors
### Performance Optimization
- Use React.memo for expensive components
- Implement proper code splitting
- Optimize images and videos
- Use lazy loading where appropriate
### Testing
- Write unit tests for components
- Test Redux actions and reducers
- Implement integration tests
- Use React Testing Library
## 🤝 Contributing
We love your input! We want to make contributing to this project as easy and transparent as possible.
### How to Contribute
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 💖 Support Us
If you enjoy using this project and want to help it grow, consider supporting us!
[](https://github.com/sponsors/HuzaifaKhanDeveloper)
[](https://ko-fi.com/huzaifakhandev)
- **Email:** [huzaifakhandeveloper@gmail.com](mailto:huzaifakhandeveloper@gmail.com)
Your support helps us keep improving and adding new features. Thank you!
## 🔮 Future Plans
Short Term
- Add more lofi music tracks
- Implement user playlists
- Add more ambient sounds
Long Term
- Create a mobile app version
- Add user authentication
- Implement social sharing
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👥 Authors
- Huzaifa Khan - Initial work - [GitHub](https://github.com/HuzaifaKhanDeveloper)
## 🙏 Acknowledgments
- Inspired by various lofi music platforms
- Thanks to all contributors who have helped shape this project
- Special thanks to the open-source community for their amazing tools and libraries
- Thanks to the React and TypeScript communities for their excellent documentation
---
Made with ❤️ by Huzaifa Khan
