danielbgomez / countries-search-challenge Goto Github PK
View Code? Open in Web Editor NEWFull Stack Developer Challenge
Full Stack Developer Challenge
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
Use the router in the Web server to fetch the data from the api and serve it parsed as needed.
The loading states provides a better user experience by letting know to the user that something is happening.
The world border is too big in mobiles and the map is small.
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.
Create a live demo in a AWS EC2 instance
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.