andrewjbateman / svelte-tailwind-ssr

:clipboard: Svelte3 with Tailwind styles used to display API data in a SSR app

⚡ 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

📄 Table of contents

• ⚡ Svelte Tailwind SSR
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 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

📷 Screenshots

📶 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

💾 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

🔧 Testing

• N/A

💻 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;
	}
};

🆒 Features

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

📋 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?

👏 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

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [email protected]