:zap: Svelte Tailwind SSR

• Sveltejs kit used with Vite and RxJS & Tailwind CSS to display country & Github API data
• Latest vite/Svelte3 folder layout using +page.server.ts to fetch server-side data to pass to +page.svelte client page.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Svelte Tailwind SSR
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :wrench: Testing
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Displays grid of Tailwind-styled cards, one for each country
• Tailwind CSS card markup shown using separate card components
• Search bar shows all countries that match the user search text
• Country detail page uses the country alpha3 code in lower case as the unique id passed by route params.
• About page gives details of the app with a Github link
• Contact page gives info. on the author via the Github API
• API endpoint: http://localhost:3000/api/countries/ shows all countries
• API endpoint: http://localhost:3000/api/countries/id shows country with matching id
• Unused Tailwind CSS is purged during build which makes for a much lighter bundle
• REST API Endpoints

:camera: Screenshots

:signal_strength: Technologies

• Sveltejs/kit v1 Svelte & Vite-based framework
• Svelte v3 React-based & created by Facebook (Meta), it is a fast, light and efficient front-end UI library/compiler that converts code to small bundles of highly-optimized ES6 vanilla JavaScript & declarative transitions. Does not use a virtual DOM. I have had to completely restructure the app due to Svelte/vite breaking version changes. A lot of companies use Svelte
• Vite v4 Frontend Tooling dev server and build command for optimised build static assets.
• RxJS v7 Reactive Extensions Library for JavaScript
• Tailwind CSS v3 CSS framework
• Tailwind Colour Palette
• Online color converter, hex to Tailwind
• REST Countries API v2 RESTful API with data on all world countries

:floppy_disk: Setup

• npm i to install dependencies
• npm run dev to run dev server on port localhost:3000
• npm run build to build optimised version
• npm run preview to run the newly built app

:wrench: Testing

• N/A

:computer: Code Examples

• store/datastore.ts functions to fetch JSON data from Github & Restcountries APIs

// Fetch user data from Github REST API
const baseUrl = 'https://api.github.com/users/';
const userSearchUrl = `${baseUrl + 'AndrewJBateman'}`;
export const user = ajax({
    url: userSearchUrl
}).pipe(
    map((x) => x.response),
    startWith([])
);

// Fetch JSON data - 3 fields only - for all countries from Restcountries API
export const fetchCountries = async () => {
    const url = 'https://restcountries.com/v2/all?fields=name,flag,alpha3Code';
    const res = await fetch(url);
    const data = await res.json();
    const loadedData = data.map((data) => ({
        name: data.name,
        id: data.alpha3Code.toLowerCase(),
        image: data.flag
    }));
    countries.set(loadedData);
};

// Fetch JSON data on country with alpha3 code matching id from Restcountries API
export const fetchCountryById = async (id) => {
    if (countryDetails[id]) return countryDetails[id];

    try {
        const url = `https://restcountries.com/v2/alpha/${id}`;
        const res = await fetch(url);
        const data = await res.json();
        countryDetails[id] = data;
        return data;
    } catch (err) {
        console.error(err);
        return null;
    }
};

:cool: Features

• Search input filtering
• No API keys required
• Tailwind results in a very compact bundle and helps with Lighthouse audit

:clipboard: Status & To-Do List

• Status: Working
• To-Do: Change to API v3. Publish. Check Lighthouse score. Optimise for SSR. Add PWA? Add more API pages with nav-bar links. Add leaflet maps?

:clap: Inspiration

• James Q Quick: SvelteKit Crash Course - SSR, API Routes, Stores, Tailwind CSS, and More!
• Support trailing $ name convention for stores (Observables)
• Learn RXJS ajax example
• MDN: Date.prototype.toLocaleString()
• netlify: Migrating Breaking Changes in SvelteKit

:file_folder: License

• This project is licensed under the terms of the MIT license.

:envelope: Contact

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