Wuxi (Frontend)

Wuxi is a modern, responsive, and immersive web application designed for hobbyists and collectors to seamlessly curate, organize, and track any multi-media collection—from movies and series to books, comics, or board games. Built upon a robust 2023 Single Page Application (SPA) architecture, Wuxi delivers a high-fidelity user experience featuring advanced grid configurations, comprehensive statistics tracking, and intelligent gamification elements.

This repository hosts the decoupled frontend application, optimized for high performance, modularity, and smooth visual transitions.

---

Core Features & Blueprint

1. Current Stage (MVP)

• Immersive Hero Dashboard: Fluid home navigation featuring full-width media overlays and clean route transitions.
• Dynamic Collection Grid: A responsive media display built natively using Tailwind CSS utilities with automatic grayscale filtering for pending items.
• Composition-Driven Logic: Decoupled asynchronous state management using clean JavaScript Composables to interface seamlessly with polymorphic REST APIs.
• Interactive Modals: Custom, accessible confirmation dialogs styled exclusively with Tailwind CSS, avoiding high-overhead external dependencies.

2. Next-Gen Presentation & Layouts (In Development)

• Multi-View Modes: Fluid toggle mechanisms to transition smoothly between:
  • Compact List View: Optimal for fast text browsing and quick status switching.
  • Grid x4 / Grid x7 Options: Power-user density configurations to scale layout scanning according to screen real estate.
• Advanced Filtering & Full-Text Search:
  • Real-time free text querying across titles and metadata fields.
  • Granular filters by Release/Publication Year, Completion Status, and Curation Type.
  • Focused view isolates for Pending vs. Featured assets.

3. Planned Architecture Expansion (Future Roadmap)

Personalized Space & Multi-Collection Management

• Secure Authentication: Multi-user context handling via JWT tokens, supporting user signup, persistent sessions, and custom user profiles.
• Custom Collections: Move away from a single hardcoded list. Users will be able to spawn, rename, and manage multiple isolated custom folders tailored to different hobbies (e.g., "Studio Ghibli Masterpieces", "Sci-Fi Literary Classics", "Essential Board Games").

Advanced Analytics & Dashboards

• Gamified Collection Progress: Interactive, real-time completion progress bars measuring consumed media metrics versus items left in a collection.
• Achievement System: Unlock digital milestone badges upon completing specific curation criteria (e.g., "Ghibli Completionist", "Auteur Spectator", "Graphic Novel Enthusiast").
• Executive Summary Dashboard: Visual breakdown charts highlighting favorite genres, creators/directors, and release eras.

Granular Review System

• 10-Star Weighted Rating: Precision scoring framework to let users benchmark items beyond generic binary values.
• The "Verdict" System: Quick emotional check-ins featuring simple Like or Dislike toggles to isolate polarizing entries.

AI-Powered Recommendation Engine

• Intelligent Discovery: Microservice integration providing predictive smart recommendations based on current user rating weights and completed collection matrices.

---

Architecture & Stack (2023 Production Standards)

Wuxi utilizes a premium 2023 tech stack curated specifically to maximize rendering speed and ease of maintainability:

• Framework: Vue.js 2.7 (Featuring native Composition API support without compiler overhead).
• Routing: Vue Router 3.6 (Explicit history mode navigation).
• Styling Engine: Tailwind CSS v3.4 + PostCSS 8 (Utilizing JIT compilation for lightweight, performant builds).
• Module Bundler: Webpack 5 via Vue CLI context environments.

Component Design Pattern

The architecture strictly enforces a clean decoupling of layout pages and atomic visual units:

src/
├── views/         # Master Layout Containers mapped to explicit URL routes (Home, Items)
├── components/    # Atomic UI blocks (HeroView, ItemCard, Filters, StatsModals)
└── composables/   # Headless, reusable state machines encapsulating reactive async logic

Getting Started

Prerequisites

Ensure you have Node.js LTS (v18.x or v20.x) and npm installed on your local machine.

Installation

• Clone the repository:

git clone [https://github.com/armandomariscal/wuxi.git](https://github.com/armandomariscal/wuxi.git)
cd wuxi

• Install the verified dependencies:

npm install

• Configure Local Media Asset Storage: Note: Media assets inside src/assets/covers/ are untracked by Git to maintain a lightweight repository foot-print. Ensure your mock files match your API's string names.

---

Development

Launch the Webpack development hot-reloading server:

npm run serve

The application will boot and become accessible at http://localhost:8080/.

Production Compilation

Compile and minify the assets for production deployment:

npm run build

License

This project is open-source software licensed under the MIT License.