RESTExplorer: NationsFinder is a modern, responsive web application built with TypeScript, React Router v7, and Tailwind CSS. It allows users to browse, search, and filter information about independent countries worldwide by integrating with the public REST Countries API.
- Comprehensive Country Data: View detailed information for a vast range of independent countries.
- Search Functionality: Easily find countries by their common name.
- Region Filtering: Filter countries by continent/region (Africa, Americas, Asia, Europe, Oceania).
- Dynamic Routing: Utilizes React Router v7 for seamless client-side navigation and URL management.
- Responsive Design: Crafted with Tailwind CSS to ensure optimal viewing across various devices and screen sizes.
- Fast Development Experience: Leverages Vite for rapid development and optimized builds.
- Containerized Environment: Docker support for consistent development and deployment workflows.
To get a local copy of RESTExplorer up and running, follow these steps.
- Clone the Repository:
git clone https://github.com/Emafido/Nationsfinder.git cd Nationsfinder - Install Dependencies:
npm install
- Run in Development Mode:
The application will typically be available at
npm run dev
http://localhost:5173(or another port if 5173 is in use).
For a containerized environment, you can use Docker:
- Build the Docker Image:
docker build -t nationsfinder . - Run the Docker Container:
The application will be accessible at
docker run -p 3000:3000 nationsfinder
http://localhost:3000.
Once the application is running, you can:
- Navigate the Home Page: The landing page provides an introduction to the application.
- Explore Countries: Click on the "Countries" link in the navigation bar to view a list of all independent countries.
- Search for a Country: Use the search input field on the "Countries" page to find specific countries by name.
- Filter by Region: Select a region from the dropdown on the "Countries" page to narrow down the list.
- View Country Details: Click on any country from the list to see its detailed information, including official name, capital, region, subregion, population, currency, and flag.
- Learn More: Visit the "About" page for a description of the project and the API used.
| Technology | Description | Link |
|---|---|---|
| TypeScript | Superset of JavaScript that adds static typing. | TypeScript |
| React | A JavaScript library for building user interfaces. | React |
| React Router v7 | Client-side routing library for React. | React Router |
| Node.js | JavaScript runtime for server-side operations. | Node.js |
| Vite | Next-generation frontend tooling. | Vite |
| Tailwind CSS | A utility-first CSS framework for rapid UI development. | Tailwind CSS |
| Docker | Containerization platform for consistent environments. | Docker |
| REST Countries API | Public API for country data. | REST Countries |
We welcome contributions to the RESTExplorer project! To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name. - Make your changes and ensure they adhere to the project's coding style.
- Test your changes thoroughly.
- Commit your changes with a descriptive commit message.
- Push your branch to your forked repository.
- Open a Pull Request to the
mainbranch of this repository, describing your changes and their benefits.
This project is currently unlicensed. Please contact the author for licensing information.
IMAFIDON EMMANUEL
- LinkedIn: Your LinkedIn Profile
- Twitter: Your Twitter Profile
- Portfolio: Your Portfolio/Website
