How vladsandbox/frontend_sparklory works
Sparklory is a jewelry-store e-commerce frontend. A customer enters through the routed app, browses and filters the catalog, inspects a product, manages cart or wishlist state, then proceeds through delivery and payment to order confirmation; authenticated customers can also manage account details and order history. The graph includes the major README capabilities and the Redux state/thunk layer. Sampled source confirms routing, startup authentication, payment-form dispatch, and guest/authenticated favorite handling; unsampled feature wiring and backend calls are not asserted.
Main entry points: App.tsx Router and app · Wishlist/index.tsx Wishlist · Catalog/index.tsx Catalog and filters · Profile/index.tsx Customer profile
Components 23
App and browsing
- Router and app
src/App.tsx - Home and content
src/pages/Home/index.tsx - Catalog and filters
src/pages/Catalog/index.tsx - Product details
src/pages/Product/index.tsx
Identity and profile
- Authentication
src/pages/Auth/Login/index.tsx - OAuth callback
src/pages/Auth/OAuth/OAuthCallback.tsx - Customer profile
src/pages/Profile/index.tsx - Order history
src/pages/Profile/OrdersHistory/index.tsx
Shopping and checkout
- Shopping cart
src/pages/ShoppingCart/index.tsx - Wishlist
src/pages/Wishlist/index.tsx - Checkout
src/pages/OrderCheckout/index.tsx - Payment form
src/pages/OrderCheckout/Payment/usePaymentForm.tsx - Order confirmation
src/pages/OrderCheckout/OrderConfirmation/index.tsx
State and services
- Redux store
src/store/index.tsx - Product state
src/store/slices/productsSlice.ts - User state
src/store/slices/userSlice.ts - Cart state
src/store/slices/cartSlice.ts - Wishlist state
src/store/slices/wishlistSlice.ts - Payment state
src/store/slices/PaymentSlice.ts - Payment actions
src/store/thunks/paymentThunk.ts - HTTP client
src/api/axios.api.ts - Browser storage
src/utils/localStorage.ts
Other components
- Customer
Connections 21
- Customer → Router and app: uses
- Router and app → Home and content: routes
- Router and app → Catalog and filters: routes
- Router and app → Product details: routes
- Router and app → Authentication: routes
- Router and app → OAuth callback: routes
- Router and app → Customer profile: routes
- Router and app → Order history: routes
- Router and app → Shopping cart: routes
- Router and app → Wishlist: routes
- Router and app → Checkout: routes
- Router and app → Order confirmation: routes
- Router and app → Redux store: dispatches auth check
- Catalog and filters → Product state: uses state
- Shopping cart → Cart state: uses state
- Wishlist → Wishlist state: uses state
- Customer profile → User state: uses state
- Checkout → Payment form: collects payment
- Payment form → Payment actions: dispatches
- Payment actions → Payment state: updates
- Wishlist → Browser storage: guest persistence