Vue 3 + Vite

Shopping App – Interview Project

This is a basic shopping application created as part of a job interview exercise. The project demonstrates front-end development skills using Vue.js with responsive design and simple interactive features.

Features

• User Authentication: Users can log in to access the application.
• Product Catalog: Display of items dynamically loaded from mock data.
• Loading Screen: Shows progress while fetching data.
• Responsive Design: Works seamlessly on both mobile devices and desktop screens.
• State Management: Uses Pinia for centralized state management.
• Routing: Vue Router is implemented for navigation between views.
• Component-Based Structure: Modular architecture for scalability and maintainability.

Technology Stack

• Frontend Framework: Vue 3
• State Management: Pinia
• Routing: Vue Router
• Styling: TailwindCSS
• Build Tool: Vite
• JavaScript/TypeScript: Modern ES modules, optional TS support

Project Structure

.vscode/
node_modules/
public/
│   └── images/
src/
│   ├── assets/          # Images, icons, and other static assets
│   ├── components/      # Reusable Vue components
│   ├── router/          # Vue Router configuration
│   ├── stores/          # Pinia stores for state management
│   └── views/           # Page views
│       └── basicobject/ # Page component

• .vscode/ – Editor configuration files.
• node_modules/ – Project dependencies installed via npm.
• public/ – Static files served directly by Vite.
• src/ – Main source code of the application.

Installation

1. Clone the repository:

git clone <repository-url>
cd shopping-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The app will be available at http://localhost:5173 (default Vite port).

Build for Production

npm run build

Notes

• The project is intended as a demonstration of Vue.js skills.
• Mock data is used for products; no backend integration is included.
• Focuses on basic interactivity, responsive layout, and component-based architecture.