NFT Marketplace with SvelteKit and Magic

This is an NFT Marketplace DApp built with SvelteKit and Magic. It is a remix of both Nader Dabit's and Sean Mullen's apps - Building a Full Stack NFT Marketplace on Ethereum with Polygon and How to add Magic Link to a SvelteKit application, respectively.

Here's a video format explaining how the app was built.

Getting Started

Note: The smart contracts for this DApp were only deployed on the local Hardhat network. To see how you can deploy to a test or main network, make sure to check out Nader Dabit's tutorial!

1. Clone this repo: gh repo clone seemcat/nft-marketplace-sveltekit-magic & run npm install.

2. Set up your .env file by first changing its file name: mv .example-env .env. Then create an account with Magic. Grab your Publishable API Key; it's the value for VITE_MAGIC_PUBLIC_KEY. The Secret Key is the value for MAGIC_SECRET_KEY.

3. Spin up the local Hardhat network: npx hardhat node. This will create 19 test accounts which we will use later.

4. Deploy the smart contracts onto the local Hardhat network: npx hardhat run scripts/deploy.js --network localhost.

5. Once you've deployed the smart contracts, the CLI will print out the addresses where the contracts were deployed. Run mv example-config.js config.js and paste the addresses into their rightful spots in the config.js file.

6. Run the client side: npm run dev.

   Note: There's currently a bug in one of the dependency files. While we wait for a fix, here's a workaround:

   a) Go into node_modules/electron-fetch/lib/index.es.js.

   b) Replace this line of code: import { STATUS_CODES } from 'http'; with import { getStatusCode } from 'http-status-codes';.

   c) Replace STATUS_CODES[this.status] with getStatusCode[this.status].

   If you run npm run dev, the client side should now work.

7. Now that the app is running, create an account & Magic wallet by logging in. Once you've logged in, go into the Profile page. Here you will find your Public Address & Account Balance.

8. You'll start off with a 0 balance. To add some test ETH to your Magic Wallet, use the Rinkeby Faucet.

9. Now that you have some test ETH, you can mint, buy or view NFTs!

Any Questions?

If you run into any issues at all, please join the Magic Discord Server - this is where Maricris & other Magicians hang out. We'd be more than happy to help!