/react-code-challenge

Explore SpaceX Webapp

Stratforge React Code Challenge 2021

Time Required: 16-24 hours

👋 Introduction

Welcome coder 👩‍💻👨‍💻

For this challenge, you need to develop a application in React and commit the code to a public GitHub repo and share its link for review.

We will assess the following

  1. Coding standards
  2. Best practices
  3. Authenticity
  4. Complexity (optimal code)
  5. Effective use of data structures
  6. Re-useability of code
  7. Innovation

⚔️ Challenge

Important!

You are tasked to develop a info webapp for SpaceX that contains the following structure

Home Page

  • This will be the landing page of the site that you can be creative about and should have some relative information on the news, upcoming launches etc

  • The page will have the following menu items

    • History
    • Launches
    • Rockets

  • Each item will take the user to another page that will have related information from which users and choose to read

    For example, the Rockets can have a list or list of cards with the name, image of the rocket which the user can click to know more

    • Be sure to make use of React Router

    For example, Landing page can be localhost/rockets and the selected rocket information can be under localhost/rockets/falcon-9

Sub-pages

Design intermediate pages for each menu item (specified on top). This page should contain the items it describes

For example, page for "Rockets" should have all the rockets launched by SpaceX

  • Each item on the page should have its picture with some basic info like the name and short description
  • Make sure the page is responsive and the items are automatically arranged upon screen resize
  • An option to filter the items by name should be provided

Detail page

When the user click on one of the items in the page above, a screen with all the details of that item should be presented.

  • This page should be designed to contain the information with respective to its type or topic
  • Be creative of how different pieces of information can be shown in the right way

We are looking to understand how you can present large and complex data in a simple way

🧰 Tools

API

All information on SpaceX is available as an Open API and you can find the documentation here https://docs.spacexdata.com/

📜 Guidelines

  • Make sure your code is clean
  • Commit your code as a public repository on GitHub and share the link with us
  • Make sure the UI looks good - with respect to color theming, fonts, sizing and responsiveness
  • Keep use of other libraries to a minimum (only essentials). We prefer that you don't use any 3rd party css/component libraries
  • Keep your README.md detailed and explain on
    • Your choice of frameworks
    • Architecture
    • If short on time, you can explain how you can improve on the application

Show-off your skills! 🔥