Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaperdragon/musicen
Mucisen is Decentralize Music App Built with Next Js, Hardhat, Solidity, Arweave + Bundlr Client and all of the style magic with Tailwind CSS.🎵
https://github.com/reaperdragon/musicen
apollo-client arweave audioplayer blockchain bundlr ethereum ethersjs googlefonts graphql hardhat javascript nextjs openzeppelin-contracts react-hooks reactjs solidity tailwindcss thegraphprotocol typescript web3
Last synced: 14 days ago
JSON representation
Mucisen is Decentralize Music App Built with Next Js, Hardhat, Solidity, Arweave + Bundlr Client and all of the style magic with Tailwind CSS.🎵
- Host: GitHub
- URL: https://github.com/reaperdragon/musicen
- Owner: reaperdragon
- Created: 2022-10-23T05:00:41.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-01T13:24:43.000Z (about 2 years ago)
- Last Synced: 2024-07-29T20:52:57.793Z (5 months ago)
- Topics: apollo-client, arweave, audioplayer, blockchain, bundlr, ethereum, ethersjs, googlefonts, graphql, hardhat, javascript, nextjs, openzeppelin-contracts, react-hooks, reactjs, solidity, tailwindcss, thegraphprotocol, typescript, web3
- Language: JavaScript
- Homepage:
- Size: 779 KB
- Stars: 11
- Watchers: 2
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Musicen 🎵
### Functionalities
- [x] Upload Song
- [x] Search Songs
- [x] Song Details
- [x] Play Song
### Stack
- Language : [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- Frontend : [Next Js](https://nextjs.org/)
- Smart Contract Lang : [Solidity](https://docs.soliditylang.org/en/v0.8.17/)
- Indexing : [The Graph](https://thegraph.com/en/)
- Dev Environment for ETH Software: [Hardhat](https://hardhat.org/)
- Testing: [Chaijs](https://www.chaijs.com/)
- File Storage : [Arweave](https://www.arweave.org/)
- Scaling Permenant Storage - [Bundlr](https://bundlr.network/)
- Network : [Polygon Mumbai](https://polygon.technology/)
- Style : [Tailwind CSS](https://tailwindcss.com/)
- State management : [GraphQL Apollo Client](https://www.apollographql.com/)
- Toast: [React Toastify](https://fkhadra.github.io/react-toastify/introduction/)
- Fonts - [Google Fonts](https://fonts.google.com/)
- Icons : [Iconsax React](https://iconsax-react.pages.dev/)
- Design : [Figma](https://www.figma.com/)
### Installation
#### Fork The Repo
Click on the Right Side of the Top Bar to After the Watch button. 
Now It will be available in GitHub Account.
#### OR
#### Clone
- Clone this repo with url
```shell
git clone https://github.com/Aakrut/musicen
```
##### Setup
> Install npm dependencies using npm install
```shell
cd musicen && npm install
```
> Set up environment Variables I already Provided .env.example file.
> Create a .env file in the root directory.
> Set up required environment variables.
```
URL="POLYGON_TESTNET_URI"
PRIVATE_KEY="METAMASK_PRIVATE_KEY"
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
NEXT_PUBLIC_GRAPHQL_URI="GRAPHQL_URL"
```
> In the Root Directory First Compile Your Smart Contract with This Following Command.
```shell
npx hardhat compile
```
> After Deploy Smart Contract to the Polygon Mumbai Testnet with this command.
```shell
npx hardhat run scripts/deploy.js --network mumbai
```
> Copy Smart Contract Address and replace it in with your "CONTRACT_ADDRESS"
```
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
```
## For Setting up Graph Protocol - [The Graph](https://thegraph.com/en/)
now replace the graph url with
```
NEXT_PUBLIC_GRAPHQL_URI="GRAPHQL_URL"
```
Let's Run this command for dev
```shell
npm run dev
--or--
yarn dev
```
### Screenshots
