SpotRx is a web player for Spotify created using Angular. It provides users with a range of functionalities to enhance their Spotify experience, including authorization, user profile information, saved tracks, song search, user playlists, and recommended playlists.
-
Authorization: SpotRx uses OAuth 2 with PKCE (Proof Key for Code Exchange) for secure and seamless authorization with Spotify. Users can log in to their Spotify accounts and grant SpotRx access to their music library.
-
Player - Web Playback for Spotify, user can play songs, shuffle queue or change web player volume.
-
User Profile Info: Once authorized, SpotRx retrieves and displays user profile information, including the user's name, profile picture, and follower count.
-
Saved Tracks: Users can view and manage their saved tracks directly within the SpotRx application. This feature allows for easy access to favorite songs and personalized music collections.
-
Song Search: SpotRx provides a search functionality that allows users to search for songs within the Spotify database. Users can find their favorite tracks, albums, or artists and listen to them seamlessly.
-
User Playlists: SpotRx enables users to view and manage their playlists.
-
Recommended Playlists: SpotRx leverages Spotify's recommendation algorithms to provide personalized playlist recommendations to users. These recommendations are based on the user's listening history and preferences.
SpotRx is deployed and accessible online. You can try it out at https://magda98.github.io/SpotRx/. Please note that this application is currently using the Spotify API in development mode. As a result, it can only be accessed by a limited number of users and testers designated by the owner.
-
Angular: SpotRx is built using the Angular framework in version 18 and use Signals, standalone components, new control flow etc. which provides a powerful and scalable platform for developing single-page applications.
-
Angular Query powerful asynchronous state management for TS.
-
Angular Testing Library library used for unit testing.
-
Playwright library used for end2end testing.
-
Storybook workshop for building UI components.
-
CI/CD: SpotRx utilizes GitHub Actions workflows to run unit tests, build the application, and deploy it from a specific branch to GitHub Pages.
-
Angualr Material - Material Design components for Angular.
-
OAuth 2 with PKCE: The application uses OAuth 2 with PKCE for secure and authorized access to the Spotify API.
-
Spotify API: SpotRx integrates with the Spotify API to fetch user data, including user profile information, saved tracks, and playlists.
-
Deployment GitHub Pages: SpotRx is deployed using GitHub Pages, making it easily accessible to users on the web.
To set up SpotRx for local development, follow these steps:
- Clone the repository:
git clone https://github.com/Magda98/SpotRx.git - Navigate to the project directory:
cd SpotRx - Install the dependencies:
npm install - Start the development server:
ng serve - Open your browser and visit
http://localhost:4200to access SpotRx locally.
