people search react app
Budget: $30 – $250 USD
there is three major task - filters of data, add to favorites by routing , infinite loop of data
do not use redux!!
link for github repo - https://github.com/AviLevin/FLPL
Your Tasks
This project includes 3 main tasks, all of which are mandatory, besides the bonus questions.
You can and should learn new skills during the process, you may consult with Google and friends but you will need to explain why you implemented what you implemented, so be responsible for your code.
Task 1 - Filters
Above the list, there are several disfunctional checkboxes, which should add country filters to the user request, you need to make them work as follows:
Leaving them all unchecked should display all countries.
Checking one of the checkboxes should only fetch users from that specific country.
Checking several checkboxes should fetch users from all of the selected countries.
Bonus:
Add another country filter.
Task 2 - Favorites
Each user displays a heart icon while hovered, you need to implement the following functionality:
Add functionality which enables the user to select their favorite users.
Should be persistent - refreshing or closing the site will not reset the favorites.
Once a user is Favorited, the heart icon should stay visible even if the user is not currently being hovered over.
Clicking on a favorite user's heart icon should unfavorite the user.
Favorite Page
4.1. The Navbar has a Favorites tab, which should navigate to a new Favorite Page once clicked.
4.2. The Favorite Page should display all of the Favorited users.
4.3. Clicking on a heart icon inside the favorite page should unfavorite the user, and remove it from the page.
Task 3 - Infinity Scroll
Implement an Infinity Scroll functionality, which would fetch additional users and add them to the list once scrolling all the way down.
Bonus - Your Personal Touch
This is your chance to get creative. Add a new, cool and innovative feature to the app.
Feel free to delete, add, and refactor components as you see fit. Make sure that the previous tasks still work.
Tips / Notes
All the code you'll change / add will be in the /src folder.
If you want to use npm modules for other parts, go for it - just make sure you know how they work under the hood.
Submitting your project
After you've completed your tasks, and you are ready to submit it, do the following:
Make sure all the code is committed and pushed
Deploy your app using Github Pages.
Send me an email with your repo link & deployed app url.
Good Luck!
image of project start attached -
do not use redux!!
link for github repo - https://github.com/AviLevin/FLPL
Your Tasks
This project includes 3 main tasks, all of which are mandatory, besides the bonus questions.
You can and should learn new skills during the process, you may consult with Google and friends but you will need to explain why you implemented what you implemented, so be responsible for your code.
Task 1 - Filters
Above the list, there are several disfunctional checkboxes, which should add country filters to the user request, you need to make them work as follows:
Leaving them all unchecked should display all countries.
Checking one of the checkboxes should only fetch users from that specific country.
Checking several checkboxes should fetch users from all of the selected countries.
Bonus:
Add another country filter.
Task 2 - Favorites
Each user displays a heart icon while hovered, you need to implement the following functionality:
Add functionality which enables the user to select their favorite users.
Should be persistent - refreshing or closing the site will not reset the favorites.
Once a user is Favorited, the heart icon should stay visible even if the user is not currently being hovered over.
Clicking on a favorite user's heart icon should unfavorite the user.
Favorite Page
4.1. The Navbar has a Favorites tab, which should navigate to a new Favorite Page once clicked.
4.2. The Favorite Page should display all of the Favorited users.
4.3. Clicking on a heart icon inside the favorite page should unfavorite the user, and remove it from the page.
Task 3 - Infinity Scroll
Implement an Infinity Scroll functionality, which would fetch additional users and add them to the list once scrolling all the way down.
Bonus - Your Personal Touch
This is your chance to get creative. Add a new, cool and innovative feature to the app.
Feel free to delete, add, and refactor components as you see fit. Make sure that the previous tasks still work.
Tips / Notes
All the code you'll change / add will be in the /src folder.
If you want to use npm modules for other parts, go for it - just make sure you know how they work under the hood.
Submitting your project
After you've completed your tasks, and you are ready to submit it, do the following:
Make sure all the code is committed and pushed
Deploy your app using Github Pages.
Send me an email with your repo link & deployed app url.
Good Luck!
image of project start attached -