Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luffytaro22/countries-webapp
Countries Webapp makes use of Geography API to display information about the population at each continent, country and more detailed information about a specific country.
https://github.com/luffytaro22/countries-webapp
api reactjs redux
Last synced: 11 days ago
JSON representation
Countries Webapp makes use of Geography API to display information about the population at each continent, country and more detailed information about a specific country.
- Host: GitHub
- URL: https://github.com/luffytaro22/countries-webapp
- Owner: Luffytaro22
- License: mit
- Created: 2023-07-31T16:21:49.000Z (over 1 year ago)
- Default Branch: Dev
- Last Pushed: 2023-08-06T21:50:51.000Z (over 1 year ago)
- Last Synced: 2024-12-26T07:23:56.623Z (16 days ago)
- Topics: api, reactjs, redux
- Language: JavaScript
- Homepage: https://countries-webapp.vercel.app/
- Size: 1.61 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
📗 Table of Contents
-
📖 About the Project
- 🚀 Live Demo
-
💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- 📝 License
**Countries Webapp** makes use of Geography API to display information about the population at each continent, country and more detailed information about a specific country.
### Tech Stack
* HTML5
* CSS3
* JavaScript
* React.js & Redux
* Vite
### Key Features
* SPA with react router.
* Update the redux store with information of the API.
* Display the information of the selected country.
## Video Presentation
[Click here](https://drive.google.com/file/d/1wXtduhfMfvDtVjFZvcJfaqjhnz0anzkN/view?usp=sharing)
## 🚀 Live Demo
[Live Demo](https://countries-webapp.vercel.app/)
### Prerequisites
In order to run this project you need to have:
- A Text Editor.
- A Browser.
### Setup
To clone this repository to your desired folder, run the following command:
```
git clone [email protected]:Luffytaro22/countries-webapp.git
```
### Install
```
npm install
```
This will download all this dependencies:
* Install Webpack
```
npm install webpack webpack-cli --save-dev
```
* Install style and css loader
```
npm install --save-dev style-loader css-loader
```
* Install HTML Webpack plugin
```
npm install --save-dev html-webpack-plugin
```
* Install Webpack-dev-server
```
npm install --save-dev webpack-dev-server
```
* Install Jest
```
npm install --save-dev jest
```
* Install Webhint
```
npm install --save-dev [email protected]
```
* Install Stylelint
```
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
```
* Install ESLint
```
npm install --save-dev [email protected] [email protected] [email protected] [email protected]`
```
* Install Babel
```
npm install --save-dev babel-jest @babel/core @babel/preset-env`
```
### Usage
Initialize it with
```
npm run dev
```
### Deployment
You can deploy this project using [this link](https://countries-webapp.vercel.app/)
👤 **Manuel Sánchez**
- GitHub: [@Luffytaro22](https://github.com/Luffytaro22)
- LinkedIn: [Manuel Sánchez](https://www.linkedin.com/in/manuel-alejandro-sanchez-sierra-4b358b14a/)
## 🔭 Future Features
* Add animations to improve UX.
* Improve searching functionality.
* Desktop design.
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
## ⭐️ Show your support
If you like this project please give it a star ⭐️
I would like to give credits to the following:
* **Microverse** for this readme template.
* Geography API for their API.
* Banderas del mundo for their flags API.
* Nelson Sakwa on Behance. for his design of the application.
This project is [MIT](./LICENSE) licensed.