Live link to deployed project (CodeSandbox) | Alternative link (Netlify)
The Countries App is a fully responsive interactive frontend site, offering users a dynamic and engaging data portal through which they can explore and learn more about countries. Both first-time and returning visitors will be impressed by the app's mobile-first design as well as its intuitive navigation and layout, while their geographical and cultural knowledge will be enriched by the site's informative data presentations.
Open Sans | fallback = sans-serif
Montserrat | fallback = sans-serif
- When a user accesses the site, they can immediately begin browsing from a list of over two hundred individual countries displayed in alphabetical order on the main landing page
- In order to make this task somewhat quicker and easier, they may also choose to apply any one of six available continent filters to the list of countries, again listed in alphabetical order: Africa | Americas | Asia | Europe | Oceania | Other
- They can easily reset whatever filter they have applied by clicking on the All button above this continents menu
- In keeping with UX best practices, a 'back-to-top' button will appear in the bottom right-hand corner of the screen once the user has scrolled more than 500px down the landing page. Clicking on this will return them to the top of the page. Smooth scrolling has been enabled to make this functionality even more pleasing to the eye.
- The landing page UI for each country consists of a national flag, name, capital and population
- Beneath this information, there is a 'MORE INFO' call-to-action button for each country - clicking on this will bring the user through to a second screen, which profiles that particular country in more granular detail
- The country information listed on this second screen consists of:
- name (displayed both in English and that particular country's native language/script)
- flag
- capital city
- population
- area
- currency
- language(s)
- country codes (ISO 3166-2 / ISO 3166-3)
- calling code
- top-level domain
- region
- neighbouring countries (if any)
- Each neighbouring country is conditionally rendered in the form of a button-like link that takes the user to the 'MORE INFO' screen belonging to that specific neighbouring country. Thus, The UK's page can be accessed directly from the Ireland screen (etc.). This nimble navigation lends itself to a rewarding and highly immersive UX.
- When the user is finished digesting this individual country data, and/or they wish to search for a country not listed under 'Neighbouring countries' on the screen they're on, they may return to the Home screen by clicking on a 'Return Home' button at the foot of the page.
- A bespoke 'spinning loader' component is rendered each time the user invokes the
fetchmethod by requesting data from the API - Basic
try {} catch {}logic has been scripted to handle any (fetch-related network) errors - the user will be redirected to a generic 'Error handler' page, from which they can return to the Home page with the click of a button
- Autocomplete search box: this feature was initially built and then discarded due to implementation difficulties and time constraints
- Pagination
- Navbar
- to make it easier for users to return to the Home page, as the button for doing this can sometimes be hidden below the fold on the country info pages, particularly on mobile
- if and when the site gets built out further to include additional page(s), a navbar will be necessary to guide user behaviour and enhance UX
- (Google?) Maps API integration on country info pages
- Toggleable dark mode option
- 'Random Country' feature button/page
- Use of CSS variables/Sass to make stylesheet code more concise, reusable and DRY-compliant
- HTML5: used for structuring the site
- CSS3: used for styling the site
- JavaScript (ECMAScript 6): used for site logic and web page behaviour
- React
- ReactDOM
- React Router
styled-components: used to style dynamic 'back-to-top' button- React Icons
npm- Fetch API
- REST Countries API
- Git: (version control)
- GitHub: (remote code storage)
- Google Fonts
- Coolors
- Am I Responsive & LambdaTest (testing)
- Netlify & CodeSandbox (deployment)
-
All testing was performed manually, and on a near-constant basis as the project evolved. Google Chrome DevTools served as an indispensable resource throughout this testing process, allowing incremental adjustments to be made to the site's infrastructure and layout. The app's responsiveness was also closely monitored and rigorously tested from start to finish using the cloud-based LambdaTest cross-browser testing tool.
-
In addition to Chrome and LambdaTest, the site's functionality and appearance was also checked repeatedly in the Firefox, Safari, Microsoft Edge and Amazon Silk browsers. Numerous devices and screen sizes - belonging mostly to friends and family members - were similarly used to identify any blind spots in the site's responsive design and feature compatibility. These included, but were not limited to, the Samsung Galaxy S5, iPhone 7 Plus, Moto G4, Huawei P20, MacBook Pro, iPad and Kindle Fire.
The site has been imported to CodeSandbox (via GitHub) to facilitate deployment. A fully-operational live version can be viewed here. There is also a backup deployment currently live on Netlify.
A comprehensive setup and configuration guide can be found here
-
'How to print a number with commas as thousands separators in JavaScript' (Stack Overflow)
-
'How to create a Scroll To Top button in React JS ?' (GeeksForGeeks)
-
'Spinner loader animation with ReactJs and CSS (YouTube tutorial)
-
'Open Any Public GitHub Repo in Codesandbox in 3 Seconds' (YouTube demo)
-
John Smilga React tutorials
This site has been created for demonstration purposes only.