https://github.com/apfirebolt/countries-and-states-database-app-in-react

An app which displays countries, cities and states from around the world through an API
https://github.com/apfirebolt/countries-and-states-database-app-in-react

cities-data countries-api flowbite flowbite-ui react reactjs

Last synced: 18 days ago
JSON representation

An app which displays countries, cities and states from around the world through an API

• Host: GitHub
• URL: https://github.com/apfirebolt/countries-and-states-database-app-in-react
• Owner: Apfirebolt
• License: mit
• Created: 2022-08-30T20:00:23.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2025-03-29T12:35:24.000Z (about 1 year ago)
• Last Synced: 2025-03-29T13:31:58.341Z (about 1 year ago)
• Topics: cities-data, countries-api, flowbite, flowbite-ui, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 1.93 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
## Flowbite Countries - Database for countries, cities and states 

![Countries_Logo](screenshots/countries.png)

### Tech Stack

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

`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_List](screenshots/countries.png)

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

![Countries_Logo](screenshots/states.png)

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

![States_Logo](screenshots/cities.png)

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](https://github.com/dr5hn) for creating and maintaining this awesome API.