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
  • Screenshot
  • Links
  • Setup
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Live Site URL

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