Skip to content
Submitted about 2 years ago

Devjobs web app made using Next.js + Sass

Curtis Simpson•550
@crsimpson5
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Devjobs web app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

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

  • Md5 dalton•1,430
    @md5daltonPosted about 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 helpful
    1
    Curtis Simpson•550
    @crsimpson5Posted about 2 years ago

    @md5dalton This is great advice. I'll have to do this for my next project. Thanks!

    0
  • SJ•0
    @SarahIIIIPosted about 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 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