This project is developed to display rest countries API data in listing and detail page. Filteration and basic transalation feature is implemented. Dark Mode is also wokring. Apllication is responsive for almost all devices.
These are the views for the REST Countries lsiting and detail.
-
Country listing view
This view is showing list of all countries with some basic filters.
-
Country Detail View
This page is showing details of country.
This is a [react.js] project bootstrapped with create-react-app.
To learn more about reactjs, take a look at the following resources:
Install dependencies
npm installRunning the development server
npm startOpen http://localhost:3000/ with your browser to see the result.
Frontend consumes the following endpoints from rest countries API full documentation here):
| Endpoint | Usage in views |
|---|---|
| GET /all | Countries Lisitng View |
| GET /region/${region} | Countries Lisitng View |
| GET /name/${name} | Country Detail Page |
This app is using Adapter Design Pattern to make code logic simple, easy and maintainable. All adapters are placed in src/utils/adapters folder.
Routing of this application is managed with well known package named react-router-dom .
when we need to add a new route, we have to go to routing file placed src/routes/routing.tsx. we will register new route here with a unique path.
we are using a free REST api service to fetch countries data REST Countries. For data fetching have used Axios library.
All typescript interfaces are placed in src/models files. This approach will help us to understand the expected reponse of each API.
This app is using Typescript, which has better readability, predictions and more rich IDE support compared to regular JavaScript. It also makes it easy to early identify bugs and refactor faster.
Styled Components styled-components has full theming support by exporting a Provider called as wrapper component.
Frontend application should be covered with unit tests and rendering tests. The testing libraries being used are Jest and React Testing Library.
Test files are created by adding a .test.tsx file, example for component Buttons.tsx add a Button.test.tsx
Run tests with command npm run test or npm run test:watch to start local server.
Testing coverage would also be placed in coverage folder when unit testing will be done.