Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bachiriy/musicstream
https://github.com/bachiriy/musicstream
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bachiriy/musicstream
- Owner: bachiriy
- Created: 2024-12-31T15:09:12.000Z (6 days ago)
- Default Branch: main
- Last Pushed: 2024-12-31T15:39:07.000Z (6 days ago)
- Last Synced: 2024-12-31T16:25:34.411Z (6 days ago)
- Language: HTML
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MusicStream
## Overview
MusicStream is a modern web application for streaming and organizing music, built with Angular 17. The application provides an intuitive user experience with advanced features like state management using NgRx, audio playback controls, and responsive design. It also supports local data persistence via IndexedDB, ensuring offline functionality.
---
## Features
### Core Features
- **Track Management (CRUD):**
- Add, update, delete, and view tracks.
- Tracks include:
- Song name
- Artist name
- Optional description (max 200 characters)
- Date added (automatic)
- Duration (calculated automatically)
- Music category (e.g., Pop, Rock, Rap, etc.)
- **Audio Player:**
- Controls for play, pause, next, and previous.
- Volume and progress control.
- Playback states managed using NgRx (`playing`, `paused`, `buffering`, etc.).
- **Data Persistence:**
- Store metadata and audio files in IndexedDB.
- Support for MP3, WAV, and OGG formats (max file size: 15MB).
- **Responsive Design:**
- Adapted for mobile, tablet, and desktop screens.
### Bonus Features
- Cover images for tracks.
- Drag-and-drop functionality for reordering tracks.
- Integration with a song lyrics API.
- Advanced filters for track search.
---
## Technical Stack
- **Frontend Framework:** Angular 17
- **State Management:** NgRx
- **Persistence:** IndexedDB
- **Styling:** TailwindCSS
- **Additional Libraries:**
- RxJS
- Web Audio API
- Jasmine/Karma for testing
- **Tools:**
- Figma for mockups
- Docker for containerization
---
## Installation and Setup
### Prerequisites
- Node.js (>= 18.x)
- Angular CLI (>= 17.x)
- A modern web browser
### Steps
1. Clone the repository:
```bash
git clone https://github.com/bachiriy/MusicStream.git
```
2. Navigate to the project directory:
```bash
cd app
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
ng serve
```
5. Open the application in your browser:
```
http://localhost:4200
```
---
## Project Structure
```plaintext
src/
├── app/
│ ├── components/ # UI components
│ ├── services/ # API and application logic
│ ├── state/ # NgRx actions, reducers, effects
│ ├── modules/ # Modular feature implementations
│ ├── pages/ # Application pages
├── assets/ # Static files (images, etc.)
├── environments/ # Environment-specific configurations
```
---
## Usage
### Add a Track
1. Navigate to the Library page.
2. Click on "Add Track".
3. Fill out the form and upload a valid audio file (MP3, WAV, OGG).
4. Submit the form to save the track.
### Play a Track
1. Navigate to the Library page.
2. Select a track to open the detailed view.
3. Use the audio player controls to play or pause the track.
### Search and Filter Tracks
1. Use the search bar on the Library page to find tracks by name or category.
---
## Testing
Run unit tests using Jasmine/Karma:
```bash
ng test
```
---
## Deployment
Build the application for production:
```bash
ng build --prod
```
Serve the application using any static server:
```bash
npx serve dist/app
```
---
## Contributing
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Commit your changes:
```bash
git commit -m "Add feature description"
```
4. Push to your branch:
```bash
git push origin feature-name
```
5. Submit a pull request.
---
## License
This project is licensed under the MIT License. See the LICENSE file for details.
---
## Contact
For inquiries, please contact [[Me](mailto\:[email protected])].