What is Hotdog

We'll be building a small app called: HotDog - basically Tinder, but for dogs! This app will serve as a great way to learn about building UIs, adding state, and deploying. By the end of this tutorial, you will launch your very own web, desktop, and mobile apps and a backend deployed to Fly.io

Feature of Hotdog App
Engage with a stream of cute dog photos Swipe right if we want to save the dog photo to our collection Swipe left if we don't want to save the dog photo View the dog photos we saved later

Installation & project setup


            $ Install vscode. Extensions(Rust Analyzer, Dioxus)
            $ cargo install dioxus-cli
            $ dx --version
            $ dx new hot_dog
            $ cd hot_dog
            $ dx serve
            http://127.0.0.1:8080

Code

- On every click of "Next Dog!", We pick a random dog. And show its pic

hot dog 

src/main.rs
use dioxus::prelude::*;
use web_sys::console;
use reqwest;

fn main() {
    // launch function calls the platform-specific launch function 
    // depending on which feature (web/desktop/mobile) is enabled on dioxus
    // launch accepts a root component, typically called App
    dioxus::launch(app);
}

fn app() -> Element {
    rsx! {
        dog_view {}
    }
}

#[derive(serde::Deserialize)]
struct DogApi {
    message: String,
}
impl DogApi {
    fn new() -> Self {
        DogApi {
            message: "".to_string()
        }
    }
}

fn dog_view() -> Element {
    // Resources are pieces of state whose value is dependent on the 
    // completion of some asynchronous work. The use_resource hook provides a Resource
    // object with helpful methods to start, stop, pause, 
    // and modify the asynchronous state. Resources are very powerful: they 
    // integrate with Suspense, Streaming HTML, reactivity, and more.
    let mut img_src = use_resource(|| async move {
        let message = reqwest::get("https://dog.ceo/api/breeds/image/random")
            .await
            .unwrap()
            .json::()
            .await
            .unwrap()
            .message;
        message
    });

    rsx! {
        div { id: "dogview",
            img { src: img_src.cloned().unwrap_or_default() }
        }
        div { id: "buttons",
            button { onclick: move |_| img_src.restart(), id: "next", "Next Dog!" }
        }
    }
}
                    

Cargo.toml
[package]
name = "hot_dog"
version = "0.1.0"
authors = ["amit kumar <23084104+code-with-amitk@users.noreply.github.com>"]
edition = "2021"

[dependencies]
dioxus = { version = "0.6.0", features = [] }
reqwest = { version = "0.12.9", features = ["json"] }
serde = { version = "1.0.216", features = ["derive"] }
web-sys = { version = "0.3", features = ["console"] }


[features]
default = ["web"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]

[profile]

[profile.wasm-dev]
inherits = "dev"
opt-level = 1

[profile.server-dev]
inherits = "dev"

[profile.android-dev]
inherits = "dev"