Buildspace-epic-nfts-ui - Project that will allow you to connect your wallet and mint an NFT, you will be able to resell the NFT on OpenSea

Overview

🐲 Epic NFTs [UI]

El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pueden acceder a la demo en el siguiente link:

VER DEMO

Este proyecto consume un smart-contract desarrollado en Solidity utilizando el framework HardHat, pueden encontrar el repositorio en el siguiente link:

REPO SMART-CONTRACT

Sobre el proyecto:

Proyecto web basado en la web3 desarrollado con Next.js y ChakraUI. En esta aplicación los usuarios podrán acuñar NFTs que será almacenado dentro de la blockchain, para esto es necesario primero autenticarse usando la wallet Metamask y configurandola para usar la red de prueba de Rinkeby.

Los usuarios podrán mintear sus NFTs, para esto es necesario pagar la transacción usando ETH. Dado a que nos encontramos en la red de Rinkeby no estaremos usando ETH real, sino unos de prueba. Para cargarle saldo a tu wallet y así tener ETH para usar en la red de Rinkeby pueden usar el siguiente enlace

Cuando un usuario acuña un NFT obtendrá una palabra generada de forma aleatoria por otras 3, un animal, una profesión y un adjetivo (solo por diversión). Podrán acceder a sus NFTs desde cualquier aplicación como los son OpenSea o Rarible y poder comercializarlos desde ahí. (recordar que estamos en un ambiente de pruebas, el de Rinkeby)

Este fue un proyecto con fin 100% académico mientras realizaba los cursos de la plataforma buildspace, la cual recomiendo a todo desarrollador que quiera comenzar a desarrollar para la web3.

Pueden probar la aplicación ingresando al siguiente link: Epic NFTs

La aplicación está conectándose a un smart-contract desarrollado con la tecnología Solidity, pueden revisar su repo aquí

Algunas capturas del proyecto:

screenshot#1

screenshot#2

screenshot#3


This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You might also like...
React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.
React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.

Ergo dApp Connector React Package Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage Contributing License

The Next-Gen Crypto Wallet

🅒🅖🅦 Coingrig Mobile Wallet Next-Gen Crypto Wallet. A powerful crypto wallet for everyone, unique features and open source Building Locally The code

Simple Ether Wallet DApp with React, Typescript, useDApp, Chakra UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A plugin enables you to import a Markdown file as various formats on your vite project

vite-plugin-mdoc A plugin enables you to import a Markdown file as various forma

Visualize your React components as you interact with your application.
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

ExoBitsNFT-Minting- - A complete NFT website with Minting and Gallery features
ExoBitsNFT-Minting- - A complete NFT website with Minting and Gallery features

nft-minting-website-example ReExoBits A complete NFT website with Minting and Ga

Ethereum Nft Marketplace Boilerplate With React
Ethereum Nft Marketplace Boilerplate With React

ethereum-boilerplate-NFT-Marketplace This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own NFT Marketplace. This p

A full stack NFT marketplace built using react

Demo NFT Marketplace Goals: Concise code Well typed Modern react code using hook

Noft - Chrome extension to block NFT profiles on Twitter

TypeScript React Chrome Extension Boilerplate A basic TypeScript React Chrome Ex

Comments
  • Support for Pay to Mint?!

    Support for Pay to Mint?!

    Hi, i forked your project and was trying to implement it ( i was able to do it) , but i wanted to support pay to mint where users would have to pay to mint each nft, i tried to use a different contract ( that supports pay to mint) and adapted the code, bas was unsuccessfull, tried to use this https://www.youtube.com/watch?v=TlHYCrHlHwM&t=303s&ab_channel=net2dev , still was unsuccessfull... Can you help or add support to it?

    opened by Diogovski 0
Owner
Braian D. Vaylet
Web UI & Blockchain Developer
Braian D. Vaylet
An NFT Marketplace React dApp demo on the Polygon blockchain with basic functionalities such as acquire and mint NFTs using ERC721 Smart Contract and Interplanetary File System IPFS.

Polygon-NFT-marketplace generated from jellydn/dapp-starter Opinionated Dapp Starter Template Homepage - Marketplace NFT Minting Features The React Fr

null 121 Sep 27, 2022
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Acclrate 1 Dec 27, 2021
Ambire Wallet: A full featured non-custodial DeFi wallet that combines power, security and ease of use

localtunnel localtunnel exposes your localhost to the world for easy testing and

null 14.8k Sep 22, 2022
Eth-time - ETH Time - A new NFT collection created to explore new ways of generating NFTs on-chain

ETH Time ETH Time is a new NFT collection created to explore new ways of generat

null 3 Jan 25, 2022
Web3-nft-dapp-tutorial - A simple web3 app for minting NFTs

Web3 - Full Tutorial The demo contains a basic web3 app and smart contract for m

Fireship 188 Sep 28, 2022
Datta Able Free Bootstrap 4 Admin Template

Datta Able Free Dashboard Template made using Bootstrap 4 framework, It is a free lite version of Datta Able Pro Dashboard Template that makes you fulfill your Dashboard needs.

CodedThemes 107 Sep 18, 2022
ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

Reservoir Protocol 24 Sep 21, 2022
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

Ian De Guzman 1 May 3, 2022
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App

Open Source Nft Marketplace [Onprogress %1] Reactjs And Smart Contracts Open Sou

Özgür 221 Sep 22, 2022
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips ?? All the code in these repos was created and explained by

EtherCluster 1 Jan 6, 2022