harsh-sharma-z/infinitunes

infinitunes

[WIP] 🎵 A Simple Music Player Web App made with ⚛️ React and Redux.

Dependencies Used

---

 
@reduxjs/toolkit: ^1.9.0
     
framer-motion: ^7.6.12
     
swiper: ^8.4.5
     
react-icons: ^4.6.0
     
react-redux: ^8.0.5
 

 
@headlessui/react: ^1.7.4
     
react-router-dom: ^6.4.3
     
styled-components: ^5.3.6
   

---

Directory Structure

Click to Expand

src
|
|-- api
|   `-- JioSaavnApi.js
|
|-- assets
|   |
|   |-- fonts
|   |   |-- Cubano.ttf
|   |   `-- L-Regular.ttf
|   |
|   `-- images
|       |-- 404.png
|       |-- infinitunes1500.png
|       `-- infinitunes1920.png
|
|-- components
|   |
|   |-- Card
|   |   |-- Card.jsx
|   |   |-- Card.style.jsx
|   |   |-- SongTile.jsx
|   |   |-- SongTile.style.jsx
|   |   |-- SongsCard.jsx
|   |   `-- SongsCard.style.jsx
|   |
|   |-- Dropdown
|   |   |-- Dropdown.jsx
|   |   `-- Dropdown.style.jsx
|   |
|   |-- Grid
|   |   |-- Grid.jsx
|   |   |-- Grid.style.jsx
|   |   |-- GridItem.jsx
|   |   `-- GridItem.style.jsx
|   |
|   |-- Navbar
|   |   |-- TopNav.jsx
|   |   `-- TopNav.style.jsx
|   |
|   |-- Player
|   |   |-- Controls.jsx
|   |   |-- Controls.style.jsx
|   |   |-- Player.jsx
|   |   `-- Player.style.jsx
|   |
|   `-- Swiper
|       |-- StyledSwiper.jsx
|       |-- StyledSwiper.style.jsx
|       `-- SwiperFns.js
|
|-- hooks
|   |-- useAudio.js
|   |-- useThemeSwitcher.js
|   `-- useWindowResize.js
|
|-- pages
|   |
|   |-- About
|   |   |-- About.jsx
|   |   `-- About.style.jsx
|   |
|   |-- Album
|   |   `-- Album.jsx
|   |
|   |-- Charts
|   |   `-- Charts.jsx
|   |
|   |-- Home
|   |   |-- Home.jsx
|   |   `-- Home.style.jsx
|   |
|   |-- NotFound
|   |   |-- NotFound.jsx
|   |   `-- NotFound.style.jsx
|   |
|   |-- Playlist
|   |   |-- Playlist.jsx
|   |   `-- Playlists.jsx
|   |
|   |-- Search
|   |   |-- Search.jsx
|   |   `-- Search.style.jsx
|   |
|   `-- Settings
|       |-- Settings.jsx
|       `-- Settings.style.jsx
|
|-- store
|   |-- player-slice.js
|   |-- search-slice.js
|   `-- store.js
|
|-- styles
|   |-- GlobalStyles.jsx
|   `-- Motion.jsx
|
|-- App.jsx
|
`-- index.js

Building from Source

• Fetch latest source code from master branch.

rajput-hemant@arch:~$ git clone https://github.com/rajput-hemant/infinitunes
rajput-hemant@arch:~$ cd infinitunes

• Create .env file & add your own JioSaavn API Endpoint OR add your own API key in JioSaavnApi.js file.

REACT_APP_JIO_SAAVN_API_KEY = "_endpoint_";

OR, in ~src/api/JioSaavnApi.js

class JioSaavnApi {
	EndPoint = "_endpoint_"; // add it here
  ...
}

const api = new JioSaavnApi();
export default api;

• Run the app with VS Code or the command line:

rajput-hemant@arch:~/infinitunes$ npm install
rajput-hemant@arch:~/infinitunes$ npm start

JioSaavn API (Unofficial) by Sumit Kolhe, API Docs

Contributors:

Note: It may take up to 24h for the contrib.rocks plugin to update because it's refreshed once a day.