Skip to content

Latest commit

 

History

History
69 lines (49 loc) · 1.85 KB

README.md

File metadata and controls

69 lines (49 loc) · 1.85 KB

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