Let’s have a quick look at how to make your next front-end interview assignment look as good as possible.
Stick to what you know the best
It can be tempting to kill two birds with one stone and try learning or practicing some new technology while applying for a job. For sure, it was tempting for me at some point. But this isn’t how you’ll produce your best code. It’s better to stick to what you know best and learn new things on a different project.
You know which option will get a better offer.
Make it easy to review
Make sure the thing you deliver is easy to review. The perfect flow from the reviewer's perspective would be:
- get a working link
- see with their own eyes that the application works as expected
- dive into the code to see how you achieved what you did
Reviewing code without seeing whether it works feels a bit pointless. I’m not going to care much about how your code looks before seeing that it’s working as expected. And if it’s not easy to see it working, I may never bother to give it an in-depth review.
Give them everything on a silver platter
Deliver something interactive
For a front-end application, the easiest solution is to deploy it to one of the free servers you can use:
- GitHub pages,
- GitLab pages, or
- Netlify.
Never send ZIP files
Sending ZIP files has two disadvantages that could be a deal-breaker just by themselves:
- it’s inconvenient
- opening a ZIP file is a security risk
Can be fun to open!
Make sure it works
And that it works on a range of browsers and devices. It doesn’t have to be beautiful, but it should be usable—no matter whether the reviewers are sitting in front of the computer or on a bus on their phone.
Add README.md
Any project you have needs a README, and an interview assignment needs one even more. You should shortly introduce the exercise you implement and link a usable application. After that, you can add some high-level documentation—what framework you used and how to build or test your code.
Show how you think
Share with the reviewer your thinking process. If you use some patterns or best practices, then reference them explicitly in the documentation. If you encountered some tradeoffs, describe them and explain why you chose the way you implemented them.
Make it shine
If you want to stand out, you can consider adding some of the following things. Doing so will probably be a bit beyond the scope of what the assignment asked for, but it can show that you know the tasks that you will perform every day at your job.
Make it engaging
Add a few routes to your project. You can keep the reviewer's attention a bit longer by having additional pages. Maybe a short /about so they can easily match this demo app with your CV?
Unit test
Setting up unit tests can be an excellent example of showing that you are a quality-focused developer. You don’t have to aim for full code test coverage: just a few tests showing you know what it is should be enough.
Set up lint & prettier
Many professional teams use linters and automated tools to enforce their chosen code style. In the front-end case, those will be most likely ESLint & Prettier. It can be a nice touch to your show-off project to do the same—if there are any consistency-focused developers on the team, they will for sure notice it.
Make meaningful commits
Git (or, more generally, version control) is a crucial tool for working together on projects in IT. The team collaborates on the Git repository, so good commit messages are essential. If you create a history that makes sense for an example project, it’s a good sign of how your contributions to the company’s project will look.
How about you?
What is your best demo project? Share links in the comments!
Top comments (2)
An employee dashboard built with ReactJS, nestJS, MongoDB.
This project Is bootstrapped with Create React App and using tailwindcss for UI library. Backend is built with node.js on top of NestJS and MongoDB. Development enviornment is 64bit Windows 10.
Available Scripts🚁
This project usages Yarn as package manager and in the project directory, you can run:
Root scripts
start:clientstart:serverstart:allinstall:serverinstall:clientinstall:server:clientbuild:serverbuild:clientprepareIdidntMakeIt 🙂🙂
Thanks for sharing!