Submitted 7 months ago

Vite + Typescript + React + Styled Components

Scott Rogener• 50

@scottyroges

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

First time setting up a vite + typescript + react project. Ran into a couple of snags with importing the styled-components library but it ended up just being user error. Once I got past that though the rest felt pretty straightforward.

I generally like styled-components but there does feel like times where I should be sharing more between my components or am unsure where certain styles should go. For example when doing the mobile version a few of the spacing parameters needed the change and I had to make those adjustments in a few places which felt a little weird.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 7 months ago

Hello there! 🙋🏽‍♂️

Your solution looks excellent!

I have a suggestion about your code that might interest you:

📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! 😊

Other than that, great job!

Scott Rogener• 50

@scottyroges

Posted 7 months ago

Thanks @danielmrz-dev! I will definitely take a look at the extension. Thanks for the tip!

Ruben• 210

@klabruben3

Posted 7 months ago

This is really good😎. I actually need a bit of help on the VITE/React part. I completed a project using react via VITE and I came across a problem I wasn't able to fix and I see you handled it like a champ. I was successful in creating the project, the hiccup was getting a live URL of the website from Git hub that works. The URL I got had some styling not applied. I'd appreciate it if you tell me how u did it.

you can find the project here https://www.frontendmentor.io/solutions/responsive-design-using-media-queries-SbjsTABvSz

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