Skip to content

📋 Tutorial app to display random Github user info. using Svelte with rxjs. Code by Ilia Mikhailov of Codechips.me with minor changes due to deprecations & commenting

Notifications You must be signed in to change notification settings

AndrewJBateman/svelte-rxjs-api

Repository files navigation

⚡ Svelte RXJS API

  • Snowpack-generated Sveltejs app to display random Github users
  • Code by Ilia Mikhailov of Codechips.me - see 👏 Inspiration below. Some minor changes due to deprecations & commenting.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • App bootstrapped with Create Snowpack App (CSA)
  • Displays random Github user details
  • Note: Rxjs 'combineLatest' is deprecated - replaced with combineLatestWith
  • JSON.stringify() method initially used to convert a JavaScript object to a JSON string

📷 Screenshots

Frontend screenshot

📶 Technologies

  • Snowpack v3 frontend build tool, alternative to webpack or Parcel etc.
  • Sveltejs v3 fast front-end UI library with small bundles of highly-optimized vanilla JavaScript & declarative transitions. Does not use a virtual DOM.
  • RxJS v7 Reactive Extensions JS library
  • [RxJS/AJAX] used to fetch Github API observable
  • Github REST API v2 RESTful API with data on all world countries. Get a Github access token so API access not limited

💾 Setup

  • npm i to install dependencies
  • npm start to run Snowpack dev server on port localhost:8080
  • npm run build to build a static copy of app to a build/ folder

🔧 Testing

  • N/A

💻 Code Examples

  • Svelte code to display Github user info.
<div>
    <button class="refresh" on:click={refresh}>refresh</button>
    {#if $suggestions}
      <ul>
        {#each $suggestions as user}
          <li>
            <div class="user">
              <img src={user.avatar_url} alt={user.login} />
              <a href={user.html_url}>{user.login}</a>
              <button class="refresh" on:click={() => replace(user.login)}
                >x</button
              >
            </div>
          </li>
        {/each}
      </ul>
    {/if}
  </div>

🆒 Features

  • Observables can be displayed in Svelte markup with a preceding $

📋 Status & To-Do List

  • Status: Working
  • To-Do: Add more commenting and try diffferent RxJS methods

👏 Inspiration - code by Ilia Mikhailov

📁 License

  • N/A

✉️ Contact

About

📋 Tutorial app to display random Github user info. using Svelte with rxjs. Code by Ilia Mikhailov of Codechips.me with minor changes due to deprecations & commenting

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published