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
• My process
  • Built with
  • 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

• Solution URL: https://github.com/anhek/frontendmentor-crowdfunding-product-page
• Live Site URL: https://anhek-crowdfunding-product-page.netlify.app

My process

Built with

• Mobile-first workflow
• React - JS library
• Create React App - React framework
• React Redux - State container
• React Hook Form - Forms
• Chakra UI - For styles
• Sizzy - For the responsive web design

Useful resources

• Redux Fundamentals - This is a serie of articles from the official documentation of Redux, It helped me to update my knowledge on React Redux.
• SVGOMG - Useful website for optimizing SVG
• React SVGR - Turn SVG into React components
• WAVE Web Accessibility Evaluation Tool - I use the Google Chrome extension to check the project's accessibility features
• Chakra UI + React Hook Form - Article which helped me to integrate React Hook Form with Chakra UI

Author

• Website - Antonin Nhek
• Frontend Mentor - @anhek