{"id":25926810,"url":"https://github.com/liciacodes/country-explorer","last_synced_at":"2026-04-05T08:33:59.475Z","repository":{"id":279972261,"uuid":"939642259","full_name":"Liciacodes/Country-Explorer","owner":"Liciacodes","description":"Rest Country Listing is a web application that allows users to browse and search for countries using the REST Countries API. The app features a dark/light mode toggle for better user experience.","archived":false,"fork":false,"pushed_at":"2025-03-05T21:49:43.000Z","size":745,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T20:47:24.119Z","etag":null,"topics":["react-router","reactjs","rest-api","tailwindcss"],"latest_commit_sha":null,"homepage":"https://rest-country-listing-with-color-theme.netlify.app/","language":"TypeScript","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/Liciacodes.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-26T21:40:52.000Z","updated_at":"2025-03-05T21:49:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"909bbc7c-3dff-4e4b-983e-35c733c7e4e3","html_url":"https://github.com/Liciacodes/Country-Explorer","commit_stats":null,"previous_names":["liciacodes/rest-country-listing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Liciacodes/Country-Explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liciacodes%2FCountry-Explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liciacodes%2FCountry-Explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liciacodes%2FCountry-Explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liciacodes%2FCountry-Explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Liciacodes","download_url":"https://codeload.github.com/Liciacodes/Country-Explorer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liciacodes%2FCountry-Explorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275622658,"owners_count":25498326,"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","status":"online","status_checked_at":"2025-09-17T02:00:09.119Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react-router","reactjs","rest-api","tailwindcss"],"created_at":"2025-03-03T20:03:17.599Z","updated_at":"2025-09-17T16:00:14.905Z","avatar_url":"https://github.com/Liciacodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - REST Countries API with Color Theme Switcher Solution\n\nThis is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help improve coding skills by building realistic projects.\n\n## Table of contents\n\nOverview\n\n- The Challenge\n- Screenshot\n- Links\n- My Process\n- Built With\n- What I Learned\n- Continued Development\n- Useful Resources\n- Author\n- Acknowledgments\n\n\n\n## Overview\n\n## The Challenge\n\nUsers should be able to:\n\n- See all countries from the API on the homepage\n\n- Search for a country using an input field\n\n- Filter countries by region\n\n- Click on a country to see more detailed information on a separate page\n\n- Click through to the border countries on the detail page\n\n- Toggle the color scheme between light and dark mode\n\n### Screenshot\n\n### Light Mode\n![Light Mode](https://github.com/user-attachments/assets/acbe55f6-d1a6-4bae-804c-f1161cb9babb)\n\n### Dark Mode\n![Dark Mode](https://github.com/user-attachments/assets/230bcc1c-7c28-46e1-80e6-f60ee7526320)\n\n\n### Links\n\n- Solution URL: https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca?tab=solutions\n\n- Live Site URL: https://rest-country-listing-with-color-theme.netlify.app/\n\n## My Process\n\n### Built With\n\n- Semantic HTML5 markup\n- Tailwind CSS for styling\n- Flexbox \u0026 Grid for layout\n- Mobile-first workflow\n- React - JavaScript library\n- React Router - For navigation\n- REST Countries API - API for fetching country data\n- React Icons - For dark mode toggle and navigation icons\n\n### What I Learned\n\nWhile working on this project, I learned how to:\n\n- Implement dark mode using React state and Tailwind CSS\n- Manage dynamic routes with react-router-dom\n- Fetch and display data from an external API\n- Use useParams to get dynamic URL segments\n- Optimize UI components using reusable components like CountryCard\n\nExample Code for Dark Mode Toggle:\n\n```jsx\nconst [darkMode, setDarkMode] = useState\u003cboolean\u003e(false);\n\nreturn (\n  \u003cdiv className={`${darkMode ? 'dark' : ''}`}\u003e\n    \u003cNavbar darkMode={darkMode} setDarkMode={setDarkMode} /\u003e\n  \u003c/div\u003e\n);\n```\n\n### Continued Development\n\n- Implement a loading state while fetching data\n- Add animations for better user experience\n  \n\n\n### Useful Resources\n\n- Tailwind CSS Docs - Helped with styling efficiently.\n- React Router Docs - Helped in setting up navigation and dynamic routes.\n- REST Countries API - Official API documentation.\n\n### Author\n\n- Website - feliciaudosen.com\n- Frontend Mentor - @Liciacodes\n- GitHub - @Liciacodes\n- Twitter - @liciacodes_\n\n### Acknowledgments\n\nSpecial thanks to Frontend Mentor for providing great challenges and helping developers improve their skills. Also, thanks to the Tailwind and React communities for their extensive documentation and resources.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliciacodes%2Fcountry-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliciacodes%2Fcountry-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliciacodes%2Fcountry-explorer/lists"}