Stratforge Code Challenge

Time Required: 40 - 60 hours

👋 Introduction

Welcome coder 👩‍💻👨‍💻

For this challenge, you need to develop an application in React and commit the code to a public GitHub repo, then 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. Creativity & UI/UX design ✨

While technical accuracy is important, the primary focus of this challenge is on creativity, user interface, and user experience. We want to see how you transform raw data into something visually appealing, engaging, and intuitive.

---

⚔️ Challenge

You are tasked to develop an info webapp for SpaceX that contains the following structure.
The app should not only function well but also be visually creative, user-friendly, and polished.

---

Home Page

• This will be the landing page of the site — it is the most important part of the application. Make it highly appealing, intuitive, and visually engaging.
• Should include relative information such as news, upcoming launches, highlights, etc.
• The page will have the following menu items:
  • History
  • Launches
  • Rockets

Each item will take the user to another page with related information.

For example:

• Rockets page → list of SpaceX rockets with images, names, and basic details.
• Clicking one should open a detail page (localhost/rockets/falcon-9).

💡 Creative Freedom:

Think about layout, animations, typography, theming, or interactive elements that make the app stand out while keeping it simple to use.

---

Sub-pages or Screens

Each menu item should lead to a page with all related items.

• Example: Rockets page → all rockets launched by SpaceX.
• Each item should have:
  • A picture
  • Basic info (name + short description)
• Make sure the page is responsive and adapts to screen resize.
• Provide a filter/search option by name for easy navigation.

🎨 UI Focus: Arrange content in a way that looks clean, modern, and easy to explore.

---

Detail Page

When a user clicks on one of the items, display all detailed information for that item.

• This page should present large and complex data in a simple and visually appealing way.
• Consider using:
  • Cards
  • Tabs
  • Infographics
  • Timelines
  • Interactive sections

Be creative with how the information is presented — the goal is to simplify complexity through design.

---

🧰 Tools

API

All information on SpaceX is available as an Open API here:
https://github.com/r-spacex/SpaceX-API/tree/master/docs

---

📜 Guidelines

• Make sure your code is clean and structured
• Commit your code as a public repository on GitHub and share the link with us
• UI/UX is the highest priority — focus on:
  • Color theming
  • Typography
  • Responsiveness
  • Interactivity
  • Creativity in layouts & transitions
• Keep use of 3rd-party libraries to a minimum (only essentials).
• We recommend using Tailwind CSS and TypeScript (strictly).

Your README.md should be detailed and explain:

• Your choice of frameworks and tools
• Architecture
• Your UI/UX thought process and design decisions
• If short on time, explain how you would improve the app further

---

🎯 Final Note

This challenge is not just about functionality — it’s about how imaginative and user-friendly you can make the experience.

Show off your creativity and design sense! 🔥