hirejuniors-dev / front-end Goto Github PK

Is your feature request related to a problem? Please describe.
Add a search bar to search and filter jobs.

Describe the solution you'd like
Use Algolia to add the feature.

Describe alternatives you've considered
Use Elastic Search.

Additional context
This will help in easily searching and filtering jobs.

Describe the bug
A negative z-index value is causing the filter values to hide under its parent div, which then doesn't allow to click on them.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://hirejuniors.dev/ on a device with width >768px.
2. Try clicking on Filter checkboxes.
3. Open Dev Tools use the "Element Selector" present in top left of dev tools to hover on the Filter Area.
4. The parent div gets highlighted, indicating it gets stacked over child Filter div.

Expected behavior
Z-indexes are used in a correct manner to replicate current stacking behavior minus the filter div stacking behind parent.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox and Edge
• Version: v85 and v87 respectively

Smartphone (please complete the following information):

• Not applicable to smartphones.

Additional context
Current implementation allocates a z-index of -1 to Filter div. Its preferrable to only use positive values to prevent such behavior.

Fetching images from /public folder works in development but the image doesn't render in production.

Is your feature request related to a problem? Please describe.
Add tests to the project.

Use relevant icons/emojis in the cards.

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
The project doesn't have a linter setup.

Describe the solution you'd like
Add a linter for the project.

Additional context
This will help in keeping consistency.

When I opened https://hirejuniors.dev/?ref=producthunt and clicked on the hamburger and started scrolling the navbar contain were not visible because it was hiding behind the search bar.

Smartphone :

• OS: iOS 14.2.1
• Browser : Safari
• Version 14.2.1

Describe the bug
The pagination at the bottom of the page doesn't look good. On a small screen, they don't render correctly and create an issue with the responsive design.

To Reproduce
Steps to reproduce the behavior:

1. Go to '/'
2. Scroll down to the bottom
3. You will observe 1 to 18-page numbers displayed. Open it in a responsive window.

Expected behavior
There should be a limited number of page numbers shown at the bottom. There should be a next and previous button that he's the user navigate to different pages, shrinking the current list of page numbers.

Screenshots

This is how it looks on a desktop

This is how it looks on a smaller screen

Describe the bug
The color difference between the footer background #E0DAF8 and the purplePrimary Color in text and Button background #AF9BFF doesn't have enough contrast. Its less than the minimum required contrast value and isn't easy to read. A color palette change with colors having a better contrast is needed.

This is also applicable to the text color for pagination links and the color of the Logo.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://hirejuniors.dev/
2. Open Dev Tools and enable the Element Selector. Ctrl + Shift + C
3. Hover over link text.
4. Make note of Contrast value under Accessibility.

Expected behavior
Contrast value should be more than 4.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: v87

Smartphone (please complete the following information):

• Device: Nokia 6.1
• OS: Android 10
• Browser: Edge
• Version: v45

Additional context
I have a few suggestions in terms of color palette changes:

1. The easiest change while maintaining current color palette would be to add a darker variant of the purple. I found #574D7E a suitable option.
   

2. A newer purple palette I found more vibrant w/ better compatibility with a future dark theme that would require lighter shades of purple.

   • Primary: #892CDC
   • Lighter variant: #C69FEF
   • Darker variant: #6511C6

3. A different color from the current palette altogether, I find #FED710 (A warm yellow) and its shades, very appealing.

I can produce mockups once a direction has been decided. 😄

About page and footer is overlay
On mobile device About page and footer are overlaying.

Screenshots

Smartphone:

• Device: [Mi a3]
• OS: [Android:10]
• Browser [Chrome, firefox]
• Version [87,84]