Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matheusmartinsviana/country-info-app
This repository has an application using nodejs and reactjs to display country information, with information such as border countries and a population graph.
https://github.com/matheusmartinsviana/country-info-app
countriesapi nodejs reactjs tailwindcss
Last synced: about 1 month ago
JSON representation
This repository has an application using nodejs and reactjs to display country information, with information such as border countries and a population graph.
- Host: GitHub
- URL: https://github.com/matheusmartinsviana/country-info-app
- Owner: matheusmartinsviana
- Created: 2024-09-09T19:52:48.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-01T03:44:14.000Z (2 months ago)
- Last Synced: 2024-11-01T04:18:39.154Z (2 months ago)
- Topics: countriesapi, nodejs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://country-info-app-1.onrender.com/
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Country Info App
This repository has a application using nodejs and reactjs to display country information, with information such as border countries and a population graph.
Developed by me
## Difficulties
- One of the most difficult tasks I had to deal with in this challenge was manipulating the information I pulled from the backend in the sense of, what if it doesn't exist? I had to do these treatments.
- Another difficulty was managing the functions in the backend (as I needed to use 2 APIs, one with data from the other and all async)
- Change the screen content when the user clicks on another country, as I needed to update the country information and update the graphic information(two diferent components).
## Future improvements
- Improve the UX/UI
## How to run
Clone this repository:
```bash
git clone https://github.com/matheusmartinsviana/country-info-app
```
Open the folder in mainframe:
```bash
cd country-info-app
```
Now enter the folder *Backend*:
```bash
cd backend
npm install
npm run dev
```
Make sure it worked if show the message: 'Server running at port 8000'.
Open VS Code and inside country-info-app-frontend follow these steps:
Firstly is necessary to set the environment variables:
```bash
Step 1:
Create a file with name: .env
```
```bash
Step 2:
Set the environment variables:
VITE_GET_COUNTRIES_URL=http://localhost:8000/api/v1/countries
VITE_GET_COUNTRY_URL=http://localhost:8000/api/v1/countryInfo
```
Now open another mainframe:
```bash
cd country-info-app-frontend
npm install
npm run dev
```
Now open your navegator and paste this URL:
```bash
http://localhost:5173/
```