Spotify Clone

This project is a music playlist management application built with Astro and React. It features a simulated API, global state management with Zustand, and various performance optimizations using React hooks. The project is styled using Tailwind CSS.

Code Preview

Technologies

  • Astro
  • React
  • Javascript
  • Typescript
  • Zustand
  • Tailwind
  • Git
  • GitHub

Features

  • Simulated API: The application mimics API calls with local data.
  • Global State Management: Zustand is used to manage the currentMusic state.
  • Efficient Searching: Implemented a debounce function to optimize the main search feature.
  • Custom Hooks:
    • usePlaylistsFilters: Manages filtering of playlists based on different criteria.
    • useFilterPlaylists: Filters playlists based on user-selected options.
    • useAsideView: Controls the display mode of playlists (list, compact list, or grid view).
  • Performance Optimizations:
    • Utilizes useMemo: For filtering playlists and recommended songs.
    • Uses useCallback: To optimize add/remove functions in the playlist.

Deployed In

Vercel

Gallery

image that show the next text "You can create your own playlist"
image that show the next text "You can add songs to your playlist"
image that show the next text "You can change the view of your playlist"
image that show the next text "You can remove songs from your playlist"
image that show the next text "You can add playlist created by spotify to your playlist"
image that show the next text "You can filter your playlist with buttons by playlist created by you or spotify and albums"
image that show the next text "You can search song, artists, playlists or albums"
image that show the next text "You can search your playlist by name"