https://github.com/indiecodermm/nation-guide
Mobile-first app which provides information about all countries. Built with React, Redux Toolkit & REST Countries API
https://github.com/indiecodermm/nation-guide
capstone-project countries-api microverse mobile-first react redux-toolkit
Last synced: 8 months ago
JSON representation
Mobile-first app which provides information about all countries. Built with React, Redux Toolkit & REST Countries API
- Host: GitHub
- URL: https://github.com/indiecodermm/nation-guide
- Owner: IndieCoderMM
- License: mit
- Created: 2023-02-13T09:38:54.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-09-21T06:48:25.000Z (over 2 years ago)
- Last Synced: 2025-03-14T10:23:38.602Z (11 months ago)
- Topics: capstone-project, countries-api, microverse, mobile-first, react, redux-toolkit
- Language: JavaScript
- Homepage: https://nation-guide-icmm.onrender.com
- Size: 1.42 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Table of Contents
- [🌍 Nation Guide - Country Information Webapp](#-nation-guide---country-information-webapp)
- [🚀 Visit Website](#-visit-website)
- [🧰 Tech Stack](#-tech-stack)
- [🔥 Features](#-features)
- [⚙️ Development](#️-development)
- [💻 Getting Started](#-getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [📧 Contact](#-contact)
- [🔭 Future Features](#-future-features)
- [🤝 Contributing](#-contributing)
- [💖 Show your support](#-show-your-support)
- [💎 Useful Resources](#-useful-resources)
- [📝 License](#-license)
# 🌍 Nation Guide - Country Information Webapp
[](https://github.com/indiecodermm/nation-guide)
[](https://github.com/indiecodermm/nation-guide/blob/main/LICENSE)
[](https://github.com/indiecodermm/nation-guide/commits)
**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.
## 🚀 Visit Website
Experience the live website at [Nation Guide Webapp](https://nation-guide-icmm.onrender.com).
## 🧰 Tech Stack
## 🔥 Features
- **Explore Countries**: Browse through a list of countries worldwide.
- **Quick Search**: Find countries by their names in a flash.
- **Sort & Find**: Easily organize countries by area or name.
- **Detailed Information**: Get detailed information about each country.
- **Share Easily**: Share country facts with friends.
- **Day & Night Modes**: Switch between dark and light themes.
- **Mobile Friendly**: Enjoy a smooth experience on your phone.
- **Easy Navigation**: Navigate between pages with ease.
- **Real-time Updates**: Get the latest country data from REST Countries API.
## ⚙️ Development
This app was developed using the latest industry-standards and best practices. The codebase is highly modularized and organized for easy maintenance and scalability.
Project Structure
With a focus on clean code and reusability, the project is structured as follows:
```
.
└── src/
├── assets
├── components/
│ ├── styles
│ ├── Navbar.jsx
│ └── Footer.jsx
├── hooks
├── redux/
│ ├── configureStore.js
│ └── slice.js
├── lib/
│ └── utils.js
├── pages/
│ ├── Home/
│ │ ├── index.jsx
│ │ └── Countries.jsx
│ ├── Detail
│ └── NotFound.jsx
├── services
├── tests
├── App.jsx
├── index.jsx
├── index.css
└── propTypes.js
```
## 💻 Getting Started
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need [Node.js](https://nodejs.org/en/) installed on your machine.
### Setup
Clone this repository to your desired folder:
```sh
cd my-project
git clone git@github.com:IndieCoderMM/nation-guide.git .
```
### Install
Install the dependencies with:
```sh
npm install
```
### Usage
To run the project, execute the following command:
```sh
npm start
```
### Run tests
To run tests, run the following command:
```sh
npm run test
```
### Deployment
You can deploy this project using:
```sh
npm run build
```
This will create a production-ready build of your website in `build/` folder, which you can use to deploy on a static site hosting platform.
## 📧 Contact
I am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.
[](https://github.com/IndieCoderMM)
[](https://linkedin.com/in/hthantoo)
[](mailto:hthant00chk@gmail.com)
## 🔭 Future Features
- [x] **Add desktop UI**
- [x] **Include link to map**
- [x] **Dark/Light mode**
- [ ] **User authentication**
- [ ] **Favorite countries**
## 🤝 Contributing
I 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.
Feel free to check the [issues page](../../issues/).
## 💖 Show your support
If you like this project, please consider giving it a ⭐.
## 💎 Useful Resources
- [Design Insipration](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) - Frontend Mentor Challenge
- [Rest Countries API](https://restcountries.com/#api-endpoints-v3-all) - API to get information about all countries
- [Undraw Illustrations](https://undraw.co/) - Open-source illustrations
## 📝 License
This project is [MIT](./LICENSE) licensed.