anuanusikan/gui-miniproject

Purpose and Runtime

AlloraCart is a client-side e-commerce SPA for browsing products, managing favorites/cart state, authenticating locally, and completing a checkout flow. It runs as a Vue 3 + TypeScript application built by Vite, styled with Tailwind/PostCSS, and deployed as a static site (Netlify configuration and SPA redirects are present).

• src/main.ts

• src/App.vue

• netlify.toml

• public/_redirects

Application Bootstrap and Navigation

main.ts initializes the Vue application and its framework integrations. App.vue is the persistent application shell; route selection is owned by Vue Router. The router maps the catalog, account, cart, checkout, and support surfaces into page-level components, forming the primary control boundary between navigation and feature implementation.

• src/main.ts

• src/App.vue

• src/router/index.ts

Catalog and Product Domain

Product discovery is driven by a product service and shared product types. Home, category, offer, and detail routes consume this domain, while reusable cards render catalog items. Search and filter stores represent cross-page discovery state; product details also owns image-lightbox behavior and currency presentation.

• src/services/productService.ts

• src/types/product.ts

• src/components/ProductCard.vue

• src/pages/ProductDetailsPage.vue

• src/stores/searchStore.ts

• src/stores/filterStore.ts

Store-Centered Client State

Pinia stores are the application’s principal state boundary. They centralize session/authentication, cart contents and quantities, checkout progress, favorites, theme preference, transient UI state, and toast messages. README-described persistence uses browser localStorage, so these flows are client-local rather than backed by a declared remote auth, payment, or order service.

• src/stores/authStore.ts

• src/stores/cartStore.ts

• src/stores/checkoutStore.ts

• src/stores/favoritesStore.ts

• src/stores/toastStore.ts

Purchase Flow and Access Control

Product actions feed the cart store, with authentication gating before cart additions. Cart pages expose item and quantity management; checkout consumes cart and checkout state, then directs users toward payment/order views. Account routes cover sign-in/up, orders, payment methods, settings, messages, and favorites.

• src/pages/CartPage.vue

• src/pages/CheckoutPage.vue

• src/pages/SignInPage.vue

• src/pages/MyOrdersPage.vue

• src/pages/PaymentMethodsPage.vue

Shared Experience Layer

The global navigation exposes catalog, cart count, profile, auth modal, and dark-mode controls. Reusable layout and feedback components provide consistent site chrome, promotions, categories, and user notifications. Theme behavior is isolated in its own persisted store.

• src/components/Navbar.vue

• src/components/AuthModal.vue

• src/components/ToastHost.vue

• src/components/CategoriesBar.vue

• src/stores/darkModeStore.ts

External Boundaries

Declared infrastructure is Vite’s browser build/runtime and Netlify static hosting. Product access is abstracted behind productService, allowing future API endpoint integration, but the repository tree and README do not establish a backend, payment gateway, or external authentication provider. Browser persistence is a material dependency for auth, cart, favorites, and theme continuity.

• vite.config.ts

• src/services/productService.ts

• netlify.toml

• public/_redirects