DEV Community: amionweb

RoboFire: Cloud Clash Game Challenge Submission: Alibaba Cloud Web Game

amionweb — Sun, 27 Apr 2025 10:35:47 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

An exciting arcade-style game where you control a robot shooting down clouds and collecting coins while avoiding dangerous obstacles!

Demo

Live url: https://robo-fire.vercel.app/

amionweb / robo-fire

RoboFire: Cloud Clash 🤖☁️

An exciting arcade-style game where you control a robot shooting down clouds and collecting coins while avoiding dangerous obstacles!

🎮 Play Now

Play RoboFire: Cloud Clash

✨ Features

🎯 Intuitive controls with keyboard support
🌟 Beautiful visual effects and animations
🎨 Smooth gameplay mechanics
📈 Progressive difficulty system
🏆 High score tracking
🎵 Engaging sound effects
📱 Responsive design

🕹️ How to Play

Use Arrow keys or WASD to move your robot
Press Spacebar to shoot at clouds
Collect falling coins to score points
Avoid obstacles (lightning bolts and asteroids)
Reach level 10 to win!

🚀 Getting Started

# Clone the repository
git clone https://github.com/amionweb/robo-fire

# Navigate to the project directory
cd robofire-cloud-clash

# Install dependencies
npm install

# Start the development server
npm run dev

🛠️ Built With

React
TypeScript
HTML5 Canvas
TailwindCSS
Vite

🎯 Game Mechanics

Clouds: Shoot them to create collectible coins
…

View on GitHub

☁️ Alibaba Cloud Services Implementation

For RoboFire: Cloud Clash, I used Alibaba Cloud Object Storage Service (OSS) to host and serve the static game files, and configured a custom domain for a professional, fast-loading experience.

Services Used:

Object Storage Service (OSS)
- Why: OSS provides a highly reliable, scalable, and cost-effective way to store static web assets like HTML, CSS, JavaScript, and images.
- How Integrated:
- Built the game locally with npm run build.
- Uploaded the build folder contents directly to an OSS bucket.
- Configured the bucket for static website hosting (setting the index document to index.html).
- Experience: OSS made it extremely easy to deploy updates — I just re-upload the latest build files. The performance was excellent with low latency globally.
Domain Management + Custom Domain Binding
- Why: Custom domains make the game more shareable and professional.
- How Integrated:
- Purchased or linked an existing domain via Alibaba Cloud Domains.
- Mapped the domain to my OSS bucket via a CNAME record.
- Configured HTTPS using Alibaba Cloud SSL certificates for secure access.
- Experience: Domain setup was straightforward following Alibaba Cloud's documentation. Enabling HTTPS ensured that game assets loaded securely without browser warnings.

Benefits:

Fast content delivery worldwide
Very low maintenance and update cost
Scalable without worrying about backend servers

Challenges:

The initial learning curve with setting correct bucket permissions (public read) for the static website.
Slight delay (~10–15 mins) when applying custom domain settings and SSL.

🎯 Game Development Highlights

Simple Yet Addictive Gameplay:

I designed RoboFire: Cloud Clash to have a fast gameplay loop — move, shoot, collect, avoid — making it highly engaging even with minimal mechanics.

Progressive Difficulty

One of the coolest features is the dynamic level system. As players collect coins, the enemy cloud speed increases, making higher levels genuinely challenging without introducing complex new elements.

Clean Responsive Canvas Integration

Using HTML5 Canvas inside a React environment with Vite made rendering super fast and allowed the game to adapt nicely to different screen sizes (desktop, tablet, mobile).

Retro-Futuristic Visuals

I’m especially proud of the polished visual design — a clean, modern robot combined with nostalgic arcade-style effects like glowing coins and cloud explosions.

Optimized Performance

Despite animations and firing mechanics, the game remains lightweight (~a few MBs), fast-loading, and smooth at 60fps even on lower-end devices.

From Components to Creativity: Building a Portfolio with KendoReact

amionweb — Mon, 24 Mar 2025 06:45:29 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a personal portfolio website using React and KendoReact components. The portfolio showcases my skills, experience, projects, and testimonials from clients. The website is designed to be responsive, with a clean and modern UI that adapts to both light and dark themes. The portfolio includes several sections such as:

Hero Section: A visually appealing introduction with a 3D animated background and a call-to-action to download my resume or get in touch.
About Section: A brief introduction about myself, my skills, and what I specialize in.
Experience Section: A timeline of my professional experience, highlighting key roles and responsibilities.
Projects Section: A showcase of my featured projects, including technologies used and completion status.
Technologies Section: A detailed breakdown of my technical skills, categorized by frontend, backend, and DevOps.
Testimonials Section: Client testimonials with ratings, displayed in a grid layout for desktop and a carousel for mobile.
Contact Section: A form for visitors to get in touch with me, along with my contact information and social media links.

The portfolio is built with a focus on user experience, leveraging animations and transitions to create a smooth and engaging browsing experience.

Demo

https://kendo-portfolio-lemon.vercel.app/

amionweb / kendo-portfolio

KendoReact Experience

I leveraged KendoReact's free components extensively throughout the portfolio to create a polished and professional UI. Here are some of the key components I used:

Card Components: Used in multiple sections (About, Experience, Projects, Testimonials) to display content in a structured and visually appealing way.
TileLayout: Used in the About section to display my skills in a grid layout with staggered animations.
Fade Animation: Applied across various sections to create smooth fade-in animations as the user scrolls through the page.
Button Components: Used for call-to-action buttons, theme toggling, and navigation.
ProgressBar: Used in the Projects and Technologies sections to visually represent skill levels and project completion status.
Chip and ChipList: Used in the Projects section to display the technologies used in each project.
Avatar: Used in the Testimonials section to display client images.
Input and Label: Used in the Contact section for the form fields.
Drawer: Used in the mobile navigation menu to provide a smooth and responsive user experience.
AppBar: Used for the navigation bar, which is fixed at the top and adapts to the scroll position.

By using these KendoReact components, I was able to focus more on the overall design and functionality of the portfolio, rather than spending time building UI components from scratch. The components provided by KendoReact are highly customizable and integrate seamlessly with React, making the development process efficient and enjoyable.

AIm to Impress

Delightfully Designed

Kendo React Challenge Submission

amionweb — Mon, 24 Mar 2025 06:26:56 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Demo

KendoReact Experience

AIm to Impress

Delightfully Designed

Stellar contract CRUD Tutorial: Smart Contract Challenge

amionweb — Mon, 19 Aug 2024 06:55:47 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Your Tutorial

Stellar contract CRUD Tutorial A Step-by-Step Guide from Zero to Hero

amionweb ・ Aug 19 '24

#stellarchallenge

Here’s a structured submission for the "Build Better on Stellar: Smart Contract Challenge":

What I Created

For the "Build Better on Stellar: Smart Contract Challenge," I developed a comprehensive smart contract for managing products on the Stellar blockchain. This contract includes CRUD (Create, Read, Update, Delete) operations, allowing users to manage product listings effectively. The functionalities include:

Create a Product: Adds a new product to the system with details like name, description, and price.
Get a Product by ID: Retrieves a product's details using its unique ID.
Update a Product: Updates the product's details, including its name, description, and price.
Delete a Product: Marks a product as inactive without removing it from storage.
Permanently Delete a Product: Completely removes a product from storage.
Delete All Products: Clears all products from the system.

This contract enhances the Stellar developer experience by providing a practical example of managing data through smart contracts. Developers can utilize this contract as a blueprint for their own projects, easily adapting it to different use cases by modifying the product data structure or extending functionalities.

Journey

Research and Content Creation

My journey began with researching the Stellar smart contract capabilities and the Soroban SDK, which is used to build smart contracts on Stellar. I studied existing examples and documentation to understand best practices and the nuances of developing smart contracts in Rust.

Motivation

The motivation behind this submission was to create a flexible and practical example of a smart contract that could be immediately useful to other developers. The goal was to provide a straightforward implementation of CRUD operations, which are fundamental for many applications. By using this example, developers can get a head start on building and deploying their own smart contracts.

Learning and Experience

Throughout this process, I gained a deeper understanding of:

Smart Contract Development: From writing and deploying smart contracts to handling data persistence on the Stellar blockchain.
Stellar Ecosystem: How to interact with the Stellar network using Soroban SDK and the specific requirements for smart contracts.
Rust Programming: Leveraging Rust for building secure and efficient smart contracts.

I am particularly proud of creating a well-documented and functional contract that simplifies the complexities of smart contract development on Stellar. It is designed to be a practical resource for beginners and experienced developers alike.

Future Goals

Moving forward, I plan to:

Extend Functionality: Add features such as user authentication and role-based access control to the contract.
Improve Documentation: Create more detailed tutorials and examples to help developers integrate and customize smart contracts in their projects.
Explore Other Use Cases: Develop smart contracts for different applications, such as financial transactions or decentralized voting systems, to broaden the scope of practical implementations on Stellar.

This submission represents a foundational step in the journey of integrating smart contracts into real-world applications on the Stellar blockchain. It is designed to be both educational and practical, providing a valuable tool for developers looking to build on Stellar.

Stellar contract CRUD Tutorial A Step-by-Step Guide from Zero to Hero

amionweb — Mon, 19 Aug 2024 06:55:24 +0000

In this tutorial, we'll guide you through creating a Stellar smart contract from scratch. You'll learn how to implement basic CRUD (Create, Read, Update, Delete) operations for managing products in a decentralized application (dApp). By the end of this tutorial, you'll be able to add, update, delete, view, and get all products using a Stellar smart contract.

Prerequisites

Before we dive into the code, make sure you have the following:

Set Up Environment / Project Installation Guide

A) Environment Setup:

Install Rust, using command:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
nstall the Soroban CLI using below mentioned command. For more info visit => Soroban docs
cargo install --locked soroban-cli
Install Node.js
Get the Freighter Wallet extension for you browser.
Once enabled, then got to the network section and connect your wallet to the testnet.
Install wasm32-unknown-unknown package using command:
rustup target add wasm32-unknown-unknown
To configure your CLI to interact with Testnet, run the following command:

soroban network add \
  --global testnet \
  --rpc-url https://soroban-testnet.stellar.org:443 \
  --network-passphrase "Test SDF Network ; September 2015"

Step 1: Setting Up the Project

First, create a new Rust project by running the following command in your terminal:

stellar contract init product-crud

Navigate to the project directory:

cd product-crud

These dependencies allow us to interact with Stellar's Soroban platform.

Step 3: Defining the Product Struct

In your lib.rs file, start by defining the Product struct. This struct will hold the details of each product.

#![no_std] // We don't use the Rust standard library in smart contracts
use soroban_sdk::{contracttype, Env, String};

// Struct to represent a product in our dApp
#[contracttype]
#[derive(Clone)]
pub struct Product {
    pub id: u64,              // Unique ID for the product
    pub name: String,         // Name of the product
    pub description: String,  // Description of the product
    pub price: u64,           // Price of the product
}

Explanation:

The Product struct is defined with fields such as id, name, description, and price. This struct will store information about each product.

Step 4: Setting Up the Contract

Next, define the main contract structure and the CRUD operations. Here's how you can start:

use soroban_sdk::{contract, contractimpl, symbol_short, Symbol};

// Define a contract type called ProductContract
#[contract]
pub struct ProductContract;

// Enum for referencing product storage
#[contracttype]
pub enum Productbook {
    Product(u64),
}

// Symbol to track the total count of products
const COUNT_PRODUCT: Symbol = symbol_short!("C_PROD");

Explanation:

The ProductContract struct is defined as the main contract.
Productbook is an enum used to store and retrieve products by their ID.
COUNT_PRODUCT is a symbol used to track the number of products stored.

Step 5: Implementing the Create Operation

Now, let's implement the function to create a new product.

#[contractimpl]
impl ProductContract {
    pub fn create_product(
        env: Env,
        name: String,
        description: String,
        price: u64,
    ) -> u64 {
        let mut count_product: u64 = env.storage().instance().get(&COUNT_PRODUCT).unwrap_or(0);
        count_product += 1;

        let new_product = Product {
            id: count_product,
            name,
            description,
            price,
        };

        env.storage()
            .instance()
            .set(&Productbook::Product(new_product.id.clone()), &new_product);
        env.storage().instance().set(&COUNT_PRODUCT, &count_product);

        log!(&env, "Product Created with ID: {}", new_product.id);

        new_product.id
    }
}

Explanation:

The create_product function increments the count_product by 1 and creates a new product with the provided details.
The product is then stored in the contract's storage, and the ID of the newly created product is returned.

Step 6: Implementing the Read Operation

Let's add a function to retrieve a product by its ID.

impl ProductContract {
    pub fn get_product_by_id(env: Env, product_id: u64) -> Product {
        let key = Productbook::Product(product_id);

        env.storage().instance().get(&key).unwrap_or(Product {
            id: 0,
            name: String::from_str(&env, "Not Found"),
            description: String::from_str(&env, "Not Found"),
            price: 0,
        })
    }
}

Explanation:

The get_product_by_id function retrieves a product from storage by its ID. If the product is not found, it returns a default Product with "Not Found" values.

Step 7: Implementing the Update Operation

Now, add a function to update the details of an existing product.

impl ProductContract {
    pub fn update_product(
        env: Env,
        product_id: u64,
        new_name: Option<String>,
        new_description: Option<String>,
        new_price: Option<u64>,
    ) {
        let key = Productbook::Product(product_id);
        let mut product = Self::get_product_by_id(env.clone(), product_id);

        if let Some(name) = new_name {
            product.name = name;
        }
        if let Some(description) = new_description {
            product.description = description;
        }
        if let Some(price) = new_price {
            product.price = price;
        }

        env.storage().instance().set(&key, &product);

        log!(&env, "Product with ID: {} has been updated.", product_id);
    }
}

Explanation:

The update_product function allows updating the product's name, description, and price. If new values are provided, they replace the existing ones.

Step 8: Implementing the Delete Operation

Finally, let's implement a function to delete a product by its ID.

impl ProductContract {
    pub fn delete_product(env: Env, product_id: u64) {
        let key = Productbook::Product(product_id);

        if env.storage().instance().has(&key) {
            env.storage().instance().remove(&key);

            log!(&env, "Product with ID: {} has been deleted.", product_id);
        } else {
            log!(&env, "Product with ID: {} does not exist.", product_id);
        }
    }
}

Explanation:

The delete_product function removes a product from storage by its ID. If the product doesn't exist, a message is logged.

Step 9: Implementing the Get All Products Operation

Lastly, let's add a function to retrieve all products.

impl ProductContract {
    pub fn get_all_products(env: Env) -> Vec<Product> {
        let count_product: u64 = env.storage().instance().get(&COUNT_PRODUCT).unwrap_or(0);
        let mut products = Vec::new(&env);

        for i in 1..=count_product {
            let product = Self::get_product_by_id(env.clone(), i);
            products.push_back(product);
        }

        products
    }
}

Explanation:

The get_all_products function iterates through all the stored products and returns them as a vector.

Step 10: Testing and Deploying the Contract

In order to deploy the smartcontract you will need an account. You can either use the an account from the Freighter Wallet or can configure an account named alice in the testnet using the command:
soroban keys generate --global alice --network testnet
You can see the public key of account alice:
soroban keys address alice

=> Go inside the /product-crud directory and do the below mentioned steps:

Build the contract:

soroban contract build

Alternte command:

cargo build --target wasm32-unknown-unknown --release

Install Optimizer:

cargo install --locked soroban-cli --features opt

Build an Opmize the contract:

soroban contract optimize --wasm target/wasm32-unknown-unknown/release/hello_world.wasm

Steps to the Deploy smart-contract on testnet:

deploy the smartcontract on the testnet and get deployed address of the smartcontract using the following command:

stellar contract deploy --wasm target\wasm32-unknown-unknown\release\hello_world.wasm  --network testnet --source alice

Deployed address of this smartcontract: contract_address

*NOTE: If you get the XDR Error error: xdr processing error: xdr value invalid, then follow this article.

Invoke functions from the smart-contract:

#### To invoke any of the function from the smartcontract you can use this command fromat.

soroban contract invoke \
  --id <DEPLOYED_CONTRACT_ADDRESS> \
  --source <YOUR_ACCOUNT_NAME> \
  --network testnet \
  -- \
  <FUNCTION_NAME> --<FUNCTION_PARAMETER> <ARGUMENT>

Here are example soroban contract invoke commands for each of the functions in the ProductContract smart contract, using dummy data. Replace <DEPLOYED_CONTRACT_ADDRESS>, <YOUR_ACCOUNT_NAME>, and other placeholders with actual values.

1. Create a Product

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- create_product --name "Sample Product" --description "A description of the sample product." --price 1000

2. Get a Product by ID

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- get_product_by_id --product_id 1

3. Update a Product

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- update_product --product_id 1 --new_name "Updated Product" --new_description "Updated description of the product." --new_price 1200

4. Delete a Product

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- delete_product --product_id 1

5. Permanently Delete a Product

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- delete_product_permanently --product_id 1

6. Delete All Products

soroban contract invoke --id <DEPLOYED_CONTRACT_ADDRESS> --source <YOUR_ACCOUNT_NAME> --network testnet -- delete_all_products

Explanation of Parameters

--id <DEPLOYED_CONTRACT_ADDRESS>: The address where the smart contract is deployed.
--source <YOUR_ACCOUNT_NAME>: The account name used to invoke the contract.
--network testnet: The network on which the contract is deployed (e.g., testnet).
<FUNCTION_NAME>: The function you want to invoke in the smart contract.
<FUNCTION_PARAMETER <ARGUMENT>: The parameters required by the function.

Replace placeholders with actual values to interact with your deployed contract on the Stellar testnet.

Conclusion

Congratulations! You've successfully created a Stellar smart contract that performs CRUD operations for managing products. This guide walked you through setting up a Rust project, defining the contract and product structure, and implementing each CRUD operation step by step. You can now use this knowledge to build more complex dApps on the Stellar network.