Handling large data set with Vue 3

A web application built with Vue 3 that displays and manages a large dataset

Project Setup

yarn

Compile and Hot-Reload for Development

yarn dev

Run Unit Tests with Vitest

yarn test:unit

Check Unit Test coverage

yarn test:unit-coverage

Deployed Version

This application is deployed on Vercel and can be accessed here

About the project

Why was Vue 3 chosen over Vue 2?

• Coming from a React background, the organization of component logic in Vue 3 with Composition API felt closer to the usage of functional components and hooks in React.
• Better typescript support
• Why not start with the latest, especially when you are new to the framework.

Architectural decisions

• Implemented modular, component-based architecture with Typescript.
• Leveraged Composition API for better and readable code organization
• Handled State management using Pinia for centralized data fetching and storage for users.
• Used the below folder structure for better code navigation

├── src
│   ├── components
│   │   ├── common
│   │   │   ├── Search.vue
│   │   │   └── Table.vue
│   │   └── UserList.vue
│   ├── constants
│   ├── interfaces
│   ├── router
│   ├── services
│   ├── stores
│   ├── utilities
│   ├── views

• Separate components for Search and Table for component reusability and separation of concerns.
• Different folders for different parts of the code to ensure that related functionalities are grouped together.

Documentation

Complete documentation can be viewed here