Code Monkey home page Code Monkey logo

emojifacesdapp's Introduction

Emoji Faces NFT Minting dApp

This a complete example of fullstack NFT minting dApp. EmojiFaces is built with the purpose of providing an entry point for future NFT Minting Website projects.

Installation

You can either use the default EmojiFaces smart contract and play with it or you can also put your own smart contract and make changes as needed. Remember to change .env file with your own variables.

Use the default EmojiFaces Smart Contract:

  git clone https://github.com/codingwithdidem/emojifacesdapp.git
  cd emojifacesdapp
  npm install
  npm run dev

Use Your Own Smart Contract:

  git clone https://github.com/codingwithdidem/emojifacesdapp.git
  cd emojifacesdapp
  npm install
  npm run dev
  • Change .env with your own environment variables.
  • Remove /artifactsfolder if it exists.
  • Put your own smart contract inside /contracts/.
  • Compile your smart contract with npx hardhat compile.
  • Update /scripts/deploy.jsaccording to your needs.
  • Deploy your smart contract with npx hardhat run scripts/deploy.js --network rinkeby.
  • Copy the deployed contract address and put it inside /utils/interact.js contractAddress section.

Tech Stack

Client: React, TailwindCSS, web3

Server: Alchemy, NextJS, Hardhat

๐Ÿ”— Youtube Series For This Project

You can also watch tutorial videos for this project

youtube

Screenshots

App Screenshot

Support

For support, email [email protected]

emojifacesdapp's People

Contributors

codingwithdidem avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

emojifacesdapp's Issues

Build Production Folder

Hi, Didem how are you doing?
I hope you help me with this issue, please, I have tried to build the Production Folder to be hosted in my live web server, But I have faced this issue, the Build folder doesn't create.

`> build
> next build

info  - Loaded env from /home/user/folder1/emojifacesdapp/.env
info  - Checking validity of types  

./components/Header.js
17:13  Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps
23:6  Warning: React Hook useEffect has missing dependencies: 'addWalletListener' and 'setStatus'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./components/Hero.js
22:3  Warning: React Hook useEffect contains a call to 'setMaxMintAmount'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [] as a second argument to the useEffect Hook.  react-hooks/exhaustive-deps
22:13  Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Page                                       Size     First Load JS
โ”Œ โ—‹ / (868 ms)                             728 kB          800 kB
โ”œ   /_app                                  0 B            71.5 kB
โ”œ โ—‹ /404                                   196 B          71.7 kB
โ”” ฮป /api/hello                             0 B            71.5 kB
+ First Load JS shared by all              71.5 kB
  โ”œ chunks/framework-dc33c0b5493501f0.js   42 kB
  โ”œ chunks/main-75d0abddddf86da9.js        27.9 kB
  โ”œ chunks/pages/_app-aabfb876ade56af8.js  640 B
  โ”œ chunks/webpack-c66a1cc0a3689c22.js     892 B
  โ”” css/377c08f0d636ab0c.css               3.06 kB

ฮป  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ—‹  (Static)  automatically rendered as static HTML (uses no initial props)`

Unable to Mint

Hi Didem,

I was running a test mint with the source code and got this error message:

"๐Ÿ˜ฅ Something went wrong: TxGasUtil - Trying to call a function on a non-contract address"

Furthermore when I go into Metamask I cannot confirm it because "Gas limit must be at least 21000"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.