Crypto Currency Price Viewer

This is a simple mobile application built using Ionic Framework, Vue 3, and TypeScript, designed to fetch and display cryptocurrency data from the public API:

https://api.coinlore.net/api/tickers/

The app shows a list of cryptocurrencies with information such as rank, name, symbol, and USD price, styled in a clean and mobile-friendly layout. It also includes a Refresh button to update data on demand.

This repository is made for complete the 3rd task of Mobile Device-Based Programming (PPB) from Universitas Terbuka.

Tech Stack

Tool	Desc
Ionic 7	UI framework for mobile apps
Vue 3	Frontend framework
TypeScript	Strong typing for safer code
Vite	Fast development bundler
Capacitor	Native mobile runtime
CSS Grid	Clean layout for crypto list

Installation

Clone this repo

git clone https://github.com/mfazahanif/api-crypto-name-ionic-vue.git
cd api-crypto-name-ionic-vue

Install Dependencies

npm install

Makesure install ionic on global

npm install -g @ionic/cli

Running project on browser

ionic serve

Open http://localhost:8100/crypto

Running on Emulator

• Build web assets

npm run build

• Sync with android

npx cap sync android

• Run Emulator

npx @ionic/cli@latest capacitor run android -l –external

Features

• Fetch live cryptocurrency data from API (Coinlore)
• Display:
  • Rank
  • Name
  • Symbol
  • Price in USD
• Clean UI using Ionic components
• Fully reactive using Vue 3 Composition API
• Ready to run on:
  • Browser (ionic serve)
  • Android emulator
  • Physical Android device

How it works

• Fetching data

  The app uses async/await to call the API when the page loads:

  const fetchCrypto = async () => {
      const res = await fetch("https://api.coinlore.net/api/tickers/");
      cryptos.value = (await res.json()).data;
  };

• Reactive state

  Vue 3 ref() is used so that UI updates automatically when data changes:

  const cryptos = ref<Crypto[]>([]);
  const loading = ref(true);

• Typescript

  The Crypto interface defines the structure of API data:

  interface Crypto {
      rank: string;
      name: string;
      symbol: string;
      price_usd: string;
  }

• Routing

  Default route redirects to /crypto, necessary for emulator:

  {
      path: "/",
      redirect: "/crypto",
  }

License

This project is open-source and free for learning & experimentation especially if you are a student of Universitas Terbuka.