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: https://github.com/anhek/frontendmentor-crowdfunding-product-page
- Live Site URL: https://anhek-crowdfunding-product-page.netlify.app
- 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
- 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
- Website - Antonin Nhek
- Frontend Mentor - @anhek