Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 8 months ago

Crowdfunding Product Page using React and TailwindCSS

react, react-testing-library, tailwind-css, vite, vitest
RamssC•520
@RamssCR
A solution to the Crowdfunding product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I feel proud of being able to create a more complex desing trying to do good practices on React and leveling up my TailwindCSS skills.

What challenges did you encounter, and how did you overcome them?

my first challenge in this project was actually to structure its folders, since it was gonna be the first time using a more manageable folder structure to maintain all of the logic and components the project has.

my second challenge was the models interaction, since a virtue can also become a defect if not well used, I made my project components to be generally reusable and that derivated on creating components like TextBox, Button, CardContainer (to name some),... that really eased my job during this challenge, but also made other things really difficult, for example: passing prop values to certain components on the modal card.

And my third challenge was actually the progress bar logic to make it functional. It wasn't even the data I had to make dynamic what was difficult to me but rather the bar. Eventually, I figured out the logic behind and managed to make the function.

In short:

  • Folder Structure
  • Props in between components
  • Progress Bar
What specific areas of your project would you like help with?

As you can see in one of the components folders (header, to be precise), there's a css file which mere purpose was to render the background image with its filter.

If there's a way to make it look better, any suggestion will be well received.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on RamssC's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License