Skip to content
Submitted over 1 year ago

Designo w/ React + Vite, Sass, and Bootstrap 5.3

Ryan Martin•240
@rmartin93
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Designo multi-page website
  • HTML
  • CSS
  • JS
5guru

Design comparison

SolutionDesign

Solution retrospective

The background image stuff was super difficult for me. I have mostly designed web apps that display data, so doing something "pretty" was hard. I still don't know the best way to get the gray leaves on the screen. The figma file has them upside down and flipped and I don't know how to do that in CSS.

Other than that I think it's pretty spot on. I didn't bother with the email verification just because I got bored and that's not hard to add later.

I did this with Bootstrap 5.3 and React. I don't like using React-Bootstrap because it doesn't keep up with the latest version of Bootstrap, so if you notice a way I can implement bootstrap better let me know. The src/components/NavBar.js file is a good example of having to do a lot just to make a simple modal go away.

Community feedback

  • Curtis Simpson•550
    @crsimpson5Posted over 1 year ago

    Hey Ryan, great job on this! It looks great and I love the dark mode too.

    Here's a couple of things to consider:

    • The background-position properties aren't working in Chrome. You can change them to something like background-position-y: 27%;
    • If you refresh on a page other than home you get a 404. You'll need a Vercel config to make react-router work: https://stackoverflow.com/a/65644138.

    Keep up the good work!

    Marked as helpful
    1
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    @crsimpson5

    Thanks! I'm not sure why, but this works great. I don't have to add to the vercel.json every time I add a route, which is what I was afraid of.

    {
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
    0
  • ayoub dahmen•200
    @ayowaaabPosted over 1 year ago

    Keep it UP 🤗

    0

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