feat: SpaceX Rocket Explorer - untungtanujaya

[untungtanujaya]

Allo Bank Frontend Technical Assignment

Summary

A fully functional Vue 3 + Vuetify 3 + TypeScript web application that displays SpaceX rockets with list and detail views, powered by the SpaceX API.

Features Implemented

Functional Requirements

• ✅ Rocket List Screen - Displays all rockets with image, name, and description via RocketCard component
• ✅ Filter Rockets - Real-time search/filter by rocket name or description using Pinia reactive getter
• ✅ Add New Rocket - Modal dialog (AddRocketDialog.vue) to add rockets locally to the store
• ✅ Rocket Detail Screen - Click-through to detail page showing image carousel, name, description, cost per launch, country, and first flight date

Non-Functional Requirements

• ✅ SpaceX API - Integrated with https://api.spacexdata.com/v4/rockets via Axios
• ✅ Router - File-based routing via unplugin-vue-router (/ for list, /rocket/:id for detail)
• ✅ State Management - Pinia store (useRocketStore) managing rockets, loading, error, and search state
• ✅ Lifecycle - onMounted hooks trigger data fetching; computed properties for reactive filtering
• ✅ Component-Based - Reusable RocketCard, AddRocketDialog components
• ✅ UI States - Loading spinner (v-progress-circular), Error alert with Retry button, Success grid display

Tech Stack

• Vue 3 (Composition API + <script setup>)
• Vuetify 3 (Material Design components)
• Pinia (State Management)
• Axios (HTTP Client)
• TypeScript
• Vite