Flowbite Countries - Database for countries, cities and states

Tech Stack

Flowbite Countries displays a huge list of states and cities from different countries around the world.

Features

• Huge database from the API provides data for 220+ countries, 70000 + cities and 5000 + states
• Flowbite UI is used for attractive loaders, navbars and more.
• Tailwind CSS is used for utility classes within the app.
• Search filtering added.

Installation Options

Just like you install majority of the Node powered front-end apps, three magic commands for you to run the app.

1. Install with npm

   • $ npm install
   • $ npm start
   • $ npm build

2. Install through Docker

   • $ sudo docker build . --tag=react-countries
   • $ sudo docker run -d -p 80:80 react-countries

Updates

• 23rd December 2024 :- Added feature to show weather by implementing weather API.

Screenshots

Country List page which displays all countries

Country detail page which displays all the states of the given country.

State detail page for a given state and country would display all the cities located in the state and available in the database.

1. Get API Key

   • Go to this website - https://countrystatecity.in/
     • Request for an API key, you should have it in your mail in around 2 days.
   • Read the docs
     • Read the docs to get the grasp of API end-points and response received.
   • Use it in your app
     • Use it in your app through the env file. Append this in request headers while making API calls.

How to Contribute

1. Clone repo and create a new branch: $ git checkout https://github.com/Apfirebolt/countries-and-states-database-app-in-React -b name_for_new_branch.
2. Make changes and test
3. Submit Pull Request with comprehensive description of changes

Time Taken

The project took around 3 and half hours to complete from designing to analyzing API docs, creating UI and integrating APIs.

Acknowledgements

• Darshan Gada for creating and maintaining this awesome API.