fix readme
This commit is contained in:
C committed
1 parent
d6e2b497fa
commit
a7620903da
2 files changed
+148
-163
No files matched your search
@@ -1,170 +1,14 @@
|
||||
# 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:
|
||||
```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
|
||||
```
|
||||
`studspider-status` is the frontend of `studspider`.
|
||||
|
||||
|
||||
### 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"
|
||||
/>
|
||||
```
|
||||
built with
|
||||
|
||||
### Modifying Themes
|
||||
Edit the color palette in component files or update Vuetify theme settings in `src/plugins/vuetify.js`.
|
||||
- vue 3
|
||||
- vuetify
|
||||
- apexcharts
|
||||
|
||||
license
|
||||
|
||||
### 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
|
||||
- MPL 2.0
|
||||
Reference in new issue
Block a user