NFT DROP React.js (Minting NFT's with thirdweb, Sanity, Next.js, Tailwind, TS)

Overview

NFT DROP React.js

🔴 LIVE DEMO

PREREQUISITES:

Google Google


This project was bootstrapped with Create React App.

Available Scripts

npx create-next-app nft-drop
cd nft-drop

Install Tailwind CSS with Next.js

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

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

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.

npm i @thirdweb-dev/react
npm i next-sanity
npm i react-hot-toast
npm i @sanity/image-url

image Screenshot 2022-08-05 192410

You might also like...
Wonka: a JS library meant that simplifies the minting process on Metaplex's CandyMachine

Wonka JS Wonka is a JS/TS layer that simplifies the minting process on top of Me

Ethbio - Ethbio- The Bio Page for all things Crypto, NFTs, Social Pages and beyond
Ethbio - Ethbio- The Bio Page for all things Crypto, NFTs, Social Pages and beyond

Ethbio Github | Screenshots | Discord Server(Soon) What's Ethbio? We've all seen

TwNFT - A simple web application that lets you mint your tweets as NFTs
TwNFT - A simple web application that lets you mint your tweets as NFTs

TwNFT - A simple web application that lets you mint your tweets as NFTs

Look it is a web application developed with React JS and using Sanity.

Look it is a web application developed with React JS and using Sanity. This application consists in a social media app where you can share your photos with other people who already has registered in the app.

Modern Full Stack ECommerce Application with Stripe & Sanity
Modern Full Stack ECommerce Application with Stripe & Sanity

Modern Full Stack ECommerce Application with Stripe & Sanity If you want to visit the Live application, Click eCommerce-sanity-stripe. Build and Deplo

NFT Marketplace on Ethereum Blockchain based on course. Made in React/Next JS, Solidity and Typescript.

This is a Next.js project. Full process and video lectures how to create the application can be found here: NFT Marketplace in React, Typescript & Sol

A dynamic UI library that allows you to build pages using drag and drop components and configurations.

react-dragd A dynamic UI library that allows you to build pages using drag and drop components and configurations. Try it - Code Sandbox To start npm

Full-stack Uber recreation built with React, Next.js, styled-components, Tailwind, and Mapbox.

Uber Clone Full-stack Uber recreation built with React, Next.js, styled-components, Tailwind, and Mapbox. Getting Started git clone [email protected]:Dev

A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/  Next.js, Ionic Framework, and Capacitor
A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor

Next.js + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter This repo is a conceptual starting point for building an iOS, Android, and Progres

Owner
Sashen Jayathilaka
Student at Sri Lanka Technological Campus
Sashen Jayathilaka
This is a NFT minting front-end with React.js

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

Judy Hoops 3 Jul 13, 2022
React frontend + Node API source code for for the minting website for the Ninja Developer Hacking Squad's NFT collection

React frontend + Node API source code for for the minting website for the Ninja Developer Hacking Squad's NFT collection

Ninja Developer Hacking Squad 12 Jul 5, 2022
Building a Web3 NFT Minting Dapp with React, TS, Vite, Vitest, Hardhat

Vite-react-ts-hardhat-web3-NFT tutorial building a Web3 NFT Minting Dapp with React, TS, Vite, Vitest, Hardhat Requirements git if you've installed co

Lucian Daniel Crisan 18 Aug 20, 2022
✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

Brian H. Hough | brianhuff.eth 5 Jul 16, 2022
Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind)

Twitter 2.0 with REACT.JS! ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE Sanity HERE This project was bootstrapped with Create Rea

Sashen Jayathilaka 4 Aug 21, 2022
Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind & GoogleAuth)

Twitter 2.0 with REACT.JS! ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE Sanity HERE This project was bootstrapped with Create Rea

Sashen Jayathilaka 5 Sep 12, 2022
CRYPTO LOTTERY with NEXT.JS! (React.js, Solidity, TypeScript, TailwindCSS, thirdweb)

CRYPTO LOTTERY with React js ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE MetaMask HERE thirdweb HERE This project was bootstrapp

Sashen Jayathilaka 6 Sep 21, 2022
NFT-Marketplace-React-Dapp: An NFT Marketplace Decentralized app with Polygon blockchain network

An NFT Marketplace Decentralized app with Polygon blockchain network having basic functionalities such as acquire and mint NFTs …

Full-Stack King 11 Jul 20, 2022
Medium-clone - Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity

Medium Clone ?? Overview /pages ✔️ pages/index.tsx = Homepage and list all Blogs

argikurnia 23 Sep 13, 2022
Candy-machine-react-ui - UI frontend in react for Solana Candy Machine NFTs

candy-machine-react-ui This repository contains a minimal UI front-end in React,

CrossMint 37 Sep 26, 2022