Skip to content
Submitted 9 months ago

Vite + Typescript + React + Styled Components

Scott Rogener•50
@scottyroges
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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,250
    @danielmrz-devPosted 9 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!

    1
    Scott Rogener•50
    @scottyrogesPosted 9 months ago

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

    1
  • Ruben•210
    @klabruben3Posted 9 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

    1

Please log in to post a comment

Log in with GitHub

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