All solutions

experimented a lot on this one and i familiarized myself better with Tailwind Css and am going to keep using it for my next projects. the things i added in this project :

• google authentication to add your favorite countries to the Firestore database
• Leafelet maps on the country page
• country coat of arms in the country page
• added Inifinite Scroller to the main page for performance optimization it loads just chunks of the countries list instead of the whole 250 of them at once, also with
• image lazy loading for performance

got back to using Tailwind after a few projects with SCSS and it feels really nice to use it again, i added :

• dark theme using css variables in tailwind colors using var()
• used SwiperJS for making the slides effect
• used PostCss imports to seperate css data like fonts and variables into separate files

tailwind turned out to be an excellent tool i finished this one pretty fast compared to my last ones

first time trying tailwind its really good and turns out its actually practical

• first time using react router on one of these challenges.
• i lazily made the other pages by adding only a header and an image just to display that the react router works
• used SwiperJs to make the review's slides and it worked really well but i had to google some stuff since the documentation wasn't very precise
• used Toastify to make the notifications after the form submissions

this is one of the first projects that made using react and it really makes things easier compared to just plain vanilla js.

just updating one variable and seeing all parts of the app know of this change is just amazing.

if anyone has any suggestions feel free to give them 🐸

first time messing arround with scss it really good and very organized and saves a lot of troubles, also its very easy to learn it just takes some getting used to

nice challenge it has all the elements of a basic landing pages with animation tabs and validation input form.

love how with every single challenge I learn a bit more about everything and am going to keep doing them and try to do it better each time.

really nice challenge its always fun working with API's , I added:

• random IP Address button to easily test the app and the animation
• error effect when you type an IP in the wrong format or just random text

any suggestions on how i can improve on this is welcome 🐸

that was pretty fun challenge

• added a scroll down to the shortened link and animation to highlight it so that when there's too many new links you'll always see where it is, its very useful in mobile.
• also i learned that when i add a transform to an element its ::before and ::after will get a new Stacking Context which will make it appear on top of the element which is weird.

if you have any suggestions please let me know 🐢

experimented with grid a little bit, found a nice solution for making the SEE ALL button at the bottom of the grid in the mobile view without writing too much Css using grid-column and grid-row.

I tried to make it as pixel perfect as possible using Figma but at some point it seemed to me that it wasn't worthwhile since this isn't the point of all these challenges.

and if anyone has any suggestions on where i can improve on that would very awesome.

first time trying some animations like floating, rotating and shake it turned out it was easier than i thought it'd be with keyframes so its more precise.

Also tried to make it as pixel perfect as possible by measuring things on Figma but something doesn't seem to work, am going to play around with it more in my next projects and see how to make it work.

EDIT: added notification error when not submitting a rating

i tried to make this one as pixel perfect as possible by measuring elements from the design on figma.

also i tried to familiarize myself with figma since i never used it before, turns out its pretty much like illustrator so i kind of found myself at home

by far the most work i've done on a challenge, there's so much things going on so it took me a lot of time to finish it.

i added swiping to the mobile view with image animation, and local storage savings for the shopping cart so if you refresh page the amount is still here.

and as always any feedback is welcome !

with every new challenge i try to make the site as responsive as possible so if anyone have any suggestions they'd be very welcome 🙏

any feedback is welcome 🙏

any feedback is welcome 🙏. added hozizontal swipe option also i made the arrows activate the same sliding method so its smoother

any feedback is welcome 🙏. the resolutions of it are a bit challenging but the javascript code side of it is pretty straightforward since its just divisions but it took me a bit of time to add all the small tweaks and options to the app so people can use it more easely.

any feedback is welcome. does anyone know how to remove the elements background spill that you see as borders but its not borders ?

any feedback is welcome 🙏 Verification: 1)letters only and minimum 2 names in the name field 2)only numbers in the other fields 3)no value more than 12 in the months field