https://github.com/alchemyplatform/build-your-nft-explorer-walkthrough
https://github.com/alchemyplatform/build-your-nft-explorer-walkthrough
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alchemyplatform/build-your-nft-explorer-walkthrough
- Owner: alchemyplatform
- Created: 2022-02-12T21:15:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-14T14:11:23.000Z (over 4 years ago)
- Last Synced: 2024-05-21T04:11:05.791Z (about 2 years ago)
- Language: JavaScript
- Size: 27.3 KB
- Stars: 13
- Watchers: 8
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Alchemy NFT API Demo
Find, verify, and display any NFT, across all major blockchains, with ease.
Explore the docs »
View Demo (Coming soon)
·
Report Bug
·
Request Feature
Table of Contents
## About The Project
Build your own multi-chain NFT Explorer using the new Alchemy NFT API!
Built on top of ReactJs, this repo showcase the functionalities of the [Alchemy NFT API](https://www.alchemy.com/nft-api):
- Keep track of your NFTs on Polygon, Ethereum, and Mumbai.
- Search NFTs by collection
- Filter by Smart Contract address
and display the images, attributes, collection name, and creator of your favourite NFTs.
Supporting both ERC1155 and ERC721!
### Built With
* [Alchemy](https://www.alchemy.com)
* [Next.js](https://www.alchemy.com/)
* [React.js](https://reactjs.org/)
* [TailwindCSS](https://getbootstrap.com)
## Getting Started
Getting started is super simple! Follow the following steps and start fetching NFTs on Ethereum, Polygon, and Flow!
### Prerequisites
- Node >= 16.13.x
### Installation
1. Clone the repo
```sh
git clone https://github.com/alchemyplatform/Build-Your-NFT-Explorer-walkthrough.git
```
2. Install the dependencies using npm or yarn
```sh
npm install || yarn install
```
3. Create a .env file in the root folder
4. Create un account on [Alchemy.com](https://www.alchemy.com/)
5. Grab your Alchemy Endpoint URL following [This guide](https://docs.alchemy.com/alchemy/introduction/getting-started)
6. Enter your Alchemy Endpoint URL to your .env file for all the networks you'd like to use:
```js
REACT_APP_ALCHEMY_ETHEREUM_ENDPOINT=YOUR_API_URL
REACT_APP_ALCHEMY_POLYGON_ENDPOINT=YOUR_API_URL
REACT_APP_ALCHEMY_MUMBAI_ENDPOINT=YOUR_API_URL
```
7. Run the application
```sh
npm run start
```
## Usage
1. Insert a wallet address in the input field to retrieve all Ethereum NFTs associated with that address
2. Insert the Smart contract address to retrieve owned NFTs by contract address
_For more examples, please refer to the [Documentation](https://docs.alchemy.com/alchemy/enhanced-apis/nft-api)_
## Roadmap
- [x] Implement Ethereum support
- [x] Implement Fetch by Owner
- [x] Implement Fetch by Smart Contract address
- [ ] Add Multichain support
- [ ] UI/UX Update
- [ ] Implementing Fetch by collection
See the [open issues](https://github.com/alchemyplatform/NFT-API-demo/issues) for a full list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License.
## Contact
- [@AlchemyPlatform](https://twitter.com/AlchemyPlatform)
- [Discord]()