Interview FRONT-END code challenge

bornlogic is a technology startup focused on building digital marketing products. We build a platform to orchestrate thousands of teams creating content everyday. Also, our technology stack handles millions of transactions per day!

We work with people that are passionated about technology, forming a great team of engineers and valuable customers.

Who we want on our Team

We work hard, play hard and thrive at bornlogic! if you belong to startup way of life, for sure this is a perfect opportunity!

We welcome highly skilled people who want to build amazing products and will be proud to show them to their friends and family! We are also looking for entry-level engineers who want to learn and practice software development using the best practices used by many players in the marketfield.

What should you expect in this code challenge?

This challenge is the beginning of your job application at bornlogic. It is intended to all candidates, regardless of experience

After you are done, we will review your code, give you feedback and proceed to the next steps of your job application.

tips

It’s natural to feel stressed during a test, so don’t panic. We wrote down some good old tips that may calm you down.

• [ ] Relax yourself mentally and physically
• [ ] Consider alternative solutions
• [ ] If you are stuck, start with the brute force solution
• [ ] Plan out the full solution before you code
• [ ] Keep the big picture in mind

How can I apply for this opportunity?

Fork this repository, build your awesome solution and then add [email protected] and [email protected] as collaborators to your project.

Build a greate READ.ME explaining how to run your code and which technologies did you choose.

You can open an issue at any time if you have any questions.

Let's get started

Let's pretend we launched a "Marvel Comics Catalog", using Marvel API.

Your first objective as a frontend developer is to help us grow our socialmedia by building the first visual components and webpages.

Development Requirements

Which technologies/libs can I use?

• React
• Typescript
• ES6+
• React Hooks
• styled components
• You can also use create-react-app if you want to.

What libs/tech should I avoid?

• Structured templates (using an already built template restrain our capacity to evaluate your project)

Time frame

• Keep Calm, and do as much as you can. Keep in mind that you have up to 7 days to complete the challenge.

Step One

• [ ] Read carefully the documentation: Marvel API.
• [ ] Create an account and an API key. You can use Postman or Insomnia and test if your key is valid.

Step Two

It's show time! Remember, build essencial components for each reusable part of your app, such us lists and detail infos.

The application should have two routes:

• Comic's List
• Comic Detail

The Comic's List page should

• [ ] show the first 30 comics on list;
• [ ] display for each comic the cover image (if it has one) and it's title;
• [ ] show the details of the comic, when the user clicks on the comic (navigate to the comic details page);
• [ ] have an search input, where the user can type the name of the comic;
• [ ] have a pagination

The comic details page should

• [ ] have more details about the comic, like description, variantDescription, format, pageCount, images;
• [ ] display a list of characters that are associated with this comic;
• [ ] display a list of creators that are associated with this comic;
• [ ] display the cover of a magazine, if the user clicks on the comic name;
• [ ] be shareable, if the user copy and paste the url on another browser, it should open the same page

Step Three

It would be great to see these libraries being used in your code, but we would love to know what you can suggest for us:

• DOM testing (https://github.com/testing-library/react-testing-library)
• Code patterns (https://eslint.org/ and https://prettier.io)
• Vector Icon Set (https://fontawesome.com/)

And for last but not least, if you think the those first steps were too easy, then you can:

• [ ] Create a fake login web page using a JWT token strategy (http://jwt.io);
• [ ] Add a favorite feature, where the user can save on the client side which comics are his/her favorites, and then show only those selected;
• [ ] e2e testing ❤️;
• [ ] Surprise us with some awesome feature that we didn't think about;

Step four

• [ ] Have you finished? So, make your repo private and add [email protected] and [email protected] as collaborator.
• [ ] Push your code to your repo, please do not open a PR for the original repository

Which are the main aspects we'll be evaluating in your code:

• Clean Code
• How you approach the task presented to you
• Layout and CSS
• Componentization
• Responsivity
• How far can you go through the challenge
• Bug count