:zap: Svelte Rollup Crypto

• Svelte library used with Bootstrap & Rollup module bundler to display data from the CoinGecko Cryptocurrency API
• Code from Fazt Code but with code and style modifications - see :clap: Inspiration below.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Svelte Rollup Crypto
  • :page_facing_up: Table of contents
  • :books: General Info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :computer: Code Examples
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Svelte onMount function used during initialisation, schedules a callback to run after component mounted to DOM
• Nearly all code is in App.svelte file. Minified Bootstrap added in index.html header
• Table is partially responsive - future update: drop last 'Market Cap.' column to fit mobile size using @media sizing
• I added sitemap.xml and robots.txt files to docs folder for improved Lighthouse SEO score
• Code modified to add build files to docs (i.e. not 'public' folder) for Github deployment

:camera: Screenshots

:signal_strength: Technologies

• Svelte v3 fast front-end UI library with small bundles of highly-optimized vanilla JavaScript & declarative transitions. Does not use a virtual DOM.
• Bootstrap v5 framework for styling and components
• Rollup v7 JS module bundler
• Sirv v1 optimized middleware & CLI application for serving static files
• CoinGecko Cryptocurrency API - see example-coin.json for API response format

:floppy_disk: Setup

• npm i to install dependencies
• npm run dev to run dev server
• npm run build to build optimised version
• npm run start to run the newly built app

:wrench: Testing

• N/A

:computer: Code Examples

• App.svelte table to display results from crypto API fetch

<table class="table table-light table-hover my-4">
      <thead>
        <tr>
          {#each headings as heading}
            <th class={heading == "Coin" ? "px-3" : ""}>{heading}</th>
          {/each}
        </tr>
      </thead>
      <tbody>
        {#each filteredCoins as coin, i}
          <tr>
            <td>
              <img
                src={coin.image}
                alt={coin.name}
                style="width: 1.5rem"
                class="img-fluid mx-2"
              />
              <span class="ms-3">
                {coin.name}
              </span>
              <span class="text-uppercase">
                ({coin.symbol})
              </span>
            </td>
            <td>
              {coin.current_price.toLocaleString()}
            </td>
            <td
              class={coin.price_change_24h > 0
                ? "bg-success text-white font-weight-bold"
                : "bg-danger text-white font-weight-bold"}
            >
              {coin.price_change_percentage_24h}
            </td>
            <td>
              {coin.market_cap.toLocaleString()}
            </td>
          </tr>
        {/each}
      </tbody>
</table>

:cool: Features

• compact build folder - weighs 88KB
• Deployed with 100% Perfect lighthouse score

:clipboard: Status & To-Do List

• Status: Working. Deployed to Github Pages
• To-Do: Add PWA if this is possible in Svelte

:clap: Inspiration

• Fazt Code: Svelte Precios Crypto | Svelte & CoinGecko API in Spanish
• MDN Web Docs: Getting started with Svelte

:file_folder: License

• N/A

:envelope: Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com