feat: spacex-rocket

[rizkiagus]

🚀 Rocket App – Feature Overview

Rocket List

Users can view a list of rockets fetched from the SpaceX API.
Each rocket is displayed in a card format showing:

• Rocket image
• Rocket name
• Short description

---

Search & Filter

Users can filter rockets using a search input:

• Real-time filtering based on rocket name
• Instant UI update while typing
• Pagination resets automatically on search

---

Add New Rocket

Users can add a new rocket through a form dialog.

Form Fields:

• Rocket name
• Description
• Image URL (optional)
• Cost per launch (optional)
• Country (optional)
• First flight date (optional)

Features:

• Form validation (required fields)
• Default dummy image if no image is provided
• Newly added rockets appear instantly in the list

---

Rocket Detail Page

Users can click a rocket card to view detailed information:

• Full image
• Rocket name
• Full description
• Cost per launch
• Country
• First flight date

Additional Behavior:

• Skeleton loader while fetching data
• Error message with retry button if request fails
• Supports both API data and locally added rockets

---

Pagination (Client-side)

The rocket list uses local pagination:

• Fixed number of items per page
• Navigation between pages
• Current page indicator (e.g., Page 1 / 2)
• Updates dynamically when filtering or adding data

---

Loading State

Skeleton loading is implemented to improve UX:

• Displayed while fetching data
• Prevents blank screens and layout shifts

---

Error Handling

Error states are handled gracefully:

• User-friendly error message
• Retry button to reload data
• Applied on both list and detail pages

---

Image Handling

• Default placeholder image if none is provided
• Fallback image for broken URLs

---

Summary

This application demonstrates:

• API integration
• State management with Pinia
• Component-based architecture
• Form handling and validation
• Pagination and filtering
• Loading and error state handling