Frontend Mentor - Crowdfunding product page solution
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.
Table of contents
Overview
The challenge
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
Screenshot
Links
Setup
To run this project, install it locally using npm:
npm install && npm start
To run Storybook:
npm run storybook
My process
Built with
- React
- Styled Components
- CountUp.js
- Focus-Trap-React
What I learned
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.
Continued development
Unit tests
Useful resources
-
Animating React components - This article helped me to animate mounting and unmounting of modals.
-
Atomic Design Methodology - Main ideas of this methodology
Author
- Frontend Mentor - @mbart13