feat: implement SpaceX rocket list and detail page

[joniheri]

feat: Implement SpaceX Rocket List and Detail Page

Overview

This PR implements the frontend technical assignment using SpaceX API. The solution includes a rocket list screen with filtering and add functionality, plus a detail screen for viewing full rocket information.

Features Implemented

Rocket List Page

• ✅ Display rockets from SpaceX API (image, name, description)
• ✅ Filter functionality (search by rocket name or description)
• ✅ Add new rocket to the list with validation
• ✅ Responsive grid layout using Vuetify (12, 6, 4 columns on different screen sizes)

Rocket Detail Page

• ✅ View full rocket information:
  • Rocket image
  • Rocket name
  • Country of origin
  • Description
  • Cost per launch
  • First flight date
• ✅ Navigation back to list page
• ✅ 404 handling when rocket not found

UI States & User Experience

• ✅ Loading state with spinner while fetching data from API
• ✅ Error handling with retry mechanism
• ✅ Empty state message when no rockets match filter
• ✅ Success state displaying rocket data

Technical Implementation

Architecture

• Framework: Vue 3 with TypeScript for type safety
• State Management: Pinia store pattern
• Routing: Vue Router with auto-generated routes (unplugin-vue-router)
• UI Framework: Vuetify 3 for components and styling
• HTTP Client: Custom requestJson utility with proper error handling

Key Components

• RocketCard.vue - Card component displaying rocket summary with link to detail page
• RocketFilter.vue - Search/filter input component
• AddRocketForm.vue - Form for adding new rockets with validation
• UiState.vue - Reusable component for loading, error, and empty states

State Management (rocketStore.ts)

• Manages remote rockets (from API) and local rockets (user-added)
• Handles filtering by keyword
• Manages UI states: idle, loading, success, error
• Supports retry mechanism for failed API calls

API Integration (rocketService.ts)

• Fetches rockets from SpaceX API endpoint: /rockets
• Normalizes API response to consistent field names:
  • flickr_images → images, image (first image)
  • cost_per_launch → costPerLaunch
  • first_flight → firstFlight
• Proper error handling and TypeScript types

Requirements Checklist

• ✅ Functional requirement: List page with rocket info
• ✅ Functional requirement: Detail page with full information
• ✅ Functional requirement: Filtering functionality
• ✅ Functional requirement: Add new rocket
• ✅ Non-functional: SpaceX API integration
• ✅ Non-functional: Routers implementation
• ✅ Non-functional: State management implementation
• ✅ Non-functional: Component-based architecture
• ✅ Non-functional: UI states (loading, error/retry, success)
• ✅ Nice to have: Responsive design

Testing Notes

• Tested rocket list display and filtering
• Tested detail page navigation and data display
• Tested error handling and retry functionality
• Tested add rocket form validation
• Verified responsive layout on different screen sizes

Notes

• Clean and maintainable code structure with proper separation of concerns
• Used TypeScript interfaces for type safety across the application
• All components follow Vue 3 Composition API patterns
• Reusable utility functions for API calls and data normalization