Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
30 views

ReactJS-Assignment (1)

Uploaded by

vishwajeetrout8
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

ReactJS-Assignment (1)

Uploaded by

vishwajeetrout8
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

ReactJS Assignment

Front-End Developer
Breeze | ServerGuy

Overview
You need to clone this website home page Algolia Hacker News Search using ReactJS that
would be backed by a user login panel. (Api Endpoint : https://hn.algolia.com/api)

Goals
1. You need to clone the entire UI of the front page that includes listing of data,
filters,search bar and number of results.You can skip the setting and sharing button.
2. You need to make a login page in front of your application that will take the
username and password of the user. After clicking login button, the user will be
directed to the main dashboard of your app and that username will be shown on
upper left corner of app in place of “Search Hacker News”
3. Make the list item clickable and redirect it to the respective url just like the website
is doing.
4. Provide pagination options at the end of table.
5. Deploy your application on a cloud platform like Vercel. Refer - Deployment Article

Objectives
1. Your code should be deployed on a cloud platform (like Vercel) even if you are not
able to complete all tasks.
2. Filters and Search Bar should be working as expected just like in Algolia Website
3. Pagination should fetch new data based on queries. You should not fetch entire
data and then render it in table
4. Login UI should be properly implemented
5. Maintain search history of the texts searched by the current user and time of search
6. Share Github Repository URL.
7. Search on the basis of urls of the page should be implemented
Eg: If you write parameter “query=hero” in the url, then the respective search of text
“hero” will appear, and if you search “hero” from search box, the url will get updated
respectively
Find the reference of the screenshot given below :
Recommendations
1. Use Some state management library like redux
2. Use React-router for routing
3. Use Some css library like react-bootstrap or material-ui
4. Save the user details in local storage of the browser

You might also like