: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

: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

:file_folder: License

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

:envelope: Contact

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes