{"id":24277212,"url":"https://github.com/indiecodermm/nation-guide","last_synced_at":"2025-06-17T11:35:41.358Z","repository":{"id":137078318,"uuid":"601063153","full_name":"IndieCoderMM/nation-guide","owner":"IndieCoderMM","description":"Mobile-first app which provides information about all countries. Built with React, Redux Toolkit \u0026 REST Countries API","archived":false,"fork":false,"pushed_at":"2023-09-21T06:48:25.000Z","size":1485,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-03-14T10:23:38.602Z","etag":null,"topics":["capstone-project","countries-api","microverse","mobile-first","react","redux-toolkit"],"latest_commit_sha":null,"homepage":"https://nation-guide-icmm.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IndieCoderMM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-02-13T09:38:54.000Z","updated_at":"2023-07-25T01:25:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8aa82cf-1267-4a83-aaa5-9b3ccd3aacf9","html_url":"https://github.com/IndieCoderMM/nation-guide","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/IndieCoderMM/nation-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fnation-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fnation-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fnation-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fnation-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IndieCoderMM","download_url":"https://codeload.github.com/IndieCoderMM/nation-guide/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fnation-guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260349989,"owners_count":22995674,"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":["capstone-project","countries-api","microverse","mobile-first","react","redux-toolkit"],"created_at":"2025-01-15T23:31:11.372Z","updated_at":"2025-06-17T11:35:36.342Z","avatar_url":"https://github.com/IndieCoderMM.png","language":"JavaScript","readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdetails\u003e \n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [🌍 Nation Guide - Country Information Webapp](#-nation-guide---country-information-webapp)\n  - [🚀 Visit Website](#-visit-website)\n  - [🧰 Tech Stack](#-tech-stack)\n  - [🔥 Features](#-features)\n  - [⚙️ Development](#️-development)\n  - [💻 Getting Started](#-getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Setup](#setup)\n    - [Install](#install)\n    - [Usage](#usage)\n    - [Run tests](#run-tests)\n    - [Deployment](#deployment)\n  - [📧 Contact](#-contact)\n  - [🔭 Future Features](#-future-features)\n  - [🤝 Contributing](#-contributing)\n  - [💖 Show your support](#-show-your-support)\n  - [💎 Useful Resources](#-useful-resources)\n  - [📝 License](#-license)\n\n\u003c/details\u003e\n\n# 🌍 Nation Guide - Country Information Webapp\n\n[![Version](https://img.shields.io/github/package-json/v/indiecodermm/nation-guide)](https://github.com/indiecodermm/nation-guide)\n[![License](https://img.shields.io/github/license/indiecodermm/nation-guide)](https://github.com/indiecodermm/nation-guide/blob/main/LICENSE)\n[![Last Commit](https://img.shields.io/github/last-commit/indiecodermm/nation-guide)](https://github.com/indiecodermm/nation-guide/commits)\n\n\n**Nation Guide** is an dynamic web application designed to provide users with a comprehensive database of country details. This project aimed to provide an efficient and user-friendly tool for users to quickly access information about countries. The app is fully responsive for mobile devices and optimized for a smooth user experience. \n\n## 🚀 Visit Website\n\nExperience the live website at [Nation Guide Webapp](https://nation-guide-icmm.onrender.com).\n\n\u003cimg src=\"./app_screenshot.png\" alt=\"Homepage screenshot\" width=400 height=auto \u003e\n\u003cimg src=\"./app_screenshot1.png\" alt=\"Detailpage screenshot\" width=400 height=auto \u003e\n\u003cimg src=\"./phone_mockup.png\" alt=\"Phone Mockups\" width=400 height=auto \u003e\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🧰 Tech Stack\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white)\n![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n![Testing-Library](https://img.shields.io/badge/-TestingLibrary-%23E33332?style=for-the-badge\u0026logo=testing-library\u0026logoColor=white)\n![Jest](https://img.shields.io/badge/-Jest-%23C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white)\n![Render](https://img.shields.io/badge/Render-%46E3B7.svg?style=for-the-badge\u0026logo=render\u0026logoColor=white)\n\n\n## 🔥 Features\n\n- **Explore Countries**: Browse through a list of countries worldwide.\n- **Quick Search**: Find countries by their names in a flash.\n- **Sort \u0026 Find**: Easily organize countries by area or name.\n- **Detailed Information**: Get detailed information about each country.\n- **Share Easily**: Share country facts with friends.\n- **Day \u0026 Night Modes**: Switch between dark and light themes.\n- **Mobile Friendly**: Enjoy a smooth experience on your phone.\n- **Easy Navigation**: Navigate between pages with ease.\n- **Real-time Updates**: Get the latest country data from REST Countries API.\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## ⚙️ Development\n\nThis app was developed using the latest industry-standards and best practices. The codebase is highly modularized and organized for easy maintenance and scalability. \n\n\u003cdetails\u003e\n  \u003csummary\u003eProject Structure\u003c/summary\u003e\n  \u003cbr\u003e\n\nWith a focus on clean code and reusability, the project is structured as follows:\n\n```\n.\n└── src/\n    ├── assets\n    ├── components/\n    │   ├── styles\n    │   ├── Navbar.jsx\n    │   └── Footer.jsx\n    ├── hooks\n    ├── redux/\n    │   ├── configureStore.js\n    │   └── slice.js\n    ├── lib/\n    │   └── utils.js\n    ├── pages/\n    │   ├── Home/\n    │   │   ├── index.jsx\n    │   │   └── Countries.jsx\n    │   ├── Detail\n    │   └── NotFound.jsx\n    ├── services\n    ├── tests\n    ├── App.jsx\n    ├── index.jsx\n    ├── index.css\n    └── propTypes.js\n```\n\n\u003c/details\u003e\n\n## 💻 Getting Started\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nIn order to run this project you need [Node.js](https://nodejs.org/en/) installed on your machine.\n\n### Setup\n\nClone this repository to your desired folder:\n\n```sh\n  cd my-project\n  git clone git@github.com:IndieCoderMM/nation-guide.git .\n```\n\n### Install\n\nInstall the dependencies with:\n\n```sh\n  npm install\n```\n\n### Usage\n\nTo run the project, execute the following command:\n\n```sh\n  npm start\n```\n\n### Run tests\n\nTo run tests, run the following command:\n\n```sh\n  npm run test\n```\n\n### Deployment\n\nYou can deploy this project using:\n\n```sh\n  npm run build\n```\nThis will create a production-ready build of your website in `build/` folder, which you can use to deploy on a static site hosting platform.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 📧 Contact \n\nI am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.\n\n[![Github](https://img.shields.io/badge/GitHub-673AB7?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/IndieCoderMM)\n[![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/hthantoo)\n[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:hthant00chk@gmail.com)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🔭 Future Features\n\n- [x] **Add desktop UI**\n- [x] **Include link to map**\n- [x] **Dark/Light mode**\n- [ ] **User authentication**\n- [ ] **Favorite countries**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🤝 Contributing \n\nI welcome any and all contributions to my website! If you have an idea for a new feature or have found a bug, please open an issue or submit a pull request.\n\nFeel free to check the [issues page](../../issues/).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 💖 Show your support \n\nIf you like this project, please consider giving it a ⭐.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 💎 Useful Resources\n\n- [Design Insipration](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) - Frontend Mentor Challenge\n- [Rest Countries API](https://restcountries.com/#api-endpoints-v3-all) - API to get information about all countries\n- [Undraw Illustrations](https://undraw.co/) - Open-source illustrations\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 📝 License\n\nThis project is [MIT](./LICENSE) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fnation-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findiecodermm%2Fnation-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fnation-guide/lists"}