This is a prototype of a new feature in Moneyhub Customers will now be able to receive automatic value updates on their properties and we would like to enhance the experience by summarizing their changes
Please read this whole document before starting
This prototype is built using NextJS and makes use of styled components
We would like you to:
Required: Add a "Valuation changes" section to the page. design-mock-up.png has been provided as a design reference for the page and detail-design-mock-up.png shows the specific feature to be added, including how it is styled responsively. Make use of existing fonts and styles to match the look and feel of the existing app rather than trying to match the mock up exactly.
sincePurchase = `recentValuation - originalPurchasePrice`
sincePurchasePercentage = `sincePurchase / originalPurchasePrice * 100`
annualAppreciation =`sincePurchasePercentage / number of years since purchase`
colours used for the positive change in the image are #c2f7e1 and #006b57
Consider what other data this component could take and how that might affect your theming and solution
Consider opportunities to reduce repetition in the code and increase legibility
- This could be creating new components, simplifying existing ones, extracting helper function to simplify code or styling
- Show us what you can do and implement a few of these if you have time
We also ask that you update the readme with answers to the following questions
- Given more time, what other changes you would have liked to make?
- What UX or design improvements or alterations might you suggest? These can be to existing components or completely new ideas.
Optional: If you have time, show us some more by fetching the data from the api
- Currently the property data is hardcoded in the component, but it is also avaible via a Next.js api route
- Details of a property are located in the API at
/api/account, use this endpoint to populate the app with data - Use whichever method or library you are comfortable with to fetch the data
Try to:
- Ensure markup is semantic and accessible
- Make use of a centralised theme
- Make effective use of Git
We prefer:
- Functional React components
styled-componentsfor stylingprop-typesfor typechecking
IMPORTANT
Most of your work should take place inside the components/ and modules/ directory. There are some example components and styles available and the theme is defined in theme/. This task has been mocked up in Next.js to provide a full working environment and as such shouldn't be taken as a complete application. We are interested in assessing your React frontend skills and are not testing your knowledge of Next.js, you should not need to make any changes in the pages/ directory.
We recommend working through the list of requirements above but don't expect you to finish all of them. We're more interested in seeing how you approach the problem than seeing a perfect example, please only spend a few hours working on it.
On completion, email a link to your repository to your contact at Moneyhub, and ensure it is publicly accessible.
Run the development server:
npm run devOpen http://localhost:3333 with your browser to see the result.
You can start by looking at modules/property-details/index. The page auto-updates as you edit the file.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.