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
• SQL database connection

Setup

1. Clone the repository:

git clone <repository-url>
cd studspider-status

2. Install dependencies:

pnpm install

3. Configure environment variables: Create a .env file in the root directory:

VITE_DATABASE_URL=your_database_connection_string

4. Start the development server:

pnpm dev

5. Build for production:

pnpm build

🚀 Usage

Development

pnpm dev

Access the application at http://localhost:5173

Production Build

pnpm build
pnpm preview

Linting

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:

<route lang="yaml">
name: yourpage
layout: default
</route>

3. Add navigation item in App.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

# 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