This project is a mini Spotify client built using React Native and TypeScript. The application interacts with the Spotify Web API to fetch playlists, display track details, and provide filtering and sorting functionalities. The app is designed to demonstrate API integration, state management with hooks, and UI development without utilizing an external UI component libraries.
Additionally, a caching algorithm has been implemented to optimize API calls, enhancing performance and minimizing redundant requests.
- Fetches Spotify playlists using the Spotify Web API.
- Includes popular playlists and a mock user's playlist (mock user:
taylorswift) to demonstrate personalization. - Each playlist displays its title and cover art.
- Allows navigation to the Playlist Details screen to view track information.
- Displays tracks in the selected playlist.
- Each track shows its name, artist(s), and album art.
- Utilizes a vertical FlatList for smooth scrolling and an intuitive user experience.
- A real-time search bar allows users to filter tracks by track name or artist.
- The filter updates the track list without additional API calls, enhancing speed and responsiveness.
- The search bar on the main page enables users to search across:
- Tracks: Find specific tracks by name.
- Artists: Locate tracks by specific artists.
- Playlists: Search for playlists containing the specified tracks or artists.
- The search bar on the Playlist Details screen allows users to filter tracks within the selected playlist based on:
- Track Name: Find specific tracks by name.
- Artist Name: Locate tracks by the artist’s name.
- Users can sort tracks in ascending or descending order by:
- Track Name (A-Z or Z-A)
- Artist Name (A-Z or Z-A)
- Component-Based Structure: The project follows a component-based architecture to ensure clean and maintainable code. Each feature or UI element is encapsulated in its own component, promoting reusability and separation of concerns.
- Unit tests are implemented using Jest and @testing-library/react-native to ensure component reliability and functionality. Tests cover various aspects including: -- Component rendering and UI elements. -- Context-based state changes. -- API data flow and response handling. -- Navigation and interaction with user inputs.
- The application uses the React Context API for global state management, allowing efficient data sharing and updates across components without prop drilling. State updates trigger re-rendering only where necessary, optimizing performance and maintaining a responsive UI.
