React crowdfunding product page app

Community feedback

• 

  Clément Creusat•1,655

  @ccreusatPosted over 2 years ago

  Hello! Great job, its working really well :)

  Some advices if you want to improve your solution :

  • On mobile, you could replace the values of transform-origin with : transform-origin: 0. I think the cross will have a better UI this way.
  • I think you could get rid of all the width setted for your components (width: 325px; width: 730px on desktop). Add max-width: 730px, margin: 0 auto on desktop and margin: 0 24px on mobile. Let it breathe :) It will look more fluid

  Then:

  • When you click on "select reward", try to select the right pledge component (if you click on the $75, select it when modal opens and try to focus the input with a default value of 75)
  • Pledge with no reward should not give the possibility to enter an amount > it's a free one (it will just add +1 backer to the total of backers)

  About the code : it's really great. Just two thing :

  • Export your components (for instance, class ModalPledge extends React.Component {} as a new file (ModalPledge.js) and Import it in your app.js. It will look something like this : import ModalPledge from "./ModalPledge"
  • You will get props the same way
  • Use it <ModalPledge props={...}/>, pass the props you needs, etc...

  And last thing, React is supposed to stop support for ES6 JS CLASS. Take a look at React Hooks Link

  Hope it will help and Enjoy Coding!

  Marked as helpful

  1

  ---

  

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  @ccreusat Hello Thanks alot for the advices,

  when I will have time I will prepare a third version with those fixes.

  I didn't reach yet the hooks part of my react course but it is on schedule so hopefully I will learn this soon :D

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Great solution there👍 Good job keep coding📌

  1