https://github.com/andrewjbateman/svelte-rxjs-api

:clipboard: 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
https://github.com/andrewjbateman/svelte-rxjs-api

ajax-request api-rest css3 github-api html5 rxjs rxjs-observables snowpack svelte3

Last synced: 4 days ago
JSON representation

:clipboard: 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

• Host: GitHub
• URL: https://github.com/andrewjbateman/svelte-rxjs-api
• Owner: AndrewJBateman
• Created: 2021-08-19T15:37:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-21T20:05:51.000Z (almost 3 years ago)
• Last Synced: 2025-01-11T08:48:38.040Z (4 days ago)
• Topics: ajax-request, api-rest, css3, github-api, html5, rxjs, rxjs-observables, snowpack, svelte3
• Language: TypeScript
• Homepage:
• Size: 694 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# :zap: Svelte RXJS API

* Snowpack-generated Sveltejs app to display random Github users

* Code by [Ilia Mikhailov of Codechips.me](https://codechips.me/) - see [:clap: Inspiration](#clap-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](https://img.shields.io/github/repo-size/AndrewJBateman/svelte-rxjs-api?style=plastic)

![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/svelte-rxjs-api?style=plastic)

![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/svelte-rxjs-api?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/svelte-rxjs-api?style=plastic)

## :page_facing_up: Table of contents

* [:zap: Svelte RXJS API](#zap-svelte-rxjs-api)

  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)

  * [:books: General info](#books-general-info)

  * [:camera: Screenshots](#camera-screenshots)

  * [:signal_strength: Technologies](#signal_strength-technologies)

  * [:floppy_disk: Setup](#floppy_disk-setup)

  * [:wrench: Testing](#wrench-testing)

  * [:computer: Code Examples](#computer-code-examples)

  * [:cool: Features](#cool-features)

  * [:clipboard: Status & To-Do List](#clipboard-status--to-do-list)

  * [:clap: Inspiration - code by Ilia Mikhailov](#clap-inspiration---code-by-ilia-mikhailov)

  * [:file_folder: License](#file_folder-license)

  * [:envelope: Contact](#envelope-contact)

## :books: General info

* App bootstrapped with [Create Snowpack App (CSA)](https://www.snowpack.dev/)

* 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

## :camera: Screenshots

![Frontend screenshot](./imgs/users.png)

## :signal_strength: Technologies

* [Snowpack v3](https://www.snowpack.dev/) frontend build tool, alternative to webpack or Parcel etc.

* [Sveltejs v3](https://svelte.dev/) fast front-end UI library with small bundles of highly-optimized vanilla JavaScript & declarative transitions. Does not use a virtual DOM.

* [RxJS v7](https://rxjs.dev/) Reactive Extensions JS library

* [RxJS/AJAX] used to fetch Github API observable

* [Github REST API v2](https://docs.github.com/en/rest/reference/users) RESTful API with data on all world countries. [Get a Github access token](https://github.com/settings/tokens) so API access not limited

## :floppy_disk: 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

## :wrench: Testing

* N/A

## :computer: Code Examples

* Svelte code to display Github user info.

```svelte



    refresh

    {#if $suggestions}

      


        {#each $suggestions as user}

          


            


              

              {user.login}

               replace(user.login)}

                >x

            

          

        {/each}

      

    {/if}

  

  ```


## :cool: Features

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

## :clipboard: Status & To-Do List

* Status: Working

* To-Do: Add more commenting and try diffferent RxJS methods

## :clap: Inspiration - code by Ilia Mikhailov

* [Ilia Mikhailov: Recreating a classic FRP tutorial with Svelte and RxJS](https://codechips.me/classic-frp-tutorial-with-svelte-rxjs-6/)

## :file_folder: License

* N/A

## :envelope: Contact

* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]