This repository serves as a guide for Propylon's front-end challenge.
- Start by installing the necessary packages by running
npm install
. - Then run
npm start
.
Below you can find the check list of what was accomplished on this test.
- Implement pagination support.
- Implement dropdown for the user profile button. See attached screenshot (coding-challenge-dropdown.png)
- For the listings, randomly assign whether a listing should be considered a “Low rate”, “Usually booked”, or no special designation.
- For the listings, use a date range of your choosing to display and a total cost.
- While the designer didn’t give any additional designs for mobile, the interface should present nicely across various screen sizes. Use your design eye to determine what layout changes might need to be made.
- Implement hover or focus states for interactive elements.
In light of time constraints and the challenge's specific scope, a few tasks were skipped. In a real-world scenario and with adequate time, these aspects could be explored:
- I would move the
URL
to a constants file or an environment configuration for easier management and change. - I would ensure that interactive elements like buttons and links are accessible, including proper ARIA labels and keyboard navigation support with
react-aria
. - In my
useEffect
, I would avoid depending on the entire fetchData object. Instead, I would destructure isLoading and data outside theuseEffect
and use them as dependencies to prevent unnecessary re-renders. - I would move the
getInitials
function outside of theProfile
component. This would ensure that the function is not recreated every time the component re-renders, which is more efficient. - I would extracting the logic for fetching data, checking bookmarked items, and handling bookmarking into custom hooks. This would make the
App
component cleaner and more focused on rendering logic. -
useFetchData
could encapsulate the logic of fetching and setting homes. - I could also create
useBookmark
hook to handle bookmarking functionality.