Skip to main content

Explore examples

Beginner
Getting started
Tutorial

Overview​

ICP Ninja is a web-based integrated development environment (IDE) for creating and deploying decentralized applications (dapps) on the Internet Computer (ICP).

ICP Ninja provides a gallery of example projects you can explore to learn about different application types, architectures, and use cases. Example projects can be edited and then deployed to ICP directly from your web browser. Once deployed, you can open the application's frontend in your browser, share the public link to your new onchain dapp, or make calls directly to the backend through the Candid UI.

ICP Ninja serves as an introduction to developing on ICP and learning about:

Want to skip directly to using CLI tools in a local dev environment? Get started with the IC SDK.

Using ICP Ninja​

From the ICP Ninja homepage, select an example project to get started. You can filter the project gallery by project type, language, and skill level. Project variations are available for Motoko and Rust backend source code. Each ICP Ninja project uses the React framework for the application frontend.

The "Hello, World!" example is the most beginner-oriented project available. It resembles the default project template generated by the CLI tool dfx.

Exploring a project's code​

Once a project is open in the ICP Ninja code editor, you can:

  • Learn more about the project's functionality, features, and structure by reading the project's README.md file.

  • Revise the project's frontend by editing files in the frontend folder. Some files will be intentionally immutable.

  • Review or edit the backend code in the backend/main.mo (Motoko projects) or backend/lib.rs (Rust projects) file.

ICP Ninja is not designed to develop complex applications or replace tooling like the IC SDK.

Deploying to ICP​

Select the "Deploy" button. At the bottom of the screen, the "Build log" tab will show output that describes the project's deployment progress, such as:

→ Reserving canisters
→ Building backend
→ Generating backend declarations
→ Building frontend
...

Once deployed, you will receive two URLs:

Backend canister smart contract:
https://a4gq6-oaaaa-aaaab-qaa4q-cai.icp1.io/?id=ts425-saaaa-aaaab-qbksq-cai
🥷🚀🎉 Frontend is available at:
https://2drrs-wqaaa-aaaab-qblbq-cai.icp1.io

The backend canister URL will open the Candid UI which can interact directly with the backend canister's methods. A method is a function exposed by the canister that can be called by a user, another canister, or the application's frontend.

The frontend URL will open the application's frontend user interface. To create this frontend, the project's React files (shown in the ICP Ninja code editor within the frontend/ folder) have been compiled and deployed as an asset canister.

This application will be live for 20 minutes. After 20 minutes, it will expire, and the URLs will become invalid. The project code will still be accessible, and you can redeploy the application at any time to view it for another 20 minutes.

To edit the project after it has been deployed, edit the code within the ICP Ninja code editor, then select "Redeploy." Redeploying the project will reset the 20-minute deployment timer and apply any changes you made to the project's files since the last deployment.

Next steps​

Once you are ready to either deploy your ICP Ninja project longer than the temporarily allocated time or start building more complex, advanced projects, you will need to:

  • Download the ICP Ninja project files by selecting the dropdown menu next to the "Deploy" button, then select "Download files." If you want to start a new project instead, you can skip this step.

  • Install tools.