Submitted over 3 years ago

Responsive React JS page with lots of functionality.

Bonrey•1,130

@Bonrey

Preview site View code

This is a solution for...Crowdfunding product page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Hello, Frontend Mentor community 👋

It is another React JS challenge of mine. This time I tried to create something really cool with lots of bells and whistles. However, I think I went too far with it: my code turned into a complete mess, and the site itself started working somewhat slowly. Anyway, at least, everything is working without bugs, as far as I can see.

❗ Aside from the smoothness, I ran into a few other problems:

In Chrome, the menu text (in the pledges' popup) gets quite blurry, and all the solutions I tried (like transform: tranlate3d(0,0,0) or scale(1), etc.) don't fix it.
Sometimes, images flicker when I launch the site for the first time. I tried to deal with this problem using an extra component called Preloaded, where I preload all the necessary images and then put them in a div with display: none. However, I don't think that's the right way to do that.

Well, other than that, I enjoyed the challenge. It really tested my React JS skills. Besides, I realized many React libraries can help me write cleaner code with less effort. Hopefully, I'll learn their proper use in the future too! 😃

Thank you for your time if you read this post till the end! And as always, feel free to leave any comments! 😉

Community feedback

ApplePieGiraffe•30,545
@ApplePieGiraffePosted over 3 years ago
Hi there, again, Bonrey! 👋

Great job on this challenge! 👍 The extra-touches (such as the various animations and custom favicon you added) are very nice! 😀 I especially like how the minimum price suggestion shakes when a price lower than the minimum suggestion is submitted! 🙌

Like RayaneBengaoui mentioned, I think styled-components and Framer Motion will definitely make things easier for you (especially when it comes to adding animations to your site). I really like both of those packages, and they do a great job in simplifying things and make implementing stuff in React easier! 😊

Well, keep coding (and happy coding, too)! 😁
2
Bonrey•1,130
@BonreyPosted over 3 years ago
@ApplePieGiraffe thank you once again for your feedback! 😀 Yes, I already realized that styled components are very useful, and I'll definitely apply them in my future projects! And I'll check out Framer Motion too. 😉
1
Rayane•1,935
@RayaneBengaouiPosted over 3 years ago
Hello Bonrey,

I see that you're having some good progresses in React ! 🙂

Unfortunatly, I can't help you with the problems you noticed as I'm also learning React, but I would like to know what causes this too ! haha.

I've completed this challenge using the animation library Framer Motion. I think it could interest you as it's pretty simple to get started with and made for React, implying that you can trigger animations on component mounting/dismounting or even stagger animations within a component and many more features !

Also, I see you're using a lot of dynamic class attributions, so I'm pretty sure you'd like to try Styled-Components library to write CSS in JS. You might know those libraries, but if not then have a look 😁.

Otherwise on the behavior of your app, I just noticed that when selecting the Pledge with no reward option, there is no possibility to insert an amount of the donation. So there should be an input as the others, but just without minimum value and left-number.

Hope that someone with better React knowledge can help you !

Overall, well done for the challenge and happy coding ! 😃
1
Bonrey•1,130
@BonreyPosted over 3 years ago
@RayaneBengaoui thank you so much for such a constructive feedback!

I'll definitely take a look at the Framer Motion library, since I use animations and transitions in pretty much every project. It's kind of tiring to create all these extra classes and dynamically assign them to each element, also using setTimeout to make sure everything works the way it should. 😓

As for the styled components, I'm also planning on using them in my future projects. They may indeed facilitate the process a great deal. I just wanted to practice writing React JS with pure CSS first. 😊

As regards the Pledge with no reward card, I honestly didn't know what to do with it! Thank you for pointing it out to me.

P.S. I just checked out your version of this challenge and liked it too! Especially all these transitions you added!
0

Please log in to post a comment

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