|
1 | | -# React + TypeScript + Vite |
| 1 | +# My Collection |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +A client-side web app for managing your Discogs vinyl/CD/DVD/BD collection. Import your Discogs CSV export, enrich it with metadata and price suggestions via the Discogs API, search, sort, and track purchase prices — all stored locally in IndexedDB. |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +**Live:** deployed to GitHub Pages via CI. |
6 | 6 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) |
| 7 | +## Features |
9 | 8 |
|
10 | | -## React Compiler |
| 9 | +- **CSV import** — drag-and-drop or pick your Discogs collection export file |
| 10 | +- **Discogs API enrichment** — fetch cover art, genres, styles, tracklist, community stats, and price suggestions (OAuth 1.0a via Cloudflare Worker proxy) |
| 11 | +- **Search & sort** — filter by artist/title, sort by date added, price, format, folder, etc. |
| 12 | +- **Suggested price** — computed per-item from Discogs price suggestions based on media condition |
| 13 | +- **Purchase price tracking** — inline-editable field with running total |
| 14 | +- **Column customization** — show/hide any of the 25 available columns |
| 15 | +- **Internationalization** — English and Polish (auto-detected) |
| 16 | +- **Offline-first** — all data stored in the browser (IndexedDB via Dexie.js) |
| 17 | +- **Dark mode** — via Tailwind `dark:` variants |
11 | 18 |
|
12 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 19 | +## Tech Stack |
13 | 20 |
|
14 | | -## Expanding the ESLint configuration |
| 21 | +| Layer | Technology | |
| 22 | +|-------|------------| |
| 23 | +| UI | React 19, TypeScript 6, Vite 8, TailwindCSS 4 | |
| 24 | +| Storage | Dexie.js (IndexedDB) | |
| 25 | +| I18n | react-i18next | |
| 26 | +| CSV | PapaParse | |
| 27 | +| Testing | Jest 30, Testing Library, fake-indexeddb | |
| 28 | +| Linting | ESLint 10 (flat config) | |
| 29 | +| CI/CD | GitHub Actions → GitHub Pages | |
15 | 30 |
|
16 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
| 31 | +## Getting Started |
17 | 32 |
|
18 | | -```js |
19 | | -export default defineConfig([ |
20 | | - globalIgnores(['dist']), |
21 | | - { |
22 | | - files: ['**/*.{ts,tsx}'], |
23 | | - extends: [ |
24 | | - // Other configs... |
| 33 | +```bash |
| 34 | +npm install |
| 35 | +npm run dev # start dev server with HMR |
| 36 | +``` |
25 | 37 |
|
26 | | - // Remove tseslint.configs.recommended and replace with this |
27 | | - tseslint.configs.recommendedTypeChecked, |
28 | | - // Alternatively, use this for stricter rules |
29 | | - tseslint.configs.strictTypeChecked, |
30 | | - // Optionally, add this for stylistic rules |
31 | | - tseslint.configs.stylisticTypeChecked, |
| 38 | +Open http://localhost:5173. |
32 | 39 |
|
33 | | - // Other configs... |
34 | | - ], |
35 | | - languageOptions: { |
36 | | - parserOptions: { |
37 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
38 | | - tsconfigRootDir: import.meta.dirname, |
39 | | - }, |
40 | | - // other options... |
41 | | - }, |
42 | | - }, |
43 | | -]) |
44 | | -``` |
| 40 | +## Scripts |
45 | 41 |
|
46 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
| 42 | +| Command | Description | |
| 43 | +|---------|-------------| |
| 44 | +| `npm run dev` | Start Vite dev server | |
| 45 | +| `npm run build` | Type-check + production build | |
| 46 | +| `npm run lint` | Run ESLint | |
| 47 | +| `npm test` | Run all tests | |
| 48 | +| `npm run test:watch` | Run tests in watch mode | |
| 49 | +| `npm run preview` | Preview production build locally | |
47 | 50 |
|
48 | | -```js |
49 | | -// eslint.config.js |
50 | | -import reactX from 'eslint-plugin-react-x' |
51 | | -import reactDom from 'eslint-plugin-react-dom' |
| 51 | +## Project Structure |
52 | 52 |
|
53 | | -export default defineConfig([ |
54 | | - globalIgnores(['dist']), |
55 | | - { |
56 | | - files: ['**/*.{ts,tsx}'], |
57 | | - extends: [ |
58 | | - // Other configs... |
59 | | - // Enable lint rules for React |
60 | | - reactX.configs['recommended-typescript'], |
61 | | - // Enable lint rules for React DOM |
62 | | - reactDom.configs.recommended, |
63 | | - ], |
64 | | - languageOptions: { |
65 | | - parserOptions: { |
66 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
67 | | - tsconfigRootDir: import.meta.dirname, |
68 | | - }, |
69 | | - // other options... |
70 | | - }, |
71 | | - }, |
72 | | -]) |
73 | 53 | ``` |
| 54 | +src/ |
| 55 | + components/ # React UI components (CollectionTable, CSVImport, DiscogsSettings, Layout) |
| 56 | + db/ # Dexie schema, CRUD operations, types |
| 57 | + hooks/ # Custom hooks (useCollection, useCSVImport, useDiscogsFetch, useDiscogsAuth) |
| 58 | + i18n/ # i18next config + EN/PL translations |
| 59 | + services/ # Discogs API client (rate limiting, OAuth) |
| 60 | + utils/ # CSV parser, formatters |
| 61 | +__tests__/ # Jest test suites |
| 62 | +``` |
| 63 | + |
| 64 | +See [AGENTS.md](./AGENTS.md) for detailed architecture documentation. |
0 commit comments