Skip to content
Submitted about 4 years ago

Country Flags with Skeleton-loaders and Theme Switcher in React

David Omar•580
@davidomarf
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hey! This is one of the most complex projects I've built on React.

It's the first time I create a theme switcher, and the first time I create skeleton loaders.

Any feedback is welcome!

I'm specially interested about the project architecture with the skeletons. I decided to create the component, and the skeleton, both sharing the same stylesheet but in a different file.

Like this:

.
├── Countries
│   ├── Countries.module.scss
│   ├── Countries.tsx
│   └── CountriesSkeleton.tsx
├── CountryDetails
│   ├── CountryDetails.module.scss
│   ├── CountryDetails.tsx
│   └── CountryDetailsSkeleton.tsx
│
└── App.tsx

I think I wrote waaaay to big components. I'll separate them in the next days into something more manageable and 'good-practiced'.

Community feedback

  • Abdulla Bashiroglu•520
    @bashirogluPosted about 4 years ago

    @davidomarf this looks great, especially I notice you have used typescript. but code looks a little bit messy, in general. And here you use both promise and async-await at the same time. I am not sure about it.

    const fetchCountries = async () =>
  await fetch("https://restcountries.eu/rest/v2/all").then((res) => res.json());

    Good luck.

    1
    David Omar•580
    @davidomarfPosted about 4 years ago

    @bashiroglu Ah, you're right. I don't know what I was thinking with that function. Thanks for pointing it out.

    I'll be maintaining it tomorrow and try to clean it, do some final optimizations and add animations.

    0
    Abdulla Bashiroglu•520
    @bashirogluPosted about 4 years ago

    @davidomarf you are quite welcome,

    0
  • Hassaan khan•230
    @MuhammadHassaanMahmood5550Posted about 4 years ago

    The design is super easy if we try this with bootstrap!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord