Giters

HaLamUs / eth-nft-drop

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

eth-nft-drop

Intro

This project is my REACTION to the video ⬇️

IMAGE ALT TEXT

Detail

Tech stack

Sketch

Not entirely correct

🤓 Instead of editing in Mongo Atlas, we can use CMS for marketing team can edit too.

Kick-start project

npm create-next-app -e with-tailwindcss my-project

Project structure

  • 🗂 Folder pages where all pages in your site placed

  • 🌈 TailwindCSS allows you quickly applying CSS to components

    • Font
    • Text size
    • Color

  • Nextjs

    • Replace class component by function component
     function Search() {
    return (
      <div> Search <div/>
    )
 }
 
 export default Search

    • Path

      • Ex: localhost:3000/NFT/para-farm
      • Create folder NFT under pages folder then [id].tsx this mean wildcard

    • Flexbox

      <div className="flex h-screen flex-col lg:grid lg:grid-cols-10">
  {/* Left */}
  <div className="lg:col-span-4">
    <div> LEFT </div>
  </div>
</div>

      lg:min-h-screen meaning on large screen the min height of component is the height of the screen

      lg:h-96 lg:w-72 meaning on large screen (height, width) = (96, 72)

      <button className="px-4 py-2 lg:px-5 lg:py3"/> meaning ONLY (5,3) in large screen, OTHER screens (small, medium) will be (4,2). Same apply for flex (small, medium) large will go with grid

      flex-1 flex-col 1 meaning get all the space

      If not large screen case, it will back to 'flex' mode, meaning it will layout at it's ease
      ⚠️ Flex it NOT Grid

      • Flex: 1 dimensional layout, will expand all items in 1 line then go to next line.
        Flex everything is on the same row
      • Grid: 2 dimensionals
        Split the screen by cols

      https://www.geeksforgeeks.org/comparison-between-css-grid-css-flexbox/
      Fine to use both at the same component which means depends on 
      // by row, but each row will divide by number of cols
    <flex>
      <grid />
    <flex/>
  // or 
  // by number of cols, but each col will layout in one row
    <grid>
      <flex />
    <grid/>

    • Thirdweb: Wrap your entire app (_app.tsx)

      return(
 <ThirdwebProvider desiredChainId={ChainId.bsc}>
  <Component {...pageProps} />
 </ThirdwebProvider>
)

      👍 Beside that, thirdweb provides NFT drop, which you can just upload the images and hit Deploy button Instead of 1.png and 1.json we can use bulk upload replace json files by .csv

    • 🖖 Vercel:
      https://vercel.com/
      You can deploy your FE for free, connecting thru github

    • 😲 Opensea test net
      https://testnets.opensea.io/

    • 🔴 Typescript
      We need define the type to avoid warning

      // typings.d.ts where you specify how object should look
interface Image {
 asset: {
  url: string
 }
}
export interface Creator {
 _id: string
 name: string
 image: Image
 bio: string
}

export interface Collection {
 _id: string
 title: string
 creator: Creator
 address: string
}

// index.js 
interface Props {
 collections: Collection[]
}

      Typescript using interface to define type

    • 🐸🐸🐸 Fetch

      • In Next.js using getServerSideProps to fetch data everytime it renders the page

        You should use getServerSideProps only if you need to render a page whose data must be fetched at request time https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

      • Next.js is server render/ pre-rendering
        Actually, both React and Next.js are hosted in Remote server so both are SSR (server side rendering) BUT react render page by download js files instead html tags like Next.js so Next is lil better

SSR CSR 
https://www.freecodecamp.org/news/next-vs-react/
https://blog.logrocket.com/create-react-app-vs-next-js-performance-differences/

function NFTDropPage({collection}: Props) {
  const [claimedSupply, setClaimedSupply] = useState<number>(0)
  const nftDrop = useNFTDrop(collection.address)

  //🤌 CAN use many useEffect as you want 
  useEffect(()=> {
    //fetchPrice
  }, [])
  
  useEffect(()=> {
    if (!nftDrop) return; //defensive programming

    const fetchNFTDropData = async () => {
      const claimed = await nftDrop.getAllClaimed();

      setClaimedSupply(claimed.length)
    }
    fetchNFTDropData()
  },[nftDrop])
}

THE end

  1. I see no reason to use Sanity as content center (CMS). 🤷‍♂️
  2. Surprisingly, this entire app despite strongly is a Another blockchain tutorial, but not a single line of Sol written. thirdweb is all you need 🤔
  3. Using testnet open-sea to check minting instead bsc-scan 👏

Author

This repo was developed by @lamha. Follow or connect with me on my LinkedIn.

License

About