diff --git a/BUILDING.md b/BUILDING.md new file mode 100644 index 0000000..d5e7518 --- /dev/null +++ b/BUILDING.md @@ -0,0 +1,141 @@ +## 📦 Installation + +### Prerequisites +- Node.js (v16 or higher) +- pnpm (recommended) or npm +- SQL database connection + +### Setup + +1. Clone the repository: +```bash +git clone +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 + +name: yourpage +layout: default + +``` +3. Add navigation item in `App.vue`: +```vue + +``` + +### 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 diff --git a/README.md b/README.md index 1c04618..d2c258a 100644 --- a/README.md +++ b/README.md @@ -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 -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 - -name: yourpage -layout: default - -``` -3. Add navigation item in `App.vue`: -```vue - -``` +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 \ No newline at end of file +- MPL 2.0 \ No newline at end of file