diff --git a/README.md b/README.md index e215bc4..1b793e8 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,91 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# 🎵 NextBeats -## Getting Started +A modern, customizable lofi music player built with Next.js and TypeScript. Perfect for coding, studying, or just chilling. -First, run the development server: +

+ NextBeats Demo +

+ +## ✨ Features + +- 🎨 Beautiful retro TV-style interface +- 🎬 YouTube integration for endless lofi streams +- 🎛️ Multiple sound effects to enhance your experience +- 🌈 Theme customization +- 📻 Channel management (add, edit, delete custom channels) +- 🎚️ Independent volume controls for music and effects +- 💾 Persistent settings with localStorage +- 📱 Responsive design for all devices + +## 🚀 Getting Started + +### Prerequisites + +- Node.js (v16 or higher) +- npm or yarn + +### Installation + +1. Clone the repository: + +```bash +git clone https://github.com/yourusername/next-beats.git +cd next-beats +``` + +2. Install dependencies: + +```bash +npm install +# or +yarn install +``` + +3. Run the development server: ```bash npm run dev # or yarn dev -# or -pnpm dev -# or -bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +4. Open [http://localhost:3000](http://localhost:3000) in your browser to start vibing! 🎧 + +## 🎮 Usage + +- **Channel Navigation**: Use the channel buttons to switch between different lofi streams +- **Sound Effects**: Toggle various ambient sounds (rain, cafe, birds, etc.) to create your perfect atmosphere +- **Volume Control**: Adjust both music and effects volume independently +- **Custom Channels**: Add your own favorite lofi YouTube streams +- **Theme Customization**: Switch between different visual themes + +## 🛠️ Built With + +- [Next.js](https://nextjs.org/) - React framework +- [TypeScript](https://www.typescriptlang.org/) - For type safety +- [Tailwind CSS](https://tailwindcss.com/) - For styling +- [React Player](https://github.com/cookpete/react-player) - For YouTube playback -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## 🤝 Contributing -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +Contributions are what make the open source community amazing! Any contributions you make are **greatly appreciated**. -## Learn More +1. Fork the Project +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 -To learn more about Next.js, take a look at the following resources: +## 📝 License -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +## 🙏 Acknowledgments -## Deploy on Vercel +- All the amazing lofi music creators +- The open source community +- Coffee ☕ -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +--- -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +Made with ❤️ by [Your Name] diff --git a/demo.gif b/demo.gif new file mode 100644 index 0000000..e942300 Binary files /dev/null and b/demo.gif differ