🔎 Saras Finance – Search UI Tool

---

📖 About The Project

Saras Finance – Search UI Tool is a modular and interactive search interface built using Vue 3, TypeScript, Vite, and TailwindCSS.

The application dynamically fetches and displays search results as users type, providing a responsive and intuitive user experience with pagination, dark mode support, loading states, and reusable components.

This project follows modern Vue best practices including Composition API, reusable components, props/events communication, and composables.

---

✨ Key Features

• Dynamic Search – Results update as the user types (debounced input).
• Simulated API Calls – Mimics real-world latency.
• Paginated Results – Navigate through result pages.
• Reusable Components – Clean modular structure.
• Dark Mode Toggle – Persistent theme preference.
• Clickable Results – Expand individual search result.
• Loader State – Visual feedback while fetching.
• Responsive Design – Works on desktop and mobile.

---

📁 Directory Structure

Directory structure:
└── be-a-guptaji-saras-finance-assignment/
    ├── README.md
    ├── index.html
    ├── package.json
    ├── vite.config.ts
    ├── tsconfig.json
    └── src/
        ├── App.vue
        ├── main.ts
        ├── assets/
        │   └── style.css
        ├── components/
        │   ├── Header.vue
        │   ├── Loader.vue
        │   ├── NoResult.vue
        │   ├── Pagination.vue
        │   ├── SearchBar.vue
        │   ├── SearchResultItem.vue
        │   ├── SearchResultList.vue
        │   └── ToggleButton.vue
        ├── composables/
        │   └── useSearch.ts
        └── types/
            └── search.ts

---

🏗️ Architecture

• SearchBar.vue – Manages input, state, and API calls.
• SearchResultList.vue – Displays list of results.
• SearchResultItem.vue – Expanded result view.
• Loader.vue / NoResult.vue – Conditional UI states.
• Pagination.vue – Handles page navigation.
• useSearch.ts – Composable for fetching and filtering data.

---

🛠 Built With

• Frontend: Vue 3 (Composition API)
• Language: TypeScript
• Bundler: Vite
• Styling: TailwindCSS
• State Handling: Vue Reactivity + Composables
• Tooling: Prettier, Vue DevTools

---

⚙️ Getting Started

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm

Installation

git clone https://github.com/your-username/be-a-guptaji-saras-finance-assignment.git cd be-a-guptaji-saras-finance-assignment pnpm install

Run Development Server

pnpm dev

Open: http://localhost:5173

Build for Production

pnpm build

---

🚀 Scaling & Performance Improvements

• Replace local JSON with a real API service.
• Implement request cancellation (AbortController).
• Add server-side pagination.
• Introduce caching layer.
• Add infinite scrolling.
• Use centralized state management (Pinia).
• Optimize search with debouncing/throttling.
• Add accessibility enhancements (ARIA roles, keyboard navigation).

---

📜 License

MIT License © 2026

---

📬 Contact

Developer: Aryan Baadlas