{"id":18614772,"url":"https://github.com/andrewjbateman/svelte-tailwind-ssr","last_synced_at":"2026-05-08T04:35:30.756Z","repository":{"id":96860996,"uuid":"396472729","full_name":"AndrewJBateman/svelte-tailwind-ssr","owner":"AndrewJBateman","description":":clipboard: Svelte3 with Tailwind styles used to display API data in a SSR app","archived":false,"fork":false,"pushed_at":"2023-10-25T15:11:37.000Z","size":1610,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-27T02:44:38.310Z","etag":null,"topics":["api-rest","countries-api","css","github-api","rxjs-observables","rxjs7","svelte","svelte3","tailwindcss","tailwindcss-v3"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-08-15T19:44:49.000Z","updated_at":"2023-11-15T14:51:58.000Z","dependencies_parsed_at":"2023-05-11T21:10:20.843Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/svelte-tailwind-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fsvelte-tailwind-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fsvelte-tailwind-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fsvelte-tailwind-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fsvelte-tailwind-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/svelte-tailwind-ssr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239406449,"owners_count":19633024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-rest","countries-api","css","github-api","rxjs-observables","rxjs7","svelte","svelte3","tailwindcss","tailwindcss-v3"],"created_at":"2024-11-07T03:26:57.234Z","updated_at":"2026-05-08T04:35:25.738Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Svelte Tailwind SSR\n\n* Sveltejs kit used with Vite and RxJS \u0026 Tailwind CSS to display country \u0026 Github API data\n* Latest vite/Svelte3 folder layout using `+page.server.ts` to fetch server-side data to pass to `+page.svelte` client page.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/svelte-tailwind-ssr?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/svelte-tailwind-ssr?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/svelte-tailwind-ssr?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/svelte-tailwind-ssr?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Svelte Tailwind SSR](#zap-svelte-tailwind-ssr)\n\t* [:page\\_facing\\_up: Table of contents](#page_facing_up-table-of-contents)\n\t* [:books: General info](#books-general-info)\n\t* [:camera: Screenshots](#camera-screenshots)\n\t* [:signal\\_strength: Technologies](#signal_strength-technologies)\n\t* [:floppy\\_disk: Setup](#floppy_disk-setup)\n\t* [:wrench: Testing](#wrench-testing)\n\t* [:computer: Code Examples](#computer-code-examples)\n\t* [:cool: Features](#cool-features)\n\t* [:clipboard: Status \\\u0026 To-Do List](#clipboard-status--to-do-list)\n\t* [:clap: Inspiration](#clap-inspiration)\n\t* [:file\\_folder: License](#file_folder-license)\n\t* [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Displays grid of Tailwind-styled cards, one for each country\n* Tailwind CSS card markup shown using separate card components\n* Search bar shows all countries that match the user search text\n* Country detail page uses the country alpha3 code in lower case as the unique id passed by route params.\n* About page gives details of the app with a Github link\n* Contact page gives info. on the author via the Github API\n* API endpoint: `http://localhost:3000/api/countries/` shows all countries\n* API endpoint: `http://localhost:3000/api/countries/id` shows country with matching id\n* Unused Tailwind CSS is purged during build which makes for a much lighter bundle\n* [REST API Endpoints](https://restcountries.eu/#api-endpoints-code)\n\n## :camera: Screenshots\n\n![Frontend screenshot](./imgs/search.png)\n![Frontend screenshot](./imgs/country.png)\n![Frontend screenshot](./imgs/contact.png)\n![Frontend screenshot](./imgs/about.png)\n![Frontend screenshot](./imgs/api.png)\n\n## :signal_strength: Technologies\n\n* [Sveltejs/kit v1](https://kit.svelte.dev/) Svelte \u0026 Vite-based framework\n* [Svelte v3](https://svelte.dev/) React-based \u0026 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 \u0026 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\n* [Vite v4](https://www.npmjs.com/package/vite) Frontend Tooling dev server and build command for optimised build static assets.\n* [RxJS v7](https://rxjs.dev/) Reactive Extensions Library for JavaScript\n* [Tailwind CSS v3](https://tailwindcss.com/) CSS framework\n* [Tailwind Colour Palette](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n* [Online color converter, hex to Tailwind](https://tailwind-color-finder.vercel.app/)\n* [REST Countries API v2](https://restcountries.eu/) RESTful API with data on all world countries\n\n## :floppy_disk: Setup\n\n* `npm i` to install dependencies\n* `npm run dev` to run dev server on port `localhost:3000`\n* `npm run build` to build optimised version\n* `npm run preview` to run the newly built app\n\n## :wrench: Testing\n\n* N/A\n\n## :computer: Code Examples\n\n* `store/datastore.ts` functions to fetch JSON data from Github \u0026 Restcountries APIs\n\n```typescript\n// Fetch user data from Github REST API\nconst baseUrl = 'https://api.github.com/users/';\nconst userSearchUrl = `${baseUrl + 'AndrewJBateman'}`;\nexport const user = ajax({\n\turl: userSearchUrl\n}).pipe(\n\tmap((x) =\u003e x.response),\n\tstartWith([])\n);\n\n// Fetch JSON data - 3 fields only - for all countries from Restcountries API\nexport const fetchCountries = async () =\u003e {\n\tconst url = 'https://restcountries.com/v2/all?fields=name,flag,alpha3Code';\n\tconst res = await fetch(url);\n\tconst data = await res.json();\n\tconst loadedData = data.map((data) =\u003e ({\n\t\tname: data.name,\n\t\tid: data.alpha3Code.toLowerCase(),\n\t\timage: data.flag\n\t}));\n\tcountries.set(loadedData);\n};\n\n// Fetch JSON data on country with alpha3 code matching id from Restcountries API\nexport const fetchCountryById = async (id) =\u003e {\n\tif (countryDetails[id]) return countryDetails[id];\n\n\ttry {\n\t\tconst url = `https://restcountries.com/v2/alpha/${id}`;\n\t\tconst res = await fetch(url);\n\t\tconst data = await res.json();\n\t\tcountryDetails[id] = data;\n\t\treturn data;\n\t} catch (err) {\n\t\tconsole.error(err);\n\t\treturn null;\n\t}\n};\n```\n\n## :cool: Features\n\n* Search input filtering\n* No API keys required\n* Tailwind results in a very compact bundle and helps with Lighthouse audit\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working\n* 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?\n\n## :clap: Inspiration\n\n* [James Q Quick: SvelteKit Crash Course - SSR, API Routes, Stores, Tailwind CSS, and More!](https://www.youtube.com/watch?v=UU7MgYIbtAk\u0026t=63s)\n* [Support trailing $ name convention for stores (Observables)](https://www.gitmemory.com/issue/sveltejs/svelte/6373/851059020)\n* [Learn RXJS ajax example](https://www.learnrxjs.io/learn-rxjs/operators/creation/ajax)\n* [MDN: Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)\n* [netlify: Migrating Breaking Changes in SvelteKit](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fsvelte-tailwind-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fsvelte-tailwind-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fsvelte-tailwind-ssr/lists"}