Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chmuhammadasim/nft-dapp

This repository contains the source code for a simple NFT (Non-Fungible Token) display application. The application allows users to upload NFT images to IPFS via Pinata, and displays the uploaded NFTs in a gallery.
https://github.com/chmuhammadasim/nft-dapp

ipfs nft

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/chmuhammadasim/nft-dapp
Owner: chmuhammadasim
Created: 2024-06-03T05:34:51.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-06-03T05:35:28.000Z (8 months ago)
Last Synced: 2024-12-21T16:53:34.996Z (about 1 month ago)
Topics: ipfs, nft
Language: HTML
Homepage:
Size: 3.91 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Sure, here is a more detailed version of the README file for your NFT Display project:

# NFT Display

## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Configuration](#configuration)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [License](#license)

## Introduction

NFT Display is a web application that simplifies the process of uploading and viewing NFTs. Users can upload their NFT images, which are then stored on IPFS using Pinata's API. The application also fetches and displays all uploaded NFTs in a gallery format.

## Installation

To get started with the NFT Display application, follow these steps:

1. **Clone the repository:**
```bash
git clone https://github.com/your-username/nft-display.git
cd nft-display
```

2. **Open the project:**
Open `index.html` in your preferred web browser. You can also use a local web server to serve the HTML file for a more seamless experience.

## Usage

1. **Upload an NFT:**
- Click the "Upload NFT" button to select and upload an image file from your local machine.
- The file will be uploaded to IPFS via Pinata, and a confirmation message will be displayed in the `output` section.

2. **View Uploaded NFTs:**
- The "NFTs Gallery" section below the upload section will display all the NFTs that have been uploaded.

## Features

- **Upload NFTs:** Users can upload image files as NFTs to IPFS using Pinata.
- **View NFTs:** Displays a gallery of the uploaded NFTs.
- **Automatic Refresh:** Automatically fetches and displays the list of uploaded NFTs on page load.

## Configuration

The application uses Pinata's API to upload files to IPFS. You need to replace the placeholder API keys with your own Pinata API keys.

1. **Get your API keys:**
- Sign up at [Pinata](https://pinata.cloud/).
- Navigate to the API Keys section in your Pinata account.
- Generate a new API key and secret key.

2. **Replace the keys in the code:**
Open `index.html` and replace the values of `PINATA_API_KEY` and `PINATA_SECRET_KEY` with your actual keys.

```javascript
const PINATA_API_KEY = 'your-pinata-api-key';
const PINATA_SECRET_KEY = 'your-pinata-secret-key';
```

## Project Structure

```
nft-display/
├── index.html
├── styles.css
└── README.md
```

- **index.html:** The main HTML file containing the structure and logic of the NFT display application.
- **styles.css:** The CSS file for styling the application.
- **README.md:** The readme file you are currently reading.

## Contributing

Contributions are welcome! Please follow these steps to contribute:

1. **Fork the repository:**
Click the "Fork" button at the top right of this page.

2. **Clone your fork:**
```bash
git clone https://github.com/your-username/nft-display.git
cd nft-display
```

3. **Create a feature branch:**
```bash
git checkout -b feature/YourFeature
```

4. **Commit your changes:**
```bash
git commit -m 'Add some feature'
```

5. **Push to the branch:**
```bash
git push origin feature/YourFeature
```

6. **Open a pull request:**
Submit a pull request to the original repository.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

---

Feel free to customize this `README.md` file further to match the specifics of your project and include any additional information that might be useful for users and contributors.