Latest solutions
Interactive comment section with React, TypeScript and TailwindCSS
#react#tailwind-css#typescript#vitest#react-testing-librarySubmitted 9 months agoMmmmmh... 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.
Job listings filtering page with React, TypeScript and TailwindCSS
#react#tailwind-css#typescript#viteSubmitted almost 2 years agoIntro section & dropdown nav with React, TypeScript and Material UI
#material-ui#typescript#reactSubmitted over 2 years agoInteractive rating tool using Semantic HTML, Sass and TypeScript
#semantic-ui#typescript#sass/scssSubmitted almost 3 years ago
Latest comments
- @Pex-Dev@aweliego
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 - @long-1810@aweliego
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 alreadyrelative
) and adjust-translate-y
until it's in the right location. Then on medium sized screens, override these styles with thestatic
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 -
- @azr-arch@aweliego
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 usedsome
. 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 - @nimscodes@aweliego
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 thetailwind.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 - To avoid using a
- @itsmusa@aweliego
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 thehero
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;
withalign-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 - @MelvinAguilar
Intro section with dropdown navigation (React + Tailwind + Dark mode)
#accessibility#react#tailwind-css@aweliego😍 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