/nation-guide

Mobile-first app which provides information about all countries. Built with React, Redux Toolkit & REST Countries API

Primary LanguageJavaScriptMIT LicenseMIT

Table of Contents

🌍 Nation Guide - Country Information Webapp

Version License Last Commit

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.

Homepage screenshot

Detailpage screenshot

Phone Mockups

(back to top)

🧰 Tech Stack

React Redux React Router Testing-Library Jest Render

🔥 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.

(back to top)

⚙️ 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 installed on your machine.

Setup

Clone this repository to your desired folder:

  cd my-project
  git clone git@github.com:IndieCoderMM/nation-guide.git .

Install

Install the dependencies with:

  npm install

Usage

To run the project, execute the following command:

  npm start

Run tests

To run tests, run the following command:

  npm run test

Deployment

You can deploy this project using:

  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.

(back to top)

📧 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.

Github Linkedin Gmail

(back to top)

🔭 Future Features

  • Add desktop UI
  • Include link to map
  • Dark/Light mode
  • User authentication
  • Favorite countries

(back to top)

🤝 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.

(back to top)

💖 Show your support

If you like this project, please consider giving it a ⭐.

(back to top)

💎 Useful Resources

(back to top)

📝 License

This project is MIT licensed.

(back to top)