Submitted over 1 year ago

Crowdfunding Product Page || React + TailwindCSS

Boots 😺•1,590

@adityaphasu

Preview site View code

This is a solution for...Crowdfunding product page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Heyoo Everyone!

This was my first time using useContext() hook in a project to pass around props instead of doing prop drilling. I've only used one context to just try it out and didn't add another one (which I was thinking of doing for the modal but that would've just made it more complex for me to manage 😆)

Out of all the projects I've done using framer-motion this by far is probably the most fun one. It made me look more into other framer stuff like <LayoutGroup>, layout, and LayoutId and they did make the modal animations a lot smoother.

✨ I hope you guys give the website a go to test out the animations and lemme know how the experience is! and any feedback on how I can improve the code is much appreciated. (especially the usage of useContext hook and if I could've done it better)

Thanks!

Community feedback

Ed•720
@EdwinSchPosted over 1 year ago
hi Boots. Great solution! Looks very good, I also like your additions with framer motion. Just one thing which sticks out to me is de fact your header image doesn't scale and sticks left on desktop size. This can be solved with either implementating the image as a background-image for the container and let is scale with background-size: cover;. Or auto-fit it with object-fit properties.

Coincidentally I was just planning on doing the same challenge, so I didn't check your codebase. Don't want to "cheat" by seeing someone else code beforehand. ;)
Marked as helpful
1
Boots 😺•1,590
@adityaphasuPosted over 1 year ago
@EdwinSch Oh! I am actually already using it as a background image and using cover , I think the lg:bg-contain which makes it contained at the larger screen sizes might be the problem xD . I'll remove the class and see if it fixes it. Thanks for pointing out though!
0
Ed•720
@EdwinSchPosted over 1 year ago
@adityaphasu yes contain means it will keep it's original sizes and not scale. cover will figure out how to scale the image within given dimensions of the parent. Although the trade-off being some parts of your image will be sort of cropped so it can fit. Glad to help :)
1
Boots 😺•1,590
@adityaphasuPosted over 1 year ago
@EdwinSch omg ahahahaha ! I just tested this on different desktop sizes and I was like it seems fine to me but didn't realize this was happening on screens beyond 1440px which I didn't test on while building the project and also contain somehow didn't change anything while on 1440px so I missed it completely as everything seemed fine 😅
1
Boots 😺•1,590
@adityaphasuPosted over 1 year ago
@EdwinSch Removed the class and it actually looks quite the same on bigger screen sizes! Thanks again for letting me know about this 😊
0
Alex•1,310
@AlexKolykhalovPosted over 1 year ago
Very good work!! Keep going!
1
Boots 😺•1,590
@adityaphasuPosted over 1 year ago
@AlexKolykhalov Thank you :))
0

Please log in to post a comment

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