Going for Gold!

Live link to deployed project

Going for Gold offers a fairer, more measured look at the Tokyo 2020 Olympic medal count. Countries are ranked in relative (per capita) instead of absolute medal-winning terms. Site visitors can toggle between two different ranking breakdowns, as well as search for countries, contact the site owner and enable dark mode. Fully interactive and boasting a robust and coherent mobile-first design, Going for Gold makes clever use of the React ecosystem to give users a richly dynamic UI. The application leverages the REST Countries API as well as a local JSON Olympic dataset to render lightning-fast statistical analyses. React Context API and EmailJS integration - the latter bolstered by custom form validation and error handling - round out a distinctly memorable user experience.

User Experience (UX)

It is imperative in today's on-the-move, remote-working consumer landscape that an interactive frontend site such as Going for Gold be fully-responsive across a wide range of devices and screen sizes. This overarching principle, coupled with a desire to create something sleek and modern-looking, informed my work from the first design sketch right through to the full production build. In terms of conceptual inspiration, my initial 'Eureka moment' arrived after coming across this thought-provoking Olympic-themed LinkedIn post. Added to the fact that the Tokyo Games themselves had just concluded, this sent me down a rabbit hole of Olympics-related data, blog posts and visualisations of various kinds until a clear theme for the site began to emerge. React, together with a selection of its tributary libraries and dependencies, was chosen to power things under the hood, as its speed and versatility when it comes to rendering (and rerendering) user interfaces is second to none. I chose to go it alone in terms of design/styling, so no frameworks like Bootstrap or Tailwind CSS were used anywhere in the application's stylesheet. The project's title, meanwhile, is of course a respectful nod to the greatest TV game show of all time

Project design

Colour scheme:

click to view

In some respects, the choices for the site's colour scheme were somewhat ready-made, as I decided from the off to incorporate the five instantly-recognisable colours found in the Olympic rings logo, as well as an approximate shade to represent each medal colour (gold, silver and bronze). Similarly, the navy blue colour used extensively as a background/secondary colour throughout the site is taken from the 'Harmonised chequered emblem' designed by Japanese artist Asao Tokolo and chosen as the Games' official logo.

Typography:

click to view

The official Tokyo 2020 font was developed by Morisawa, a Japanese type foundry, and appears to be unavailable for public use. After a bit of digging, I therefore decided to use the Freeroad Regular font, which is a close approximation of the "industrial sans serif" seen in the Games' (redesigned) logo, for all primary headings across the site. To complement this, I chose Raleway, a popular sans serif font available via Google Fonts, as the default body font.

Wireframes:

click to view

Features

Existing features:

• Landing page:

click to view

As showcased in the images above, the first thing the user sees upon landing is a visually appealing Olympic rings logo animation (lasting approximately four seconds), followed by a further trickle-down/fade-in animation effect involving a trio of call-to-action buttons (one representing each Olympic medal category of gold ('MEDALLISTS'), silver ('ABOUT') and bronze ('CONTACT')). These three buttons are centred on all screen sizes, and act as de facto navigational aids in lieu of the site's actual navigation menu (which has been hidden here in an effort not to overload visitors with too much information within the first few seconds). Clicking on any one of these CTA buttons takes the user to the page denoted by the button text.

• Medallists page:

  click to view

  mobile	tablet	desktop

  The Medallists page is the site's main page content-wise. In its default state, it gives a list of all 93 medal-winning countries from the Tokyo Games with a breakdown of the following data for each individual country:

  • National flag (pulled from a REST Countries API endpoint)
  • Country name (as above)
  • Population (as above)
  • Gold medals won at Tokyo 2020 (taken from the app's local data file)
  • Gold medals per one million citizens (calculated from the two relevant figures above)
  • Total medals won at Tokyo 2020 (taken from the app's local data file)
  • Total medals per one million citizens (calculated from the two relevant figures above)

  blue (Europe)	black (Africa)	red (Americas)	yellow (Asia)	green (Oceania)

  In addition to this, the UI for each medallist includes a dynamically-rendered background image consisting of the aforementioned Tokyo 2020 emblem in the relevant Olympic ring colour that corresponds to that country's continent. Initially, these .container-flag elements were being differentially coloured based on their index number (using array iteration). It was actually my mentor Tim who alerted me to the fact that the five Olympic ring colours represent the five main continents. After learning of this, I was able to conditionally target the background-image property of each of these elements based on the "region" property value of each corresponding item returned from the REST Countries API endpoint.

  <FaAward />

  One more feature displayed for each medallist is a dynamically-rendered React Icon with numerical ranking corresponding to that particular country's standing (these values are bound to the index of each country when iterating through the overall array)

• About page:

  click to view

  mobile	tablet	desktop

  As you might expect, the site's About page presents users with a brief rundown on the site's purpose and intentions - all done in an engaging and aesthetically-pleasing manner. The parent .container-about element has been styled with a faint Tokyo 2020 logo background-image, while the page's main UI elements (heading, paragraphs of text and a bright CTA button) all transition into view thanks to staggered CSS animation effects on tablet and desktop (see image below)

  About page animation

• Contact page:

  click to view

  mobile	tablet	desktop

  As with most Contact pages, a form element is the centrepiece of this section of the site. Going for Gold's form boasts a neumorphic design, and is vertically and horizontally centred across all device sizes. A concise form submission sequence comprising two input fields followed by a textarea and a 'SEND' button means the user is not bombarded with too many requests or criteria. Strict form validation (outlined in detail below) has nevertheless been put into place to constrain user input. Once the form has been successfully submitted, the user is taken to a custom confirmation screen, which also contains a helpful CTA button guiding them back to the Home page.

  mobile	tablet	desktop

Potential future features:

click to view

• Individual breakout pages for each country:

  Given more time, I would have been able to build this expanded feature into the current version of the app. A standalone component could be dynamically populated with more granular information about each country's medal haul: for example, appropriate use of React icons could highlight the Olympic events in which that particular nation was successful. Names of athletes/winners could also be listed, perhaps along with a more detailed look at that country's Olympic Games success rate historically.

• Aggregate the data to compile relative medal-winning stats for each of the five continents represented by the Olympic rings:

  This would be a fun and interesting add-on I feel, and would once again shine a slightly alternative light on what is a veritable ocean of Olympics-related stats and datasets. It would actually be quite easy to implement, and could similarly be used to run down both total and per capita figures for each continent.

• Expand the scope of the project to also incorporate the Tokyo 2020 Paralympic Games:

  More than just a nice-to-have, this is a feature that ought really to have been included from the start in the current MVP. However, three factors combined to prevent me from readily including corresponding figures for Paralympic medal-winning countries:

  • There simply isn't the same availability of data (and/or APIs) related to the Paralympics, so a good bit more digging would have been required to find appropriately malleable numbers
  • The Paralympic Games were still actually taking place throughout most of this project's development life cycle, and so trying to gather data would necessarily have constituted something of a 'moving target' exercise
  • Finally, as is so often the case, the project deadline approached quicker than I would have liked, and I was mindful of not falling into the familiar trap of feature creep

• "Infinite scroll" and/or pagination:

  One of a number of necessary trade-offs made to ensure the overall project made it over the finish line inside its submission dealine. A dynamic 'back-to-top' button component has been put in place to compensate for the absence of both of the above, and it is hoped this will help improve UX sufficiently until such time as I'm able to add these convenient features.

• Site-wide dark mode:

  At present, the user is only able to toggle dark mode on or off while browsing the main Medallists page. Ideally, this feature should be available throughout the application to give a more coherent and complete feel. However, it's worth noting that the site's About page has been styled with a 'dark mode-like' background colour by default, and that the neumorphic styling that's been applied to the Contact form would also likely be affected by dark mode being enabled there.

Technologies Used

Languages:

click to view

• HTML5: used for structuring the site
• CSS3: used for styling the site
• JavaScript: used for site logic and web page behaviour
• JSX used to structure React component rendering throughout the application

Frameworks/Libraries, APIs, , Projects, Programmes and Tools:

click to view

• ES6 imports:

  • React v16.13.1: used as a base to create dynamic user interfaces by building and customising modular components, as well as handling state management and rendering that state to the DOM
  • ReactDOM v16.13.1: used to give the app access to various top-level DOM-specific methods
  • React Icons v4.2.0: used to include individual bespoke icons where needed within the project
  • react-resize-detector v6.7.6: used to leverage native browser resize handling to manage element resize events within the app's components
  • React Router v5.2.0: used to provide declarative routing for the application
  • Create React App v3.4.3: used to get application development off the ground by overseeing configuration of build tools, bundle optimisation, directory structure etc.

• Google Fonts: used to import the Raleway font into the project's stylesheet

• Visual Studio Code: used as the online IDE for the project

• Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub

• GitHub: used to compile and remotely store the project's codebase following successive local commits initiated from the command line

• Netlify: used to deploy the site and aid workflow in line with serverless continuous deployment best practices

• Fetch API: used to make API requests and retrieve resources and/or responses returned by them

• (React) Context API: used to pass data through the app's component tree without having to pass props down manually at every level

• REST Countries API: used to collect population data and flag images corresponding to each of the 93 countries featured in the list(s) of Olympic medal-winners

• EmailJS v3.2.0: used to route messages submitted via the site's Contact form to the site owner/developer's email address

• GSAP (GreenSock Animation Platform) v3.7.1: imported and used to implement the site's marquee landing page animation

• Ezgif image converter: used to convert several of the project image source files from .svg to png/jp(e)g formats

• Neumorphism.io: Open-source 'Soft UI' CSS shadow generator used when styling the site's Contact form

• ColorSpace's online colour gradient generator was used to apply a metallic shine effect to the gold-, silver- and bronze-coloured landing page buttons, and to create the linear gradients found elsewhere

• Box Shadow CSS Generator: Used to add subtle shadow styling to most clickable elements across the site

• The project's favicon was generated using the free online favicon.io tool

• The JPG to PNG online editing tool was used to convert a .jpeg version of the Tokyo 2020 logo to .png format

• TinyJPG: used for image compression

• PicResize: used to crop and resize images

• Brackets (desktop app version): used to make colouration edits to SVG files

• Kapwing: used as the project's go-to content editing resource, e.g. to create the animated screenshots featured in this README

• W3Schools HTML Color Picker: used for generating on-the-fly colour pairings and modifications (lightening, darkening etc. of core project colours)

• Responsively App: Used to frequently test and inspect responsive layout and component rendering as the project took shape

• WebAIM (contrast checker): / WAVE Web Accessibility Evaluation Tool used to ensure site foreground and background colour contrasts meet WCAG 2 accessibility requirements

• Can I Use: browser compatibility tables used to cross-reference the viability of implementing certain HTML5 elements, CSS3 properties, file formats and more

• Editor.md: used to format project Markdown in line with best practices

Testing

Full application testing details can be found here

Deployment

click to view

Netlify:

This project has been deployed to Netlify using continuous deployment in sync with GitHub. A full step-by-step guide to what's involved in setting up this workflow can be found here

Forking the GitHub Repository:

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on Fork, located near the top right-hand corner of the repository page.
3. You will now have a copy of this project's repository in your own GitHub account.

Making a local clone:

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
4. Next, open Git Bash (see here for an overview of download options, if required).
5. Change the current working directory on your local machine to the location where you want the cloning to be made.
6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.

https://github.com/loosenthedark/going-for-gold.git

7. Press Enter.
8. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

Credits & Additional Resources

Official Tokyo 2020 Olympic Medal Count

Local JSON file created by copying and pasting data found in this (archived) repository

Olympic flag image downloaded from Wikipedia

Chequered Tokyo 2020 logo downloaded from Wikipedia and customised for use throughout the site

'3D Transforms and Animations' (The Art of Web)

Problematic API endpoint for Kosovo: "cioc":null

Dynamic pure CSS search bar refactored and customised from Jove Angelevski's template

Landing page Olympic rings SVG GSAP animation adapted from Steve Gardner's CodePen

Animated loading component adapted from @CodeBoomer's 'Olympics CSS Spinner' CodePen

'How to sort an array of objects by multiple fields?' (Stack Overflow)

'URL Parameters (Params)' (React Router Docs)

'Detect click on back button using React useEffect and useState' (egghead.io)

'Ternary operator on style with React Js Es 6' (Stack Overflow)

I followed the advice of this answer to this Stack Overflow query in order to dynamically add a CSS animation class to country flags when they are (vertically) scrolled into view

Summary of the situation surrounding Russian (ROC) athletes' participation at the Tokyo Games (Wikipedia)

I had to intercept the data being returned from the REST Countries API for Russia: changing the name from 'Russian Federation' to 'ROC' and the flag image's src value to a URL found on the official Olympics.com website.

Likewise, the outdated name of 'Macedonia (the former Yugoslav Republic of)' in the REST Countries API database was overwritten with the correct modern name of 'North Macedonia'

I also decided to abbreviate the verbose country name versions of 'Venezuela (Bolivarian Republic of)', United States of America, Syrian Arab Republic, Moldova (Republic of), Korea (Republic of), Iran (Islamic Republic of) and 'Republic of Kosovo', in keeping with the site's overall minimalist aesthetic

The situation in relation to Great Britain/The United Kingdom (or "Team GB", as they are informally known nowadays) at the Olympics is naturally quite complicated and frequently misunderstood. Either way, seeing as the official Olympic website adheres to calling them 'Great Britain', this was the preferred nomenclature adopted by the developer. To that end, the lengthy name of 'United Kingdom of Great Britain and Northern Ireland' returned from the API endpoint was reformatted manually through the use of conditional logic within the Medallists component.

Guidance on additional configuration requirements to facilitate continuous deployment (via Netlify) from John Smilga

'How to print a number with commas as thousands separators in JavaScript' (Stack Overflow)

CSS toggle-switch functionality adapted (for integration with React state values) from Nick Bottomley's CodePen

The site's neumorphic Contact form is loosely based on the aesthetic of the developer's own portfolio site Contact page - which in turn took inspiration from this CSS-Tricks deep dive on the design trend

'Search Filter React Tutorial - Search Bar in React' (PedroTech on YouTube)

'JavaScript regexp to validate Name with special characters like apostrophe, and spaces' (Stack Overflow)

'Installation' and 'Examples > React' (EmailJS Docs) were used as references for EmailJS React installation and component configuration

'Trigger 'resize' event on component?' (Stack Overflow) led me to...

...react-resize-detector: "Handle element resizes like it's 2021!" was imported and used to check for the search input box changing size in order to dismiss the error message when it's not required | live demo

Acknowledgments

Massive thanks to my mentor Tim Nelson for all his help, feedback and supervision throughout the project's development life cycle.

Notice

This site has been created for development purposes only.