Hoobal is a responsive music play website that allows you to discover music by genre, search for songs by title or artist, discover songs around you, explore top charts, top plays, and listen to your favorite tracks. It's built with ReactJS, Tailwind CSS, Redux Toolkit, and integrates with the RapidAPI Shazam API.
-
Discover by Genre: Explore music categorized by genre to find your favorite tunes.
-
Search Songs: Easily search for songs by title or artist using the search feature.
-
Discover Around You: Discover music based on your location or preferences.
-
Top Charts: Stay up-to-date with the latest top charting songs.
-
Top Artists: See what artists are trending and getting their songs most plays.
-
Top Plays: See what songs are trending and getting the most plays.
-
Listen to Songs: Enjoy a seamless music listening experience on Hoobal.
Here is the folder structure of Hoobal Music Play.
Hoobal/
|-client
|- public/
|- src/
|-- assets/
|-- components/
|-- constants/
|-- layouts/
|--redux/
|-- routes/
|--app.jsx
|-- router.js
|-- index.css
|-- main.jsx
|- postcss.config.cjs
|- tailwind.config.cjs
|- vite.config.js
-
ReactJS: A powerful JavaScript library for building user interfaces.
-
Tailwind CSS: A utility-first CSS framework for rapid UI development.
-
Redux Toolkit: A library for state management in React applications.
-
RapidAPI Shazam API: Integrate Shazam's music recognition and discovery features.
Abdurezak Farah - @awelrisak - @awelrisak
Project Link: https://github.com/awelrisak/hoobal