feat: Implement SpaceX Rocket Explorer

README.md

@@ -1,36 +1,68 @@
-# Allo Bank Frontend Technical Assignment
+# SpaceX Explorer - Allo Bank Frontend Challenge
 
-In this assignment, you’re assigned to create a website that displays rockets. This website only has two screens: rocket list screen and rocket detail screen. Here are the requirements:
+A modern frontend application built with **Vue**, **TypeScript**, and **Vuetify** to explore SpaceX rockets. This project demonstrates state management, component architecture, routing, and unit testing.
 
-### Functional Requirements
-- As a user, I want to see a list of rockets in the rocket list screen (Show each rocket image, rocket name, and rocket description)
-- As a user, I want to be able to filter the rockets in the rocket list screen
-- As a user, I want to be able to add the new rocket in the rocket list screen
-- As a user, I want to be able to see the rocket detail by clicking a rocket in the rocket list screen (Show rocket image, rocket name, rocket description, cost per launch, country, first flight)
+## Tech Stack
 
-### Non-Functional Requirements
-- Use Space-X API (https://github.com/r-spacex/SpaceX-API) for getting the rocket data
-- Implement routers
-- Implement state management
-- Implement lifecycles
-- Create components based will be + points
-- UI states (Loading, Fail/Retry, and Success)
-- Show loading when waiting response from API
-- If an error occurred, user can retry by pressing retry button
-- Show result when get response from API
+- **Framework:** Vue 3 + TypeScript
+- **Build Tool:** Vite
+- **UI Library:** Vuetify
+- **State Management:** Pinia
+- **Routing:** Vue Router
+- **HTTP Client:** Axios
+- **Testing:** Vitest + Vue Test Utils
+- **Linting:** ESLint + Prettier
 
-### Nice to have characteristics
-Responsive design
-You don’t need to worry about the detailed design, we’re not interested in your artistic prowess (for now), put your efforts on creating a readable/clean/maintainable source code.
+---
 
-### Submission
+## Features
 
-1.  **Fork** this repository.
+### Functional
 
-2.  Implement your solution on a dedicated feature branch (e.g., `feat/allo-spacex`).
+- ✅ **Rocket List:** Displays rockets with images, names, and descriptions.
+- ✅ **Search/Filter:** Real-time filtering of rockets by name.
+- ✅ **Rocket Details:** Dedicated view showing cost, country, first flight date, and full description.
+- ✅ **Add Rocket:** Users can add custom rockets via a form with validation (persisted in local state).
+- ✅ **Smart Images:** Uses user-provided URLs or falls back to high-quality Unsplash placeholders.
 
-3.  When complete, submit your solution via a **Pull Request (PR)** back to the main repository.
-
-4.  Please complete the form to submit your technical test: [Click Here](https://forms.gle/nZKQ2EjTCPfAKHog7)
+### Non-Functional
 
-Good luck with your assignment! Don't hesitate to contact us if you have any questions about the assignment process.
+- ✅ **State Management:** Global store (Pinia) handles data fetching and local updates.
+- ✅ **Responsive Design:** Fully responsive grid layout using Vuetify.
+- ✅ **Error Handling:** Robust loading states and error retry mechanisms.
+- ✅ **Unit Testing:** Tests for Store logic and Component rendering.
+
+---
+
+## Setup & Installation
+
+**Prerequisites:** Node.js (v18+ recommended)
+
+1.  **Clone the repository**
+
+    ```bash
+    git clone https://github.com/inganta23/allo-frontend-test.git
+    cd allo-spacex
+    ```
+
+2.  **Install dependencies**
+
+    ```bash
+    npm install
+    ```
+
+3.  **Run Development Server**
+    ```bash
+    npm run dev
+    ```
+    Open [http://localhost:3000](http://localhost:3000) to view the app.
+
+---
+
+## Running Tests
+
+This project uses **Vitest** for unit testing.
+
+```bash
+npm run test
+```

components.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    RocketCard: typeof import('./src/components/RocketCard.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to Vuetify 3</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rockets</title>
   </head>
   <body>
     <div id="app"></div>