Integrate the Deployed Starknet Multi-Series SVG Contract with p5.js Web Editor

[caseywescott]

Increasing Access

The purpose of this issue is to deploy the smart contract that will handle the minting of SVGs as NFTs on Starknet. This process involves writing, testing, and deploying a smart contract using the Cairo programming language, ensuring that it correctly interacts with the p5.js Web Editor and the Starknet blockchain. This contract will be responsible for accepting SVG data, minting it as an NFT, and storing the relevant metadata on-chain.

Feature request details

Update the p5.js Web Editor’s codebase to interact with the deployed smart contract on Starknet.

Use the Starknet.JS SDK to connect the web editor to the smart contract, allowing users to mint SVGs directly from the editor.

[Zeegaths]

can I take this?

[onlydustapp]

Hi @Zeegaths!
Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Zeegaths]

ok,, I applied already

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience deploying smart contracts on Starknet and integrating them with web applications. I can effectively write, test, and deploy the smart contract for minting SVGs as NFTs and connect it with the p5.js Web Editor using Starknet.JS SDK.

How I plan on tackling this issue

I would approach this problem as follows:

1. Contract Development:

   • Write the Contract: Develop the Cairo smart contract to handle SVG minting and metadata storage.
   • Test the Contract: Use the Cairo testing framework to ensure the contract works as expected.

2. Deployment:

   • Deploy the Contract: Deploy the contract on the Starknet testnet or mainnet.

3. Integration:

   • Update p5.js Web Editor: Modify the editor to include functionality for SVG minting.
   • Connect Using Starknet.JS SDK: Implement functions to interact with the deployed contract, allowing users to mint SVGs directly from the editor.

4. Testing and Validation:

   • End-to-End Testing: Ensure the integration between the p5.js Web Editor and Starknet works correctly.
   • User Testing: Validate that users can mint and view SVG NFTs without issues.

[LukePereyra]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience deploying smart contracts on Starknet and integrating them with web applications. I can effectively write, test, and deploy the smart contract for minting SVGs as NFTs and connect it with the p5.js Web Editor using Starknet.JS SDK.

How I plan on tackling this issue

I would approach this problem as follows:

Contract Development:

Write the Contract: Develop the Cairo smart contract to handle SVG minting and metadata storage.
Test the Contract: Use the Cairo testing framework to ensure the contract works as expected.
Deployment:

Deploy the Contract: Deploy the contract on the Starknet testnet or mainnet.
Integration:

Update p5.js Web Editor: Modify the editor to include functionality for SVG minting.
Connect Using Starknet.JS SDK: Implement functions to interact with the deployed contract, allowing users to mint SVGs directly from the editor.
Testing and Validation:

End-to-End Testing: Ensure the integration between the p5.js Web Editor and Starknet works correctly.
User Testing: Validate that users can mint and view SVG NFTs without issues.

[DiegoB1911]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Developer with two years of experience. I'm also an active member of Dojo Coding, where I'm expanding my skills in Cairo and Web3 technologies. This is my first time participating in an Only Dust Hackathon, and I'm eager to learn, contribute, and be part of a new project.

How I plan on tackling this issue

My plan for this task is to:

Develop and Test the Smart Contract: I will write the smart contract in Cairo, ensuring it handles SVG data correctly, mints it as an NFT, and stores the metadata on-chain.

Integrate with p5.js Web Editor: I will update the p5.js Web Editor’s codebase to interact seamlessly with the deployed smart contract. This will involve using the Starknet.JS SDK to establish a connection between the editor and the smart contract, enabling users to mint SVGs directly from the editor.

Deployment and Verification: Once development and testing are complete, I will deploy the contract to Starknet and verify its integration with the p5.js Web Editor to ensure a smooth user experience.

[MachoMaheen]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a senior undergraduate student pursuing a BTech in Computer Science and Engineering with a strong focus on blockchain development and full-stack web development. My experience includes working as a Full Stack Blockchain Developer at Spathion Labs, where I developed smart contracts for a DeFi lending pool on the Shardeum Blockchain. Additionally, I have hands-on experience with Cairo programming language and Rust, having participated in the StarkNet hackathon, where I developed a VS Code extension for StarkNet.

I've also contributed to projects like Certify-ETH at ETHIndia 2022, where I developed a secure blockchain-based platform for digital certifications using HardHat and Next.js. My proficiency with React.js, Node.js, and integrating blockchain solutions into web applications makes me confident in my ability to bridge the deployed Starknet Multi-Series SVG Contract with the p5.js Web Editor. I am well-versed in using Starknet.JS SDK and have a track record of implementing token rewards and smart contract interactions.

How I plan on tackling this issue

To address this issue, my approach would involve the following steps:

1. Understand the Existing Infrastructure: First, I would thoroughly review the p5.js Web Editor’s codebase and the existing smart contract written in Cairo. This will help me understand how the SVG data is currently managed and what changes are required to integrate with Starknet.

2.Smart Contract Deployment: I would start by writing and testing the necessary Cairo smart contract that can handle the minting of SVGs as NFTs on Starknet. Ensuring it accepts SVG data correctly and securely stores the metadata on-chain would be crucial.

3. Integration with p5.js Web Editor: Using the Starknet.JS SDK, I would connect the deployed smart contract with the p5.js Web Editor. This would involve writing JavaScript functions to allow users to mint SVGs directly from the editor. I would ensure smooth communication between the front-end and the Starknet blockchain, handling all necessary transactions and confirmations.

4. Testing and Debugging: I would rigorously test the integration to ensure that SVGs are minted correctly and all metadata is accurately stored. This would include testing various scenarios like minting multiple NFTs simultaneously, handling failed transactions, and ensuring that the user experience is seamless.

5. Documentation and Collaboration: Throughout the process, I would document the code and integration steps to make it easier for other developers to understand and contribute. I would also collaborate with other team members and stakeholders to ensure that the final implementation meets the project’s goals.