Create Web3 Dapp Folder structure
Breakdown of the Create Web3 Dapp project folder structure
There are a few folder structure variations in create-web3-dapp:
- Empty project with Blockchain Development Environmnet
- Empty project without Blockchain Development Environmnet
- NFT Explorer template
With Blockchain Development Environment:
📦Root
┣ 📂.vscode
┃ ┗ 📜settings.json
┣ 📂backend
┃ ┣ 📂contracts
┃ ┃ ┗ 📜MyContract.sol
┃ ┣ 📂scripts
┃ ┃ ┗ 📜MyContract_deploy.js
┃ ┣ 📂test
┃ ┃ ┗ 📜Lock.js
┃ ┣ 📜.env.local
┃ ┣ 📜hardhat.config.js
┃ ┣ 📜package-lock.json
┃ ┗ 📜package.json
┣ 📂frontend
┃┣ 📂components
┃ ┃┣ 📂navigation
┃ ┃ ┗ 📜navbar.jsx
┃ ┃┗ 📜InstructionsComponent.jsx
┃┣ 📂layout
┃┃ ┗ 📜mainLayout.jsx
┃┣ 📂pages
┃┃ ┣ 📂api
┃┃ ┣ 📜_app.js
┃┃ ┗ 📜index.jsx
┃┣ 📂public
┃┃ ┗ 📜alchemy_logo.svg
┃┣ 📂styles
┃┃ ┣ 📜Home.module.css
┃┃ ┣ 📜Navbar.module.css
┃┃ ┣ 📜InstructionsComponent.module.css
┃┃ ┗ 📜globals.css
┃┣ 📜.env.local
┃┣ 📜.gitignore
┃┣ 📜next.config.js
┃ ┣ 📜package-lock.json
┃ ┗ 📜package.json
┣ 📜.DS_Store
┣ 📜.env.local
┣ 📜.gitignore
┣ 📜LICENSE
┗ 📜README.md
Without Blockchain Development Environment
📦Root
┣ 📂components
┃ ┣ 📂navigation
┃ ┃ ┗ 📜navbar.jsx
┃ ┗ 📜InstructionsComponent.jsx
┣ 📂layout
┃ ┗ 📜mainLayout.jsx
┣ 📂pages
┃ ┣ 📂api
┃ ┣ 📜_app.js
┃ ┗ 📜index.jsx
┣ 📂public
┃ ┗ 📜alchemy_logo.svg
┣ 📂styles
┃ ┣ 📜Home.module.css
┃ ┣ 📜Navbar.module.css
┃ ┣ 📜InstructionsComponent.module.css
┃ ┗ 📜globals.css
┣ 📜.env.local
┣ 📜.gitignore
┣ 📜next.config.js
┣ 📜package-lock.json
┗ 📜package.json
### NFT Explorer Template
📦Root
┣ 📂components
┃ ┣ 📂navigation
┃ ┃ ┗ 📜navbar.jsx
┃ ┗ 📜nftGallery.jsx
┣ 📂layout
┃ ┗ 📜mainLayout.jsx
┣ 📂pages
┃ ┣ 📂api
┃ ┃ ┣ 📜getNftsForCollection.js
┃ ┃ ┗ 📜getNftsForOwner.jsx
┃ ┣ 📜_app.js
┃ ┗ 📜index.jsx
┣ 📂public
┃ ┣ 📜etherscan.svg
┃ ┣ 📜verified.svg
┃ ┗ 📜alchemy_logo.svg
┣ 📂styles
┃ ┣ 📜Home.module.css
┃ ┣ 📜Navbar.module.css
┃ ┣ 📜NftGallery.module.css
┃ ┗ 📜globals.css
┣ 📜.env.local
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜next.config.js
┣ 📜package-lock.json
┗ 📜package.json
Updated over 1 year ago