Using either Vue (preferably) or React framework, build a star wars directory using SWAPI, which has all api endpoints required for the application.
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.
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 can be written using PostCSS, SASS, LESS or similar higher-level language
- Responsive design
- 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
- Good sense of design 👌🏾
- 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
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
- Include animations & micro-interactions 👌🏾
Maximum of 7 days
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
/screenshotsfolder 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!
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.