Country Flags with Skeleton-loaders and Theme Switcher in React
Design comparison
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
- @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@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 - @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 GitHubJoin 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