Submitted about 1 year ago

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

Ryan Martin• 240

@rmartin93

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

This is a solution for...

Designo multi-page website

HTML
CSS
JS

5guru

View challenge

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

@crsimpson5

Posted about 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

Ryan Martin• 240

@rmartin93

Posted about 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 }]
}

ayoub dahmen• 200

@ayowaaab

Posted about 1 year ago

Keep it UP 🤗

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