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
Desktop view (1440px)
Mobile view (375px)
- Solution URL : https://github.com/Shashank1003/crowdfunding-product-page.git
- Live Site URL : https://crowdfunding-product-page-liard.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- React - JS library
- Styled Components - For styles
This was my first project on React JS and I enjoyed it. I got a good grasp of how React works differently from Vanilla JS. It took time to get used to rendering things and dynamically update data using hooks but dividing whole website into smaller components was a big help.
- Build a React Accordion Component Dropdown from Scratch - It was tricky to use index values to trigger accordion open or close action.
- Convert numbers into a currency format using JavaScript - This was really helpful to convert big numbers into currency format.
- Github - Shashank Gupta
- Frontend Mentor - @Shashank1003
- Email - guptashashank8975@gmail.com