Front-end Developer Test

Using either Vue (preferably) or React framework, build a star wars directory using SWAPI, which has all api endpoints required for the application.

Website layout

We've created a design for you to use to build your site. Layout files can be found here

• this should only serve as a guide for what your final site should try as much as possible to replicate
• the images visible in the design above for Characters/Starships/Planets cannot (unfortunately) be gotten from the SWAPI, as it doesn't provide images in it's responses. Because of this, we've provided an assets folder with images you can use instead.

Note: The assets provided (with the exception of the logo and hero-banner) are simply placeholder images to help your site look/feel more complete in the 'Popular Starships' and 'Starwars Characters' pages. We do not expect you to programmatically map characters/ships to their respective images in those pages. We do however expect you to try to replicate the home page as much as possible.

General requirements

A single page application using either Vue (preferably) or React featuring:

• A visually pleasing experience, you don’t have to be a designer but you must have put an effort into making this look good
• A "componentized" approach, split your code into small building blocks, showcase your clean architecture skills.
• CSS should be written using a CSS preprocessor like SCSS, PostCSS, LESS or similar higher-level language
• Responsive design

Functional requirements

• User can view a list of people (humans & robots), list item should contain full name, birth year and gender
• User can view a list of planets, list item should contain name, temperature and population.
• User can view a list of starships, list item should contain name, model and cargo capacity.
• User can see full details of selected person, planet or starship, you can ignore data containing links in the JSON response.
• For each listing, user can search using name to filter the list.
• User should be able to filter based on gender in the people section (male, female, robot)
• Display data with pagination

Nice to have

• Good sense of design 👌🏾

What we're looking for

• Using high-quality existing libraries or small amounts of custom code
• Production grade code (clean, maintainable, reusable code)
• A detailed commit history shows your progress towards your final implementation
• Polish and visual creativity
• Pride in craftsmanship

Extra Bonus Points

The following items will earn you bonus points. They are not requirements, the challenge is 100% completeable without them.

• Use Vue which is the preferred framework
• Implement with a state management library like VueX or Redux
• Include animations & micro-interactions 👌🏾

Time Duration

Maximum of 7 days

Submission

When you feel you're ready to submit do please:

• Share a link to your github repo as well as your live hosted site with a member of the product org team; or whoever first contacted you
• include several screenshots of each of your pages in a separate /screenshots folder in the root of your repo
• make sure your repo is set to public otherwise we won't be able to see all your hard work!

Finally, we'd like to say Good luck! And have fun!