We are thrilled that you are considering joining our team as a web developer! Your time and effort in completing this task is greatly appreciated. This exercise is designed to help us understand your problem-solving skills and general approach to web development.
We'd like to ask you to create a contact section out of provided and existing components and based on figma, with minor modifications needed to account for controlled behavior, and then to create from scratch button component. If all goes well, it shouldn't take you much longer than 1,5h, 2h tops.
Below, you'll find a brief overview of the task, which consists of the following steps:
- Clone and Set Up the Repository:
Please clone this repository:
git clone https://github.com/pw-bold/webDev2023.gitand set up the project locally usingyarnornpm install.
Little background: This is not yet a fully functional webpage. It is only ready for desktop view as of now, the code is a mess, and there are even some visual bugs. You are joining this project as a new developer, and are given some introductory tasks.
- Recreate the Missing Section:
Once you have the repository set up, please use the already existing components (in the
./src/components/directory) to recreate the missing "Contact" section based on the provided Figma file. You will probably want to follow the example of already existing sections, however feel free to use different method if you feel it superior to what is already there :) The form does not have to be functional (that is - send data anywhere), however it shall be a controlled component. Ideally you should not use any external form libraries here.
Please note, that we are using PostCSS to allow usage of newest CSS features like native nesting. You are not, however, required to use them as well, you can write plain CSS. And yes - if you want it and are ready to defend that choice during our meeting, you can also install and use any other styling solution, including SCSS, Stylus or some CSS-in-JS library.
And one more note - while components already exist, you will most likely have to adjust them to account for the required controlled behavior and might also want to (possibly, not necessarily) edit styling.
-
Create a New Button Component: Develop a new button component from scratch, and replace all instances where it is hardcoded (basically Intro, Features and Contact Form that you are going to be creating from scratch anyway) in the current codebase. Ensure that this component is versatile, structured well, and can be easily adapted to different use cases, as it may be utilized in various sections or subpages. We are looking forward to seeing your version of a well-crafted, universal button component.
-
General Review: While working on the tasks above, take some time to explore the repository and assess its structure and implementation. Yes, we know - it's a mess :) However, please refrain from fixing anything else or making changes outside of the two tasks mentioned; but be prepared to discuss your observations and any potential improvements during the next stage of the recruitment process if you are selected.
Once you have completed the tasks, please submit your work, by commiting & pushing it to a git repository of your choice and sending us a link. (hint: you might want to just fork our repo and work on your own copy, if you have github account of course). Remember to set repo visibility to "public"!
Please do not try to push to the source repository, it won't work.
If at any point something is unclear or you don’t know how to proceed, just use your general web development knowledge and do as you feel is best, keeping in mind best standards and practices. We know you will do well :)
We are excited to see your solutions and learn more about your expertise as a web developer. Thank you once again for your interest in joining our team, and we wish you the best of luck!