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
To run this project, install it locally using npm:
npm install && npm start
To run Storybook:
npm run storybook
- React
- Styled Components
- CountUp.js
- Focus-Trap-React
I learned how to build modals from scratch. For this I used ReactDOM.createPortal and small library called focus-trap-react. Modal is accessible, user can navigate around the page and make a pledge using only keyboard.
For the first time I used atomic design methodology to structure the project and I will utilize it in my next bigger challenge to practice it more.
I used some simple animations to display the statistics in more interesting way.
Finally, I played a bit with Storybook in this project to document components in isolation and must say this is very useful tool and would like to use its full potential in a bigger project.
Unit tests
-
Animating React components - This article helped me to animate mounting and unmounting of modals.
-
Atomic Design Methodology - Main ideas of this methodology
- Frontend Mentor - @mbart13