Profile Deck

This is a simple Vue 3 + Vite demo project that displays a deck of user profiles. It features user cards, a favorites system, pagination, and modal views. The project uses Tailwind CSS for styling and demonstrates component-based architecture with composables and a basic store.

Features

• Pagination for large user lists
• Browse users in Card or List view.
• Paginated user list with configurable page size (10 / 30 / 50, default 30)
• Add/remove users to/from favorites
• View detailed user information in a modal.
• Responsive design with Tailwind CSS
• Favorites persist across page reloads (stored by user UUID).
• Navigation with Vue Router.
• State management with Pinia.

Getting Started

Don't forget to install dependencies before running commands.

Script	Description
dev	Starts the Vite development server for local development.
build	Builds the project for production using Vite.
preview	Previews the production build locally with Vite.
lint	Runs ESLint on all .ts, .js, .cjs, and .vue files to check for code quality and style issues.
lint:fix	Runs ESLint with the --fix option to automatically fix linting issues in .ts, .js, .cjs, and .vue files.

Tech Stack

• Vue 3 + Composition API — Progressive JavaScript framework for building user interfaces.
• Vue Router — Official router for Vue.js for navigation and routing.
• Vite — Fast frontend build tool and development server.
• Pinia — State management library for Vue.
• TypeScript — Typed superset of JavaScript for safer code.
• Axios — Promise-based HTTP client for API requests.
• Pug — Template engine for generating HTML markup in a concise syntax.
• Tailwind CSS — Utility-first CSS framework for rapid UI development.
• ESLint — Pluggable linter for identifying and fixing code issues.

Folder Structure

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── public
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── Navbar.vue
│   │   ├── Paginations.vue
│   │   ├── PanelView.vue
│   │   ├── Spinner.vue
│   │   ├── UserCard.vue
│   │   ├── UserGrid.vue
│   │   └── UserModal.vue
│   ├── composables
│   │   ├── useFavorites.ts
│   │   └── useUsers.ts
│   ├── main.js
│   ├── pages
│   │   ├── Favorites.vue
│   │   └── Home.vue
│   ├── router
│   │   └── index.ts
│   ├── store
│   │   └── useUserStore.ts
│   ├── style
│   │   └── main.css
│   ├── types
│   │   └── user.ts
│   └── utils
│       └── stringToTitleCase.ts
├── tailwind.config.cjs
├── tsconfig.json
└── vite.config.js