Crowdfunding page with React and SASS

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Omg @EdwinSch! was waiting for your solution!

  Okay before I ask silly questions , there seems to be some CSS related problem with the thank you modal. There seems to be a way more top margin on it and devices with smaller heights ( Im on a laptop and screens which are mostly 600px in height are having an issue, it works well for mobile sizes screens somehow ) and it got cut off. (you can check the nesthub device in the devtools). Using align-items: center on the overlay containing the modal fixed this and that way you can get rid of top-margin (only the top margin though keep the left and right margins on the modal)

  • Now comes the silly question part: I highly agree with you on the pledges being rendered based on if they are available/or in stock (I probably should've done this in my own solution too hahaa) and I took a look at your code base and in the Modal component why use slice? realistically speaking say if I added a pledge in the data which is less than $200 and is probably like $125 and I would most likely place it after the $75 pledge but that would mean my index would be 3 for the newest pledge and it's in stock but using options.slice(0, 3) would end up removing the newest pledge I added and will show the $200 one instead and then I would have to change the index here in the slice to show the new one. Wouldnt using a filter() function to filter out the pledges based on the stock key of the individual pledges (in the data) to only render those whose stock is left be more ideal? like this:

  {options.filter((form) => form.stock !== 0).map((form) => {
      return (
        <Form
          key={form.id}
          {...form}
          activeId={activeId}
          toggleAccordion={toggleAccordion}
        />
      );
    })}
  

  The filter will only render the pledges whose stock is not zero and not render the ones whose is 0 and you wouldn't have to keep updating the slice if you were to add more pledges.

  I'm probably overthinking this a bit because you can just add more pledges afterward the $200 one and it would work just fine but would it be truly dynamic? It was the first question that popped in my mind when I saw the slice and wanted to let you know haha.

  I like the way you thought about the stock thing though! (any tips for me on how can I think like this? ahahaha)

  Marked as helpful

  1

  ---

  

  P

  Ed•720

  @EdwinSchPosted over 1 year ago

  @adityaphasu Hey Boots!

  Thanks for noticing the CSS problem on that particular modal. I did not catch that one while testing... Will try to resolve it asap.

  Well first of all your question is not silly at all... Using the slice option was just a quick & dirty fix for this particular data-set, as the one out of stock is the last one in the set (in that theory I could have also used a pop() function on the array I guess). But that being said; you are absolutely right! If the data-set would change, this logic will break. It's not dynamically adapting to the data. So no, I would never implement this slice in a real-life application. Your solution/proposal on chaining the map on a filter is actually a very good idea to make this fully dynamic. :) Maybe I'll refactor that component later on and implement.

  On the thinking part; UX design has been a small side-subject of my web development courses in school. And I use this knowledge regularly on the job. So I have some experience in spotting weird design choices, over-thinking or just plain unnecessary implementations. Always try to review your own work from a users point of view also. Would you be happy to use this app yourself? Or how can this design be better? I really think there are too many applications and companies who seem to forget the fact that actual people have to use this stuff.

  1

  

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  @EdwinSch oh! That makes so much sense about thinking from a user's pov. I just keep focusing on the user experience using animations and stuff that I totally forget about the details in the design haha

  The reason I said it was silly because I jumped right into typing out the feedback without doing any more research because there might be ways that can be much more simpler than using filter 🙇🏻

  0

  

  P

  Ed•720

  @EdwinSchPosted over 1 year ago

  @adityaphasu Yeah, because in reality a majority of your users are actually kind of "dumb" when it comes down to operating software, apps or computers. So it's always a good idea to analyse a design on what could be better, more simple for the user, or could lead to mistakes on the user end. In the example of this crowdfund page, I think rendering a product that isn't available would only be confusing..

  1