This is a solution to the Crowdfunding product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Make a selection of which pledge to make
- See an updated progress bar and total money raised based on their pledge total after confirming a pledge
- See the number of total backers increment by one after confirming a pledge
- Toggle whether or not the product is bookmarked
- Solution URL: github
- Live Site URL: github pages
- Semantic HTML5 markup
- CSS custom properties
- React - JS library
- Styled Components - For styles
I used this challenge to practice React + Styled Components, which are a great combination!. I had some minor issues styling React Portals, but fixed it using global styles in order to apply some css to components like modals, which are out of scope of nested styled components.
In order to keep this project simple I avoided the use of Redux, some props are passed from parent to children and so on. I'm planning merge this architecture to Redux to make things easier to understand.
- Website - Omar Juarez
- Frontend Mentor - @okcomputer93