danielbgomez/countries-search-challenge

Full Stack Developer Challenge

Countries Search Challenge

This repo contains all the code and project progress for a Full-Stack JS Developer Challenge that searchs any country by it's name or ISO 3166-1 2/3 letters country code, displaying the Flag, Languages, Currency, Region, Name and Population of any country!

Live Demo

Visit the live demo of the app in:

• https://danielbgomez.com

Installation

Clone the repo in any folder you want.

git clone https://github.com/DanielBGomez/countries-search-challenge.git
cd countries-search-challenge

Make sure you have installed nodejs and npm in your computer, then install all the dependencies in the project folder

npm i

Compile the front-end assets

npm run build

Start the server

npm run start

Open the project in your browser (https://localhost:3000 by default).

IMPORTANT NOTE: The project requires to be executed in a https server for the front-end scripts to be loaded. That's why the project has a SSL Cert and Key for the domain of the live demo.

This will show you a view in your browser that the webpage is not secure. Just ignore it and continue or use your own SSL Cert and Key.

Full execution

git clone https://github.com/DanielBGomez/countries-search-challenge.git
cd countries-search-challenge
npm i
npm run build
npm run start

countries-search-challenge's Issues

Readme

Single Page Application

In this project, I'll be using React as the front-end framework with Styled components.

The front-end sources will be compiled with babel.

Loading states

The loading states provides a better user experience by letting know to the user that something is happening.

UI/UX Design

The first design that appear in my mind after reading the challenge instructions was a search page with a minimal design (like google) with white and gray colors and some kind of blue as the main color. I also wanted to achieve a background with "life" that refers to "the world".

When the user types 3 or more letters, the search will begin, moving the components to the top and displaying the autocomplete function that list the resulted elements with some helpers (flag, alpha 3 code, name and alternative spelling for the name) that you can navigate with the cursor or the keyboard arrows (up and down) and click or tab in order to the autocomplete to fill the search input and then press enter in the keyboard or the Search button to display the elements.

If the result was from an autocomplete flow with tab or click, the displayed country will be opened directly as a modal instead

Server as middleware

Use the router in the Web server to fetch the data from the api and serve it parsed as needed.

World background responsive design

The world border is too big in mobiles and the map is small.

Web server

Web server with Express that serves the front-end files.

In this part of the project, I'll be using an old Server class customized for this project.

Note: The server requires to be HTTPS to prevent SSL errors with the front-end scripts, so I'll be using a SSL Certificate from Cloudflare of a custom domain that I own.

Scroll in AutoComplete results

If the autocomplete list is too big for the viewport height, the user can't select the elements under the footer and the ones that overflows the app.

AWS Upload

Create a live demo in a AWS EC2 instance