Skip to content

Users can create, edit and view their Personal NFT Galleries on this web app. Each Personal NFT Gallery is itself an NFT hosted on the Internet Computer blockchain platform, contains all data to be displayed as a regular webpage in any browser and can be viewed at a unique URL.

Notifications You must be signed in to change notification settings

Bebb-Protocol-and-Apps/PersonalNFTGallery

Repository files navigation

PersonalNFTGallery

Welcome to your new PersonalNFTGallery project and to the internet computer development community. By default, creating a new project adds this README and some template files to your project directory. You can edit these template files to customize your project and to include your own code to speed up the development cycle.

To get started, you might want to explore the project directory structure and the default configuration file. Working with this project in your development environment will not affect any production deployment or identity tokens.

To learn more before you start working with PersonalNFTGallery, see the following documentation available online:

If you want to start working on your project right away, you might want to try the following commands:

cd PersonalNFTGallery/
dfx help
dfx canister --help

Running the project locally

If you want to test your project locally, you can use the following commands:

# Starts the replica, running in the background
dfx start --background

# Deploys your canisters to the replica and generates your candid interface
dfx deploy
Local:
dfx deploy --argument "(
  principal\"$(dfx identity get-principal)\",
  record {
    logo = record {
      logo_type = \"image/png\";
      data = \"\";
    };
    name = \"Personal NFT Gallery\";
    symbol = \"PNFTG\";
    maxLimit = 65535;
  }
)"

dfx deploy --network ic --argument "(
  principal\"$(dfx identity get-principal)\",
  record {
    logo = record {
      logo_type = \"image/png\";
      data = \"\";
    };
    name = \"Personal NFT Gallery\";
    symbol = \"PNFTG\";
    maxLimit = 65535;
  }
)"

Once the job completes, your application will be available at http://localhost:8000?canisterId={asset_canister_id}.

Additionally, if you are making frontend changes, you can start a development server with

npm start

Which will start a server at http://localhost:8080, proxying API requests to the replica at port 8000.

Top up cycles: dfx identity --network=ic get-wallet dfx wallet --network ic balance dfx canister --network ic status PersonalNFTGallery_backend dfx canister --network ic status PersonalNFTGallery_frontend dfx canister --network ic --wallet 3v5vy-2aaaa-aaaai-aapla-cai deposit-cycles 3000000000000 PersonalNFTGallery_backend dfx canister --network ic --wallet 3v5vy-2aaaa-aaaai-aapla-cai deposit-cycles 300000000000 PersonalNFTGallery_frontend

2022-11-15: 3T for PersonalNFTGallery_backend (new balance: 6.8T); 3.3T for PersonalNFTGallery_frontend (new balance: 6.6T) (2023-02-20: basically haven't changed)

To update placeholder image (only image on new gallery): in backend, uncomment function updatePlaceholderImage in frontend, in init function: let image = await fetch("./PersonalNFTGallery_placeholderImage-min.png"); console.log('image'); console.log(image); let imageBlob = await image.blob(); console.log('imageBlob'); console.log(imageBlob); let imageBlobText = await imageBlob.text(); console.log('imageBlobText'); console.log(imageBlobText); let imageBlobArray = await imageBlob.arrayBuffer(); console.log('imageBlobArray'); console.log(imageBlobArray); let imageBlobUint = new Uint8Array(imageBlobArray); console.log('imageBlobUint'); console.log(imageBlobUint); console.log('imageBlobUint ...'); console.log([...imageBlobUint]); await PersonalNFTGallery_backend.updatePlaceholderImage([...imageBlobUint]);

Note on frontend environment variables

If you are hosting frontend code somewhere without using DFX, you may need to make one of the following adjustments to ensure your project does not fetch the root key in production:

  • setNODE_ENV to production if you are using Webpack
  • use your own preferred method to replace process.env.NODE_ENV in the autogenerated declarations
  • Write your own createActor constructor

Dev Notes

need to use single quotes in HTML to store as Text (which has double quotes) remove all newlines and other space (used for exampleString): https://www.textfixer.com/tools/remove-line-breaks.php

About

Users can create, edit and view their Personal NFT Galleries on this web app. Each Personal NFT Gallery is itself an NFT hosted on the Internet Computer blockchain platform, contains all data to be displayed as a regular webpage in any browser and can be viewed at a unique URL.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published