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
- Toggle whether or not the product is bookmarked
- Solution URL: Crowdfunding product page using React and Storybook
- Live Site URL: https://florianstancioiu.github.io/crowdfunding-product-page
- Storybook URL: https://66a886300fecfdf698038a7c-yxaikccgug.chromatic.com
- Custom CSS Reset
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Vite - Next generation frontend tooling
- Storybook - Frontend workshop for building UI components and pages in isolation
There's not much I learned while developing the solution for this challenge, it's just that I had to remind myself some stuff I forgot, that's all.
Actually, no, I did learn one thing, and that is, if you use any type of JSX inside one of the .stories.js file you have to rename that file to .stories.jsx otherwise there will be a dynamic import error.
I would've liked to convert the project to typescript, then I would've had a lot of things to learn and also remind myself. However, I read on a github thread that converting an existing Vite project to TS is a bit of a hassle, not impossible, just a bit of a nuissance, so I decided against it.
- Frontend Mentor - @florianstancioiu