{"id":29436111,"url":"https://github.com/targter/spotify-app","last_synced_at":"2026-04-09T21:05:03.321Z","repository":{"id":301588994,"uuid":"1009738489","full_name":"Targter/SPOTIFY-app","owner":"Targter","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-04T17:59:38.000Z","size":1045,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-13T05:01:46.054Z","etag":null,"topics":["javascript","react","reactjs","redux","shazamcore-api","spline","spotify-api","tailwindcss","websocket"],"latest_commit_sha":null,"homepage":"https://musicify.abhaybansal.site/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Targter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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-27T16:17:55.000Z","updated_at":"2025-07-04T17:59:41.000Z","dependencies_parsed_at":"2025-06-27T17:31:15.909Z","dependency_job_id":"9ecd0990-6fd4-4d7c-b0aa-da908c775fe0","html_url":"https://github.com/Targter/SPOTIFY-app","commit_stats":null,"previous_names":["targter/spotify-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Targter/SPOTIFY-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Targter%2FSPOTIFY-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Targter%2FSPOTIFY-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Targter%2FSPOTIFY-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Targter%2FSPOTIFY-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Targter","download_url":"https://codeload.github.com/Targter/SPOTIFY-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Targter%2FSPOTIFY-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265091733,"owners_count":23710033,"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","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":["javascript","react","reactjs","redux","shazamcore-api","spline","spotify-api","tailwindcss","websocket"],"created_at":"2025-07-13T05:01:21.105Z","updated_at":"2026-04-09T21:05:03.268Z","avatar_url":"https://github.com/Targter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Musicify - A Premium Music Discovery Platform\r\n#\r\n![Musicify Navbar](https://github.com/Targter/SpotifyClone1-Celebal/blob/2a18e806aa6e161cad18dafc630afc368cd0b8c9/public/search.png)  \r\n*Screenshot of the responsive navbar featuring search, playlists, liked songs, and user profile options.*\r\n\r\n## Overview\r\n\r\nMusicify is a modern, feature-rich music discovery application built with React, Redux, and the Shazam Core API. Designed to deliver a premium, Spotify-inspired experience, Musicify allows users to explore songs, artists, and albums, create and manage playlists, like their favorite tracks, and enjoy a visually stunning, responsive interface. With a sleek frosted glass UI, smooth GSAP animations, and a music-wave aesthetic, Musicify is optimized for seamless performance across all devices, from mobile phones to desktops.\r\n\r\n## Features\r\n\r\n- **Enhanced Search Functionality**:\r\n  - Search for songs, artists, and albums using an intuitive, debounced search bar powered by the Shazam Core API.\r\n  - Filter results by type (all, track, artist, album) with dynamic query formatting for precise results.\r\n  - Display real-time search results with artist details, album artwork, and track previews.\r\n\r\n- **Playlist Management**:\r\n  - Create, edit, and delete custom playlists with a user-friendly modal interface.\r\n  - Add or remove songs from playlists with a single click via a context menu.\r\n  - View all playlists in a dedicated library view, with track counts and seamless navigation.\r\n\r\n- **Music Playback**:\r\n  - Play song previews with a responsive player, featuring play/pause controls and a dynamic equalizer visualizer for the current track.\r\n  - Queue tracks from playlists or search results for continuous playback.\r\n  - Add recently played tracks to a dedicated history for quick access.\r\n\r\n- **Like Songs**:\r\n  - Save favorite tracks to a \"Liked Songs\" playlist with a single click.\r\n  - Toggle likes with a smooth GSAP animation, visually indicating favorited tracks.\r\n\r\n- **Responsive Design**:\r\n  - Fully responsive UI optimized for mobile, tablet, and desktop devices.\r\n  - Frosted glass effects, gradient accents, and music-wave animations for a premium aesthetic.\r\n\r\n- **Dynamic Visuals**:\r\n  - GSAP-powered animations for track rows, playlist menus, and sidebar interactions, creating a fluid, engaging experience.\r\n  - Wave-like oscillations for the currently playing track, enhancing the music-inspired theme.\r\n\r\n- **Library and Personalization**:\r\n  - Explore recently played tracks, liked songs, and custom playlists in a unified library view.\r\n  - Personalized greeting (\"Good Morning,\" \"Good Afternoon,\" or \"Good Evening\") based on the time of day.\r\n\r\n## Tech Stack\r\n\r\n- **Frontend**: React, Redux Toolkit, Tailwind CSS\r\n- **Animations**: GSAP (GreenSock Animation Platform)\r\n- **API**: Shazam Core API (via RapidAPI)\r\n- **Icons**: Lucide React\r\n- **State Management**: Redux for managing player state, playlists, and liked songs\r\n- **Build Tools**: Vite for fast development and production builds\r\n- **Dependencies**: Axios for API requests, React Router for navigation\r\n\r\n## Installation\r\n\r\nTo set up Musicify locally, follow these steps:\r\n\r\n1. **Clone the Repository**:\r\n   ```bash\r\n   git clone https://github.com/Targter/SpotifyClone1-Celebal.git\r\n   cd musicify\r\n   ```\r\n\r\n2. **Install Dependencies**:\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Set Up Environment Variables**:\r\n   Create a `.env` file in the root directory and add your Shazam Core API key:\r\n   ```env\r\n   VITE_RAPIDAPI_KEY=your-rapidapi-key\r\n   VITE_RAPIDAPI_HOST=shazam-core.p.rapidapi.com\r\n   ```\r\n\r\n4. **Run the Development Server**:\r\n   ```bash\r\n   npm run dev\r\n   ```\r\n   The app will be available at `http://localhost:5173`.\r\n\r\n5. **Build for Production**:\r\n   ```bash\r\n   npm run build\r\n   ```\r\n\r\n## Usage\r\n\r\n1. **Search for Music**:\r\n   - Use the search bar in the \"Search\" view to find songs, artists, or albums.\r\n   - Filter results by selecting the desired type (track, artist, album).\r\n\r\n2. **Create and Manage Playlists**:\r\n   - Navigate to the sidebar and click \"Create Playlist\" to open the modal.\r\n   - Add songs to playlists via the context menu (three dots) on any track row.\r\n   - Remove songs from playlists or delete playlists in the library view.\r\n\r\n3. **Play Music**:\r\n   - Click a track row to play its preview. The row highlights with a green gradient and shows an equalizer for the current track.\r\n   - Pause playback using the pause button that appears on hover.\r\n\r\n4. **Like Songs**:\r\n   - Click the heart icon on a track row to add or remove it from \"Liked Songs.\"\r\n   - Liked songs are accessible in the library view under \"Liked Songs.\"\r\n\r\n5. **Explore Views**:\r\n   - **Home**: View recently played tracks, featured tracks, and personalized recommendations.\r\n   - **Search**: Browse search results or explore genres and albums.\r\n   - **Library**: Access playlists, liked songs, and manage your music collection.\r\n\r\n## Project Structure\r\n\r\n```plaintext\r\nmusicify/\r\n├── public/\r\n│   ├── search.png           # Navbar screenshot\r\n│   └── favicon.ico\r\n├── src/\r\n│   ├── components/\r\n│   │   ├── Sidebar.jsx      # Responsive sidebar with navigation and playlist management\r\n│   │   ├── MainContent.jsx  # Main content area with home, search, and library views\r\n│   │   ├── TrackRow.jsx     # Track row component with playback and playlist options\r\n│   │   ├── TrackCard.jsx    # Card component for recently played and recommended tracks\r\n│   │   ├── EnhancedSearchBar.jsx  # Debounced search bar for querying the Shazam API\r\n│   │   ├── ArtistView.jsx   # Artist details view\r\n│   │   ├── GenreGrid.jsx    # Genre browsing grid\r\n│   │   ├── AlbumGrid.jsx    # Album browsing grid\r\n│   │   └── Library.jsx      # Library view for playlists and liked songs\r\n│   ├── store/\r\n│   │   ├── slices/\r\n│   │   │   ├── playerSlice.js  # Redux slice for player state\r\n│   │   │   └── playlistSlice.js  # Redux slice for playlists and liked songs\r\n│   │   └── store.js         # Redux store configuration\r\n│   ├── services/\r\n│   │   └── ShazamCore.js    # API service for Shazam Core integration\r\n│   ├── hooks/\r\n│   │   └── useTypedSelector.js  # Custom hook for typed Redux state\r\n│   ├── App.jsx              # Main app component\r\n│   ├── index.jsx            # Entry point\r\n│   └── index.css            # Global Tailwind CSS styles\r\n├── .env                     # Environment variables\r\n├── package.json             # Project dependencies and scripts\r\n└── README.md                # This file\r\n```\r\n\r\n## Contributing\r\n\r\nContributions are welcome! To contribute to Musicify:\r\n\r\n1. Fork the repository.\r\n2. Create a new branch (`git checkout -b feature/your-feature`).\r\n3. Make your changes and commit (`git commit -m \"Add your feature\"`).\r\n4. Push to your branch (`git push origin feature/your-feature`).\r\n5. Open a pull request with a detailed description of your changes.\r\n\r\nPlease ensure your code follows the project's ESLint and Prettier configurations.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\r\n\r\n## Acknowledgements\r\n\r\n- **Shazam Core API** for providing music data.\r\n- **React** and **Redux Toolkit** for a robust frontend and state management.\r\n- **GSAP** for smooth, music-inspired animations.\r\n- **Lucide React** for modern, lightweight icons.\r\n- **Tailwind CSS** for rapid, responsive styling.\r\n\r\n## Contact\r\n\r\nFor questions, suggestions, or feedback, please open an issue on the [GitHub repository]https://github.com/Targter/SpotifyClone1-Celebal.git) or contact the project maintainer at bansalabhay00@gmail.com].\r\n\r\n---\r\n\r\n*Built with 🎵 by the Musicify Team*\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftargter%2Fspotify-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftargter%2Fspotify-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftargter%2Fspotify-app/lists"}