๐ฉ ํ์ด์ฌ์ผ๋ก NFT Marketplace ์ค๋งํธ ๊ณ์ฝ์ ์์ฑํ๊ณ React ์ฑ๊ณผ ์ฐ๋ํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์!
๐งโ ์ ๊น! ์ค๋ ์ฝ๋ฉ ๊ณผ์ ๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ๋๋ด๊ธฐ ์ํด ๊ผญ!! ์๋ ์ค๋ช ์ ์ฐจ๋ก๋๋ก ๋ค ์ฝ๊ณ ์งํํด์ฃผ์ธ์!!!
์นด์ด์คํธ ์ค๋ผํด X ์๊ณ ๋๋ ๊ฐ๋ฐ์ ์ธ์ ์ ์ค์ ์ฌ๋ฌ๋ถ ๋ฐ๊ฐ์ต๋๋ค~!
์ด ์ฝ๋ฉ๊ณผ์ ์์ ์ฌ๋ฌ๋ถ์ ์๊ณ ๋๋ ํ์ด์ฌ์ผ๋ก NFT ๋ง์ผํ๋ ์ด์ค ์ค๋งํธ ๊ณ์ฝ์ ์ง์ ๊ตฌํํ๊ณ AlgoKit Utils TypeScript์ Application Client๋ฅผ ์ฌ์ฉํด ์ค๋งํธ๊ณ์ฝ์ ๋ฐฐํฌ ๋ฐ ํธ์ถํ๋ React ํ๋ก ํธ์ค๋ ์ฐ๋์ ๊ตฌ์ถํด๋ณผ ๊ฒ ์ ๋๋ค.
์ด Algokit ํ๋ก์ ํธ๋ 2๊ฐ์ ํ๋ก์ ํธ ํด๋๊ฐ ์์ต๋๋ค.
- orakle-nft-marketplace-app-contracts: ์๊ณ ํท smart contract ํฌํ๋ฆฟ์ผ๋ก ๋ง๋ค์ด์ง NFT ๋ง์ผํ๋ ์ด์ค ์ค๋งํธ๊ณ์ฝ์ด ๋ค์ด์๋ ํ๋ก์ ํธ.
- orakle-nft-marketplace-app-frontend: ์๊ณ ํท frontend ํ ํ๋ฆฟ์ผ๋ก ๋ง๋ค์ด์ง React ํ๋ก์ ํธ.
์ฝ๋ฉ ๊ณผ์ ๋ ์ด 9๋ฌธ์ ๋ก ๊ตฌ์ฑ์ด ๋์ด ์์ผ๋ฉฐ, ๋ฌธ์ ๋ค์ ์ฌ๋ฌ ํ์ผ๋ค์ ๋ถํฌ๋์ด์์ผ๋ ๋ฐ์ ์ฒดํฌํฌ์ธํธ 3 ์ค๋ช ์ ๊ผผ๊ผผํ ์ฝ๊ณ ์งํํด์ฃผ์ธ์!
- ์๊ณ ๋๋ ๊ฐ๋ฐ์ ๋ฌธ์
- ์๊ณ ๋๋ ๋์ค์ฝ๋(๋๋ฒ๊น , ์ฝ๋ ๊ด๋ จ ์ง์์๋ต)
- ์๊ณ ๋๋ ํ์ด์ฌ ๊ฐ๋ฐ์ ๋ฌธ์
- ์๊ณ ๋๋ ํ์ด์ฌ ๊นํ(์์ ์ฝ๋, ์์ค์ฝ๋)
- Algokit Utils TypeScript
- AlgoKit ์ค์น.
- Docker ์ค์น. It is used to run a local Algorand network for development.
- Python 3.12 ์ด์ ์ค์น
- Node.JS / npm ์ค์น
- ์ด ๋ฆฌํฌ๋ฅผ fork ํด์ฃผ์ธ์.
- Forkํ ๋ฆฌํฌ๋ฅผ git clone ํด์ฃผ์ธ์.
- VSCode์์ ์ด ํด๋๋ฅผ ์ด๋ํด์ฃผ์ธ์.
- ์ด๋ ํ
orakle-nft-marketplace-app.code-workspace
ํ์ผ์ ์ด๊ณ ํopen workspace
๋ฒํผ์ ๋๋ฌ workspace ๋ชจ๋๋ฅผ ์คํ์์ผ์ฃผ์ธ์. - ์ด์ VSCode ํฐ๋ฏธ๋์ด 3๊ฐ๊ฐ ์๋ ์์ฑ๋ ๊ฒ ์ ๋๋ค:
ROOT
orakle-nft-marketplace-app-contracts
orakle-nft-marketplace-app-frontend
์ด ์ค ROOT
VSCode ํฐ๋ฏธ๋์์ algokit project bootstrap all
์ปค๋งจ๋๋ฅผ ์คํ์์ผ dependencies๋ค์ ์ค์นํด์ฃผ์ธ์. ์ด๋ฌ๋ฉด ๋ชจ๋ ํ๋ก์ ํธ ํด๋์ dependencies๋ค์ด ์ค์น๋ฉ๋๋ค.
๋ง์ฝ 3๊ฐ์ ํฐ๋ฏธ๋์ด ์๋์ผ๋ก ์ด๋ฆฌ์ง ์์ผ๋ฉด ์๋ก์ด ํฐ๋ฏธ๋์ + ๋ฒํผ์ ๋๋ฌ ๋ง๋ค๊ณ
ROOT
๋ฅผ ์ ํํ์๋ฉด ๋ฉ๋๋ค.
algokit project bootstrap all
๋ง์ฝ
Unhandled PermissionError: [Errno 13] Permission denied: '/Users/$name/.config/algokit'
์๋ฌ๊ฐ ๋ฌ๋ค๋ฉด ์์ sudo๋ฅผ ๋ถ์ฌ์sudo algokit project bootstrap all
์ปค๋งจ๋๋ฅผ ์คํํ์ธ์!
- ์ด์
orakle-nft-marketplace-app-contracts
ํฐ๋ฏธ๋์ ์ ํํ ๋คpoetry shell
์ปค๋งจ๋๋ฅผ ์คํํด ํ์ด์ฌ virtual environment๋ฅผ ํ์ฑํ ์์ผ์ฃผ์ธ์.- ํ์ด์ฌ virtual environment๋ฅผ ๋นํ์ฑํ ์ํฌ๋๋
exit
์ปค๋งจ๋๋ฅผ ์คํํ์๋ฉด ๋ฉ๋๋ค. - venv๋ฅผ ํ์ฑํ ํ ๋ค
pip list
๋ฅผ ์คํํด์algorand-python
๋ฐ ์ฌ๋ฌ dependencies๋ค์ด ๋์ค๋ฉด ์ฑ๊ณต์ ์ผ๋ก ๊ฐ์ํ๊ฒฝ์ ํ์ฑํ ์ํจ๊ฒ๋๋ค.
- ํ์ด์ฌ virtual environment๋ฅผ ๋นํ์ฑํ ์ํฌ๋๋
๐ ์ด์ ๋ชจ๋ ์ค๋น๊ฐ ๋์์ต๋๋ค! Good luck coding! ๐ป
๋ฆฌํฌ fork, clone ํํ ๋ฆฌ์ผ: https://github.com/algorand-fix-the-bug-campaign/challenge-1/assets/52557585/acde8053-a8dd-4f53-8bad-45de1068bfda
์ด ์ฝ๋ฉ ๊ณผ์ ๋ ์ด 9๋ฌธ์ ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉด
- 1-4๋ฌธ์ ๋ ์ค๋งํธ๊ณ์ฝ ๋ฌธ์
- 5-9๋ฌธ์ ๋ ํ๋ก ํธ์ค๋ ์ฐ๋ ๊ด๋ จ ๋ฌธ์ ์ ๋๋ค. ์๋ ์ค๋ช ์ ์ฐจ๋ก๋๋ก ์ฝ๊ณ ์งํํด์ฃผ์ธ์!
- ๋์ปค ๋ฐ์คํฌํ์ ์คํํ ๋ค ํฐ๋ฏธ๋์์
algokit localnet start
์ปค๋งจ๋๋ก ๋ก์ปฌ ๋คํธ์ํฌ๋ฅผ ์คํ์์ผ์ฃผ์ธ์.๋ ์์ธํ ์๊ณ ์ถ๋ค๋ฉด ์ฌ๊ธฐ๋ฅผ ํด๋ฆญํด์ฃผ์ธ์!. ์ค๋ ๋ชจ๋ ์ฝ๋๋ ๋ก์ปฌ ๋คํธ์ํฌ์์ ์คํ๋ฉ๋๋ค.
๋ง์ฝ ๋ก์ปฌ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ด ์๋๊ฑฐ๋ ๋ญ๊ฐ ๋ฌธ์ ๊ฐ ์๊ธฐ๋ฉด
algokit localnet reset
์ปค๋งจ๋๋ก ๋ค์ ๋ก์ปฌ๋คํธ์ํฌ๋ฅผ ์ง์ฐ๊ณ ๋ค์ ์์ฑํ์๋ฉด ๋ฉ๋๋ค.
orakle-nft-marketplace-app-contracts
ํฐ๋ฏธ๋์์poetry shell
๋ฅผ ์คํํด์ ํ์ด์ฌ ๊ฐ์ํ๊ฒฝ์ ์ผฐ๋์ง ํ์ธํ์ธ์.orakle-nft-marketplace-app-contracts/smart_contract/nft_marketplace/contract.py
๋ก ๊ฐ์๋ฉด ๋ฌธ์ 1-4๊ฐ ์ฃผ์์ผ๋ก ์์ฑ๋์ด์์ต๋๋ค. ์ค๋ช ์ ์์ธํ ์ฝ๊ณ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ์ธ์!- ๋ฌธ์ ๋ฅผ ๋ค ํด๊ฒฐํ ๋ค ํฐ๋ฏธ๋์์
algokit project run build
์ปค๋งจ๋๋ฅผ ์คํํด ์ค๋งํธ ๊ณ์ฝ์ ์ปดํ์ผ ํ์๊ณalgokit project deploy localnet
์ปค๋งจ๋๋ฅผ ์คํํดsmart_contracts/digital_marketplace/deploy-config.ts
ํ์ผ์ ์คํํ์ธ์!
algokit project run build
algokit project deploy localnet
๐ง ์ฃผ๋ชฉ!!
algokit project deploy localnet
์๋ ๋์ค ์๋ฌ๊ฐ ๋์ ์ค๋งํธ๊ณ์ฝ์ ๊ณ ์น์ จ๋ค๋ฉด ๋ค์algokit project run build
๋ฅผ ํด์ ์ค๋งํธ๊ณ์ฝ์ ์ฌ compile ํ ํ deploy ์ปค๋ฉ๋๋ฅผ ์คํํด์ฃผ์ ์ผ ํฉ๋๋ค!
์คํ ํ ๋ค์๊ณผ ๊ฐ์ ์ฝ์ ๊ฐ์ด ์ถ๋ ฅ๋๋ฉด ์ฑ๊ณต์ ์ผ๋ก ๋ชจ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ ๊ฒ๋๋ค! ๐๐
๊ณผ์ ์ ์ถ์ ์ํด ์คํฌ๋ฆฐ์ท ์ฐ์ด์ฃผ์ธ์. ์ด์ ๋ฌธ์ 5-9๋ก ๋์ด๊ฐ์ธ์.
orakle-nft-marketplace-app-contracts
ํฐ๋ฏธ๋์์algokit project deploy localnet
๋ฅผ ์คํํด ๋์จ ์ฝ์๊ฐ์์ ์๋ ๊ทธ๋ฆผ์ ๋นจ๊ฐ ๋ฐ์ค ์์ ์๋ NftMarketplaceList์ app ID ๋ฒํธ๋ฅผ ๋ณต์ฌํด์src/utils/marketplaceListAppId.ts
์marketplaceListAppId
๋ณ์๊ฐ์ผ๋ก ๋ฃ์ด์ฃผ์ธ์.
๐ง ์ฃผ๋ชฉ!! ์ฌ๊ธฐ์ nftMarketplaceList์ฑ์ ์ฌ๋ฌ๋ถ์ด ๋ฌธ์ 1-4์์ ๋ง๋ NftMarketplace ์ฑ๊ณผ ๋ค๋ฅธ ์ฑ์ ๋๋ค. ํ๋ก ํธ์ค๋ ์๋์ ์ํด ์ถ๊ฐ์ ์ผ๋ก ๋ง๋ค์ด์ง ์ฑ์ด๋ ์ด ๋จ๊ณ ์ธ ์ฌ์ฉํ์ค ์ผ์ ์์ต๋๋ค.
![Screenshot 2024-05-28 at 9 08 36โฏPM](https://private-user-images.githubusercontent.com/52557585/334404723-dbad5218-5673-42c4-8f3e-ce93757b557f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2NzQzMDEsIm5iZiI6MTcyMzY3NDAwMSwicGF0aCI6Ii81MjU1NzU4NS8zMzQ0MDQ3MjMtZGJhZDUyMTgtNTY3My00MmM0LThmM2UtY2U5Mzc1N2I1NTdmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE0VDIyMjAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg4Y2Q0MDlkZDVhYWViYTg1YTcwYmQyMTI1MGI4NDgyYmFjNjU3NmYyNGY2ZDMzYzdmNjZiMTY3N2JmNzA2OTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1moLtOY3s5bzdi484WTXcGBfCnh8-wh3lUB-kp2eCl8)
-
orakle-nft-marketplace-app-frontend
ํฐ๋ฏธ๋๋ก ๊ฐ์npm run dev
๋ฅผ ์คํํด ๋ก์ปฌ ์๋ฒ๋ฅผ ์คํํ๊ณ , ๋ธ๋ผ์ฐ์ ์ ํ์ด์ง๋ฅผ ์ด๊ณ ์งํํด์ฃผ์ธ์!npm run dev
์คํ์ ํ๋ก ํธ์์ ์ฌ์ฉํ ์ฑ ํด๋ผ์ด์ธํธ ํ์ผ์ดsrc/contracts
์ ์๋ ์์ฑ๋๋ ๊ผญ ๋จผ์ ์คํํ ํ ํ ์งํํด์ฃผ์ธ์! -
๋ฌธ์ 5์
src/utils/getCurrentNftmClient.ts
ํ์ผ์ ์์ต๋๋ค! ํ์ผ์ ๋ฌธ์ ๊ฐ ์ ํ์์ต๋๋ค. -
๋ฌธ์ 6-9๋
src/methods.ts
ํ์ผ์ ์์ต๋๋ค! ํ์ผ์ ๋ฌธ์ ๋ค์ด ์ ํ์์ต๋๋ค. -
๋ฌธ์ ๋ค๋ฅผ ๋ค ํด๊ฒฐํ ๋ค ์๋ ์ค๋ช ๋๋ก ์ง์ ์น์ฌ์ดํธ์ ๊ฐ์ ์คํํด๋ณด์ธ์:
๐ง ์ฃผ๋ชฉ!! ์๋ ๋จ๊ณ๋ฅผ ์คํ ๋์ค ์๋ฌ๊ฐ ๋ฐ์ํ ์ ์์ ๋จ๊ณ1๋ฅผ ๋ค์ ์คํํด Nft Marketplace List ์ค๋งํธ๊ณ์ฝ์ ๋ก์ปฌ ๋คํธ์ํฌ์ ์ฌ๋ฐฐํฌ ํ ํ app id ๊ฐ์ ๊ต์ฒดํ ๋ค ์งํํด์ฃผ์ธ์!
Wallet Connection
๋ฒํผ์ ๋๋ฌ ๋ก์ปฌ ์ง๊ฐ์ ์ฐ๊ฒฐํ์ธ์.
- ์์
mint test nft
๋ฒํผ์ ๋๋ฌ ํ ์คํธ์ฉ nft๋ฅผ ๋ง๋์ธ์. ์ฝ๋๊ฐ ๊ถ๊ธํ์๋ฉดsrc/components/MintNft.tsx
๋ฅผ ํ์ธํ์ธ์. ํ ์คํธ์ฉ์ด๊ธฐ์ ๊ณ ์ ์ ์ผ๋ก ๊ฐ์ ์ด๋ฏธ์ง์ total supply 10๊ฐ์ธ NFT๋ฅผ ๋ง๋ญ๋๋ค. ์๋ช ์ฐฝ์์ ํจ์ค์๋ ๊ธฐ์ ์์ดok
๋ฒํผ์ ๋๋ฌ ์๋ช ํ์ธ์.
- ์์
sell NFT
๋ฒํผ์ ๋๋ฅด๊ณSelect NFT to Sell
์์ 2๋จ๊ณ์์ ๋ง๋ ํ ์คํธ NFT๋ฅผ ์ ํ, ๊ฐ์๋ 1๊ฐ, ๊ฐ๊ฒฉ์ 1์๊ณ ๋ก ์ค์ ํ ๋คpublish
๋ฅผ ๋๋ฌ nft๋ฅผ ๋ฆฌ์คํ ํ์ธ์. ์ด๋ ์๋ช ์ฐฝ์ด 3๋ฒ ๋์ต๋๋ค. ์๋ช ์ฐฝ์์ ํจ์ค์๋ ๊ธฐ์ ์์ดok
๋ฒํผ์ ๋๋ฌ ์๋ช ํ์ธ์. - ๋ฆฌ์คํ ํ ๊ณผ์ ์ ์ถ์ ์ํด ํ๋งค NFT ๋ฑ๋ก์ด ๋ณด์ด๋๋ก ์คํฌ๋ฆฐ์ท์ ์ฐ์ด์ฃผ์ธ์!
![image](https://private-user-images.githubusercontent.com/52557585/335461717-621da2ed-5f18-49c8-98d1-00de2a141e93.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2NzQzMDEsIm5iZiI6MTcyMzY3NDAwMSwicGF0aCI6Ii81MjU1NzU4NS8zMzU0NjE3MTctNjIxZGEyZWQtNWYxOC00OWM4LTk4ZDEtMDBkZTJhMTQxZTkzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE0VDIyMjAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM2NDg0MzFjMTY1NWQ0OGM5ZDJhMGNjMTNmOWNiMDYwY2FmMjdkMDhhNDFhMTgyZjkyYTIzMDIxNDM3NzczOWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ZowwRZ_hC9zZhXB-Mdz5Tbq8_wmba4vkBvFTnIUKpfU)
Buy now
๋ฒํผ์ ๋๋ฅด๊ณ Buy Amount๋ฅผ 1๊ฐ๋ก ์ค์ ํ ๋คBuy NFT!
๋ฅผ ๋๋ฌ ๊ตฌ๋งคํ์ธ์. ์๋ช ์ฐฝ 1๋ฒ ๋์ต๋๋ค.
Withdraw Profit
๋ฒํผ์ ๋๋ฅด๊ณWithdraw all profits
๋ฒํผ์ ๋๋ฌ ์์ต๊ธ์ ํ์ํ๊ณ ์ค๋งํธ๊ณ์ฝ์ ์ญ์ ํ์ธ์. ์๋ช ์ฐฝ์ 2๋ฒ ๋์ต๋๋ค.
์ด ๋ชจ๋ ๊ฒ์ด ์๋ฌ์์ด ์ ๋๋ก ์คํ๋๋ฉด ์ฑ๊ณต์ ์ผ๋ก ๊ณผ์ ๋ฅผ ํด๊ฒฐํ์ ๊ฒ๋๋ค! ๐๐ ์ด์ ๋ถํด ์์ ๋กญ๊ฒ ์ง์ ๋ง๋ ๋์งํธ ๋ง์ผํ๋ ์ด์ค ์ฑ์ ์ฌ์ฉํด๋ณด์ธ์~!
- ์ฑ๊ณต์ ์ผ๋ก ๋ชจ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ จ๋ค๋ฉด ๋ณธ์ธ์ด forkํ ๊นํ ๋ฆฌํฌ๋ก ์ฝ๋๋ฅผ ํธ์ฌํด์ฃผ์ธ์. ๊ทธ๋ฐ ๋ค์ ์๋์ ๋ฆฌํฌ๋ก Pull request๋ฅผ ํด์ฃผ์ธ์.
- Pull Request ํ ํ๋ ์ ๋ฐ๋ผ PR๋ฅผ ๋ง๋ค์ด ์ ์ถํด์ฃผ์ธ์!
์ฒซ๋ฒ์งธ ์๊ณ ๋๋ ํ์คํ ๋์ฑ์ ํ์ด์ฌ๊ณผ ์๊ณ ํท์ผ๋ก ๋ง๋์ ๊ฒ์ ์ถํ๋๋ฆฝ๋๋ค! ๐๐
This starter full stack project has been generated using AlgoKit. See below for default getting started instructions.
- Clone this repository to your local machine.
- Ensure Docker is installed and operational. Then, install
AlgoKit
following this guide. - Run
algokit project bootstrap all
in the project directory. This command sets up your environment by installing necessary dependencies, setting up a Python virtual environment, and preparing your.env
file. - To build your project, execute
algokit project run build
. This compiles your project and prepares it for running. - For project-specific instructions, refer to the READMEs of the child projects:
- Smart Contracts: orakle-nft-marketplace-app-contracts
- Frontend Application: orakle-nft-marketplace-app-frontend
This project is structured as a monorepo, refer to the documentation to learn more about custom command orchestration via
algokit project run
.
- If you update to the latest source code and there are new dependencies, you will need to run
algokit project bootstrap all
again. - Follow step 3 above.
This project uses GitHub Actions to define CI/CD workflows, which are located in the .github/workflows
folder. You can configure these actions to suit your project's needs, including CI checks, audits, linting, type checking, testing, and deployments to TestNet.
For pushes to main
branch, after the above checks pass, the following deployment actions are performed:
- The smart contract(s) are deployed to TestNet using AlgoNode.
- The frontend application is deployed to a provider of your choice (Netlify, Vercel, etc.). See frontend README for more information.
Please note deployment of smart contracts is done via
algokit deploy
command which can be invoked both via CI as seen on this project, or locally. For more information on how to usealgokit deploy
please see AlgoKit documentation.
This project makes use of Python and React to build Algorand smart contracts and to provide a base project configuration to develop frontends for your Algorand dApps and interactions with smart contracts. The following tools are in use:
- Algorand, AlgoKit, and AlgoKit Utils
- Python dependencies including Poetry, Black, Ruff or Flake8, mypy, pytest, and pip-audit
- React and related dependencies including AlgoKit Utils, Tailwind CSS, daisyUI, use-wallet, npm, jest, playwright, Prettier, ESLint, and Github Actions workflows for build validation
It has also been configured to have a productive dev experience out of the box in VS Code, see the backend .vscode and frontend .vscode folders for more details.
Refer to the orakle-nft-marketplace-app-contracts folder for overview of working with smart contracts, projects/orakle-nft-marketplace-app-frontend for overview of the React project and the projects/orakle-nft-marketplace-app-frontend/contracts folder for README on adding new smart contracts from backend as application clients on your frontend. The templates provided in these folders will help you get started.
When you compile and generate smart contract artifacts, your frontend component will automatically generate typescript application clients from smart contract artifacts and move them to frontend/src/contracts
folder, see generate:app-clients
in package.json. Afterwards, you are free to import and use them in your frontend application.
The frontend starter also provides an example of interactions with your NftMarketplaceClient in AppCalls.tsx
component by default.
You can take this project and customize it to build your own decentralized applications on Algorand. Make sure to understand how to use AlgoKit and how to write smart contracts for Algorand before you start.