React Dev Test Assignment ⚛️

voorbeeld-app.mp4

Description

Try to finish as much TODO's as possible. These are found within the React app codebase. When you view the /src folder you will find an application for users that want to create their own addressbook (also shown in the video above). But as mentioned before there are some TODO's to be completed in order to make the application work as expected.

In order to start this assignment you need to:

• ⬇️ Clone this repository
• 🌲 Create a separate branch called feat/todo-assignment
• 👨‍💻 Open up your preferred editor (mine is VS Code)
• 🏃🏻‍♂️ Run npm install and then npm start
• 🔎 Search for all TODO: strings within the /src folder and start building!

Note: You will find some Bonus TODO's. These are not mandatory for completing this assignment. Feel free to flex your programming skills 💪

TODO's

Here is a list of all the TODO's to make life a bit easier:

Styling

• Add the 'Roboto' font from Google fonts and add it as a global CSS var called --font-primary.
• Make application responsive. It is already for the most part, but it is not optimal for smaller screens.
• Create separate styles for .primary and .secondary variants of the button component.

React

• Write a custom hook to set form fields in a more generic way.
• Fetch addresses based on houseNumber and zipCode.
• Create generic <Form /> component to display form rows, legend and a submit button.
• Create an <ErrorMessage /> component for displaying an error message.
• Add a button to clear all form fields. Button must look different from the default primary button, see design.
• Add conditional classNames for primary and secondary variant in <Button /> component

Redux

• Prevent duplicate addresses.
• Write a state update which removes an address from the addresses array.

Submitting assignment

You can submit your assignment by creating a merge request for your feat/todo-assignment branch. That's it, good luck! 🚀

If any questions might arise about the assignment please contact [email protected]