Using either Vue (preferably) or React framework, build a star wars directory using SWAPI, which has all api endpoints required for the application.
The test creators 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
- we're aware that the designs are desktop only. Responsiveness is all up to you.
- 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 (except as a nice to have). We do however expect you to try to replicate the home page as much as possible.
A single page application using either Vue (preferably) or React featuring:
- A visually pleasing experience, you don’t have to be a show designer skill 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 can be written using SASS
- Responsive design
- Time spent building the assignment
- 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.
- Display data with pagination
- Good sense of design 👌🏾
- Include animations & micro-interactions 👌🏾
- 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
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
- Map main characters images to their keys
- User should be able to filter based on gender in the people section (male, female, robot)
- Statically rendered, SEO Friendly pages
There is time limit. If you want to go all-out for bonus points and nice-to-haves, that's up to you. But keep track of the time spent to get to the final result.
When you feel you're ready to submit do please:
- Share a link to your github repo
- make sure your repo is set to public Finally, we'd like to say Good luck! And have fun!