🎵 Lofi Music Website

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

Try it out →

🌟 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

{
  "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

{
  "@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

{
  "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

# 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!

• Email: 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 file for details.

👥 Authors

• Huzaifa Khan - Initial work - GitHub

🙏 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