Flag Finder

Tech stack used:

React icon

React

Javascript icon

Javascript

HTML icon

HTML

CSS icon

CSS

Brief:

In just one day, our team of 3 took on the challenge of recreating a flag finder app inspired by an example site. Leveraging a map API, we fetched the data needed to bring this project to life.

App features:

A mobile view of the apps landing page
  1. World Flag View: Explore a comprehensive collection of flags from around the globe, all on a single page.
  2. Region Filtering: Easily filter flags by region.
  3. Country Information Display: Gain insights about each country by viewing details displayed alongside their respective flags.
  4. Responsive Design: Enjoy the site across various devices, ensuring a consistent experience.
A screenshot of the app in browser view A screenshot of the app in ipad view A screenshot of the app in a small laptop view

What I learned:

  • Intialising react projects and the use of useStates/props
  • Fetching data from APIs
  • Recreating the functionality and styling of another site
  • Using CSS flexbox to make more responsive projects