Design comparison
Solution retrospective
This was the perfect project for practicing React and Next.js. I was able to tackle a lot of challenges, including:
- creating reusable components
- filtering search results
- routing with Next
- creating a light and dark theme
There was a surprising amount of CSS required, and my code started to get a bit crazy. I'm again reminded at how important it is to have a good design system. That's something I'll continue to work on.
One challenge I wasn't sure how to address was having different input placeholder text based on the screen size. If you have any feedback on usability or anything else that could be improved, that would be great. Thanks 🙂
Community feedback
- @md5daltonPosted over 2 years ago
Awesome solution Curtis,
Css preprocessor offers a special functionality of joining multiple stylesheets into one.
In your case instead of having one big components.scss file, I'd suggest you split the file into it's smaller parts. The way I choose to do this is to have each React component with it's own stylesheet:
- .. components
- .... Card.js
- .... Card.scss
- .... Header.js
- .... Header.scss
// Card.js
import Link from "next/link"; import "./Card.scss"; export default ....
// Card.scss
.card { height: 100%; ... }
Marked as helpful1@crsimpson5Posted over 2 years ago@md5dalton This is great advice. I'll have to do this for my next project. Thanks!
0 - @SarahIIIIPosted over 2 years ago
Hey there, this is brilliant! Please can I contact you to understand your code and for some assistance with a very similar project I am doing?
0
Please log in to post a comment
Log in with GitHubJoin 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