171 lines
4.2 KiB
Markdown
171 lines
4.2 KiB
Markdown
# studspider-status
|
|
|
|
`studspider-status` is the frontend of `studspider`. An application used to track a square inventory and display changes over time, Brickset.com, and a SQL database to track and visualize LEGO inventory changes.
|
|
|
|
## 🛠️ Technology Stack
|
|
|
|
### Frontend
|
|
- **Vue 3**: Modern reactive JavaScript framework with Composition API
|
|
- **Vuetify 3**: Material Design component library
|
|
- **Vue Router**: Client-side routing for single-page application
|
|
- **Pinia**: State management solution
|
|
- **Vite**: Next-generation frontend build tool
|
|
- **ApexCharts/Vuetify Charts**: Data visualization
|
|
|
|
### Backend Integration
|
|
- **Studspider**: Python
|
|
|
|
## 📦 Installation
|
|
|
|
### Prerequisites
|
|
- Node.js (v16 or higher)
|
|
- pnpm (recommended) or npm
|
|
- Access to Square API credentials
|
|
- SQL database connection
|
|
|
|
### Setup
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd studspider-status
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
3. Configure environment variables:
|
|
Create a `.env` file in the root directory:
|
|
```env
|
|
VITE_DATABASE_URL=your_database_connection_string
|
|
```
|
|
|
|
4. Start the development server:
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
5. Build for production:
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
## 🚀 Usage
|
|
|
|
### Development
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
Access the application at `http://localhost:5173`
|
|
|
|
### Production Build
|
|
```bash
|
|
pnpm build
|
|
pnpm preview
|
|
```
|
|
|
|
### Linting
|
|
```bash
|
|
pnpm lint
|
|
```
|
|
|
|
## 📊 Features Breakdown
|
|
|
|
### Dashboard View
|
|
- **Recent Changes Panel**: Real-time list of inventory modifications with timestamps
|
|
- **Statistics Cards**: Quick metrics showing total sets, total themes, and weekly changes
|
|
- **Theme Distribution Chart**: Visual pie chart displaying inventory breakdown by LEGO theme
|
|
|
|
### Navigation
|
|
- **Dashboard**: Main inventory overview
|
|
- **Review**: Inventory review and reconciliation
|
|
- **Statistics**: Detailed analytics and reporting
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
studspider-status/
|
|
├── src/
|
|
│ ├── assets/ # Static assets
|
|
│ ├── components/ # Reusable Vue components
|
|
│ │ ├── AppFooter.vue
|
|
│ │ ├── HelloWorld.vue
|
|
│ │ └── DynamicPieChart.vue
|
|
│ ├── layouts/ # Page layout templates
|
|
│ │ └── default.vue
|
|
│ ├── pages/ # Application pages (auto-routed)
|
|
│ │ ├── index.vue # Dashboard home page
|
|
│ │ ├── demo.vue # Component demo page
|
|
│ │ ├── stats.vue # Statistics page
|
|
│ │ └── review.vue # Review page
|
|
│ ├── plugins/ # Vue plugins (Vuetify, Router, etc.)
|
|
│ │ ├── index.js
|
|
│ │ └── vuetify.js
|
|
│ ├── router/ # Vue Router configuration
|
|
│ │ └── index.js
|
|
│ ├── stores/ # Pinia state management
|
|
│ │ ├── app.js
|
|
│ │ └── index.js
|
|
│ ├── styles/ # Global styles and SCSS
|
|
│ │ └── settings.scss
|
|
│ ├── App.vue # Root application component
|
|
│ └── main.js # Application entry point
|
|
├── public/ # Public static files
|
|
├── .env # Environment variables (not committed)
|
|
├── package.json # Project dependencies
|
|
├── vite.config.mjs # Vite configuration
|
|
└── README.md # This file
|
|
```
|
|
|
|
|
|
### Adding New Pages
|
|
1. Create a new `.vue` file in `src/pages/`
|
|
2. Add route metadata at the bottom:
|
|
```vue
|
|
<route lang="yaml">
|
|
name: yourpage
|
|
layout: default
|
|
</route>
|
|
```
|
|
3. Add navigation item in `App.vue`:
|
|
```vue
|
|
<v-list-item
|
|
prepend-icon="mdi-your-icon"
|
|
title="Your Page"
|
|
value="yourpage"
|
|
to="/yourpage"
|
|
/>
|
|
```
|
|
|
|
### Modifying Themes
|
|
Edit the color palette in component files or update Vuetify theme settings in `src/plugins/vuetify.js`.
|
|
|
|
|
|
### Development Server Won't Start
|
|
```bash
|
|
# Clear node modules and reinstall
|
|
rm -rf node_modules
|
|
pnpm install
|
|
|
|
# Clear Vite cache
|
|
rm -rf .vite
|
|
```
|
|
|
|
### Routing Not Working
|
|
- Ensure all pages have proper route metadata
|
|
- Check that `unplugin-vue-router` is configured in `vite.config.mjs`
|
|
- Verify the layout system is properly set up
|
|
|
|
## 📝 License
|
|
|
|
Mozilla Public License 2.0
|
|
|
|
## 📧 Support
|
|
|
|
For issues and questions, please open an issue on the GitHub repository.
|
|
|
|
---
|
|
|
|
Built with ❤️ using Vue 3 and Vuetify 3 |