/GlobuzzerTask281218-Client-Side

The client-side code of Globuzzer's task 02/01/2019

Primary LanguageJavaScript

GlobuzzerTask281218-Client-Side

This repository is created to hold the source code of the task requested by Globuzzer: to create a home page based on their design.

The main targets here are:

  • To build a responsive web page whose design fits the origin as identically as possible.
  • To get some usable functions.
  • To connect with the backend to retrieve proper data.

What technologies?

  • Reactjs: 16.7.0
  • HTML5, CSS
  • Fontawesome for temporary icons.
  • Youtube embedded video links.
  • Google embedded map link.
  • Axios, Expressjs 4 and Mongodb for handling backend.

This is the data from the Mlab's collection, which is used to represent the funtionality of the backend code:

image image

  • The collection's scheme: { "_id": "id", "name": "country name", "ISO-code-short": "country ISO-code-short", "ISO-code-long": "country ISO-code-long", "destination_banner": "country banner", "destination_description": "country description", "video_iframe": "https link (Youtube) of the country", "news": { "news1": "country news 1", "news2": "country news 2", "news3": "country news3" } }

Current archievements:

  • responsive up from 600px-width.
  • when user chooses a country, the page will be redirected to its dedicated page (backend involved).

What needs to be considered?

  • because I do not have the design for lower than 600px-width (mobile version), so currently the web page will not function properly when scaling the page lower than 600px horizontally.
  • needs to add more transitions and animations, also icons as well.

Some pictures of the web page (upper than 992px):

image

image

image

Some pictures of the web page (min-width 600px to max-width 991px):

image

image