Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
14

Amélie

@aweliegoAmsterdam330 points

Self-teaching web development since 2020. I like to understand how apps work and websites are built.

I’m currently learning...

All things React and TypeScript

Latest solutions

  • Interactive comment section with React, TypeScript and TailwindCSS

    #react#tailwind-css#typescript#vitest#react-testing-library

    Amélie•330
    Submitted 9 months ago

    Mmmmmh... If I were to further develop this project into a full-stack app, how might one proceed? Where to start? What tools would you use? This might be something I'd like to explore in the future and use this project as basis for.

    Aside from that, if you have any thoughts on my solution, I would love to hear them.


    0 comments
  • Job listings filtering page with React, TypeScript and TailwindCSS

    #react#tailwind-css#typescript#vite

    Amélie•330
    Submitted almost 2 years ago

    0 comments
  • Intro section & dropdown nav with React, TypeScript and Material UI

    #material-ui#typescript#react

    Amélie•330
    Submitted over 2 years ago

    1 comment
  • Interactive rating tool using Semantic HTML, Sass and TypeScript

    #semantic-ui#typescript#sass/scss

    Amélie•330
    Submitted almost 3 years ago

    1 comment
  • Time tracking dashboard using React and CSS Grid

    #react

    Amélie•330
    Submitted almost 3 years ago

    1 comment

Latest comments

  • Pex-Dev•360
    @Pex-Dev
    Submitted 9 months ago

    Interactive comments section solution using Tailwind CSS

    #tailwind-css
    1
    Amélie•330
    @aweliego
    Posted 9 months ago

    Hi Pex-Dev, and good job on finishing this challenge! I recently completed myself so I know it wasn't easy 😄

    I can't speak much about the code itself because my vanilla Javascript skills are a little bit rusty so my feedback is more about my user experience of your solution. The responsiveness of the layout is really good and overall the app looks good with everything in the right place.

    As for the functionalities, most of them work as expected, I just noticed two things when changing the score of a comment:

    • the current user is able to upvote/downvote their own comment, while this shouldn't be the case
    • when you click twice on the + or - icon, on the second time the score resets to the previous value; I'm not sure this was intentional from you, I found it a bit odd from a user perspective

    Overall really well done, keep at it!

    Marked as helpful
  • Copper2•410
    @long-1810
    Submitted almost 2 years ago

    Static Job Filter made with React + TailwindCSS

    #react#tailwind-css#vite
    1
    Amélie•330
    @aweliego
    Posted almost 2 years ago

    Hi Copper, and congrats for completing the challenge 🎉

    I wanted to try and help you with the problems you mentioned:

    • Regarding the issue on small screens with the search bar overlapping on the listings when there are many filters: currently in your App component, you call the Filter component inside the background div. If you call it just after the div instead, the issue you mentioned doesn't exist anymore. Of course you will need to adjust some styles in your Filter component (like removing the absolute position) to make it look good, but just to give you a starting point :)

    • Regarding the position of the company logo on small screens: on small screens you could set the logo in an absolute position (inside your div which is already relative) and adjust -translate-y until it's in the right location. Then on medium sized screens, override these styles with the static position and reset -translate-y to default. You will also need to adjust the spacing of the text content around and make the image smaller but I hope this gives you an idea of how you can achieve it :)

    I hope this helps and wish you good luck! 🔥

    Marked as helpful
  • Azar•530
    @azr-arch
    Submitted almost 2 years ago

    RESPONSIVE JOB LISTINGS APP MADE WITH REACT + TAILWIND

    #react#tailwind-css
    1
    Amélie•330
    @aweliego
    Posted almost 2 years ago

    Hi Azar, well done on this challenge! 👏

    Unlike most solutions I've seen, yours is quite interesting because the user gets the results that match exactly all the selected filters (some if I filter on 'CSS' I get 2 results but if I add 'Senior' to that I get only one, while in other solutions, including mine, you still see 2 results). My filtering function is very similar to yours but I see that it's because you used the every array method while I used some. So nice to notice these little differences that have different effects!

    What you came up with to remove the filter blew me away, I would have never thought of doing it like that. Will definitely make a note of this! ✍️

    If I had a critic it would be about the overall structure and how the components fit together. To me it's a little bit tricky to comprehend. The component names could in my opinion reflect more what their role/content is, for example I would have chosen the name Search over Filter (a bit too generic given how much the word filter can be used through this project); JobCard and JobListing also sound too much of the same to me. But finding good names for each component of this project wasn't easy for me either, especially when it comes to the filter buttons inside the job listings and the 'tags' in the search bar.

    I think you did a great job and I learned from your solution! Good luck with your future projects! :)

    Marked as helpful
  • Prince Andrews Nimako•240
    @nimscodes
    Submitted almost 2 years ago

    Responsive Job Listing with Filtering Options

    #react#tailwind-css
    1
    Amélie•330
    @aweliego
    Posted almost 2 years ago

    Hi! Well done on completing the challenge, it looks good!

    I took a look at your code too and had some tips in case you're interested in refactoring your code!

    • To avoid using a useEffect to set the correct background for desktop or mobile, since you're using TailwindCSS, you could handle this via the tailwind.config.cjs file:
    module.exports = {
      content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
      theme: {
        extend: {
          backgroundImage: {
            'header-desktop': "url('/public/assets/images/bg-header-desktop.svg')",
            'header-mobile': "url('/public/assets/images/bg-header-mobile.svg')",
          },
    

    And then apply the classes bg-header-mobile sm:bg-header-desktop to your div. That way your code is 'cheaper' and drier :)

    • In your JobListItem component you repeat 4 times the same button for each filter type. You could refactor this by putting all the filters in an array and mapping over this array to return the button. Something like that:
    {[job.role, job.level, ...job.languages, ...job.tools].map((filter, idx) =>
    <button key={idx} onClick={() => handleFilterClick(filter)}>{filter}</button>)}
    

    Hope that's useful. Happy coding!

    Marked as helpful
  • Musa Magwaza•110
    @itsmusa
    Submitted over 2 years ago

    Responsive Dropdown Navigation

    #sass/scss#accessibility
    1
    Amélie•330
    @aweliego
    Posted over 2 years ago

    Hi! I was looking for more solutions on this challenge and came across yours.

    I personally like using flexbox for elements like a navbar as I find it more suitable than grid for small components (flexbox being content-first based while grid is layout-first based), but in principle you can use whichever you like to achieve the same thing. I think you did well with flexbox!

    It's been a minute since I wrote vanilla JS but I don't think you can do much shorter/better for the dropdown functionality (and the other functionalities for that matter). Your JS does exactly what it's supposed to do and is concise. I like that it's simple and easy to understand!

    Regarding the height of the image and description, I assume what you want to do is having the bottom of the description (the client images) aligned with the bottom of the image. If that's what you meant, you can achieve this with align-tems: end; on the hero container:

    .hero {
      margin-bottom: 3rem;
    
      @include breakpoint-up(xlarge) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 2rem;
        width: 90%;
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto;
        align-items: end; ------> add this
      }
    
      &__image {
        margin-bottom: 2rem; ------> remove this
        order: 1;
      }
    
      &__description {
        padding-right: 1rem;
        padding-left: 1rem;
        text-align: center;
    
        @include breakpoint-up(medium) {
          padding-right: 3rem;
          padding-left: 3rem;
        }
    
        @include breakpoint-up(xlarge) {
          text-align: left;
          align-self: center; ------> remove this
          padding: 0;
        }
      }
    

    Or just replace align-self: center; with align-self: end; but I think it's nicer to have the property on the parent element. Then you just need to play with the margin/padding of the text elements inside the description to make it look better.

    Regarding the breakpoints, I usually go for just two or three views of the site, so mobile/desktop or mobile/tablet/desktop (depending on the project). I agree that it's a bit overkill otherwise to have so many, and most sites will render well also with fewer breakpoints.

    Overall I think you did a good job on this challenge, your code is very clean and easily readable, and the responsiveness is top notch! Keep it up!

    EDIT: something I forgot to mention - I find it a bit unhandy that the drop-downs in the navbar open on hover but that you need to click the button to keep them open, and that to close them you need to click again exactly on the button (instead of just anywhere). So I think there could be some improvements here as well. Also, the arrow icons (both in the navbar and sidebar) are not pointing to different directions when you open/close the drop-downs, as shown on the designs.

    Marked as helpful
  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar
    Submitted over 2 years ago

    Intro section with dropdown navigation (React + Tailwind + Dark mode)

    #accessibility#react#tailwind-css
    11
    Amélie•330
    @aweliego
    Posted over 2 years ago

    😍 What a brilliant and inspiring solution to this challenge!

    I really love how you structured your project and that you really nailed the accessibility (something I need to work on). The transitions are really smooth and the dark mode is a great addition!

    The only thing I noticed with the dark mode is that if I leave the site after switching to the dark theme, and then come back again, there is a slight delay for the dark theme to load, so it goes from light to dark really quick. But maybe that's something that you were able to solve with the advice in the first comment?

    The responsiveness is top notch, although the layout could be a bit improved on tablet views imo. But I think you have some real styling chops here! I'm still trying to wrap my mind on how you handle the arrow icons and the direction they point at to be honest 🤯

    And my last suggestion to make your solution even better would be to render the data more dynamically, as currently much of the menu text is hard coded. You do map over the menu items to create the links, but I would take it a step further and extract the data to a separate array, and refer to it where needed in your code. That way it's all easy to find in one place, and easier to maintain as well in the future should the menu grow.

    But fabulous job overall, and I bookmarked your solution for future reference!

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub