Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

React crowdfunding product page app

react, sass/scss
Ciceron•940
@MarcusTuliusCiceron
A solution to the Crowdfunding product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


This is my first react app, it was really comfuse at fisrt so I decided to scrap all the the code and started again from scratch, I think the structure is much better and easier to work with on this second attempt.

I noticed I never used componentdidmount and componentdidunmount methods, is this ok to not use those methods ?

Also my react component page is holding a lot of infos through its state, I didn't find any other way to be able to reuse info from one subcomponent to another.

SCSS is defintely not that clean.

If you find anything not working properly or if you have any suggestion feel free to give a feedback.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deletedPosted about 3 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
  • Kamasah-Dickson•5,570
    @Kamasah-Dickson
    Posted about 3 years ago

    Great solution there👍 Good job keep coding📌

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub