How modeba/project_midterm works
GITA Midterm Store is a Next.js shopping app. Shoppers browse a product catalog, open product details, add items, and manage quantities and totals in a session-only Redux cart; they can also register, log in, restore a session, and view or leave their profile. The graph includes the documented registration and authentication capabilities as well as the sampled product and cart flow. Edges reflect README statements or indexed imports and shown calls; some page internals are unsampled, so their detailed behavior is not inferred.
Main entry points: AuthContext.js Authentication context · layout.js Root layout · Products.js Product fetching · cartSlice.js Cart state and selectors
Components 24
Product browsing
- Catalog page
src/app/page.js - Product fetching
src/components/Products.js - Product card
src/components/ProductCard.js - Product details page
src/app/products/[id]/page.js - Product details
src/components/ProductDetails.js
Cart management
- Cart page
src/app/cart/page.js - Add-to-cart button
src/components/AddToCartButton.js - Cart state and selectors
src/store/cartSlice.js - Redux store
src/store/store.js - Store provider
src/store/StoreProvider.js
Accounts and sessions
- Login page
src/app/login/page.js - Registration page
src/app/register/page.js - Profile page
src/app/profile/page.js - Authentication context
src/context/AuthContext.js - User API service
src/services/users.js - Token storage
src/services/auth-storage.js - Login validation
src/validation/login.js - Registration validation
src/validation/registration.js
Application shell
- Root layout
src/app/layout.js - Navigation bar
src/components/Navbar.js - Footer
src/components/Footer.js
Other components
- Shopper
- Fake Store API
- DummyJSON API
Connections 32
- Shopper → Catalog page: browses
README.md - Catalog page → Product fetching: fetches products
src/app/page.js - Catalog page → Product card: renders
src/app/page.js - Product fetching → Fake Store API: requests catalog
README.md - Product card → Add-to-cart button: renders
src/components/ProductCard.js - Shopper → Product details page: opens product
README.md - Product details page → Product details: renders
src/app/products/[id]/page.js - Product details → Product fetching: fetches product
src/components/ProductDetails.js - Product details → Add-to-cart button: renders
src/components/ProductDetails.js - Product fetching → Fake Store API: requests details
README.md - Add-to-cart button → Cart state and selectors: dispatches add
src/components/AddToCartButton.js - Shopper → Cart page: manages cart
README.md - Cart page → Cart state and selectors: reads items and totals
src/app/cart/page.js - Store provider → Redux store: provides store
src/store/StoreProvider.js - Redux store → Cart state and selectors: registers reducer
src/store/store.js - Shopper → Login page: signs in
README.md - Login page → Authentication context: calls login
src/app/login/page.js - Login page → Login validation: validates form
src/app/login/page.js - Shopper → Registration page: registers account
README.md - Registration page → User API service: submits registration
src/app/register/page.js - Registration page → Registration validation: validates form
src/app/register/page.js - Shopper → Profile page: views profile
README.md - Profile page → Authentication context: reads session
src/app/profile/page.js - Authentication context → User API service: authenticates and fetches user
src/context/AuthContext.js - Authentication context → Token storage: restores and saves token
src/context/AuthContext.js - User API service → DummyJSON API: requests auth and registration
src/services/users.js - Root layout → Navigation bar: renders
src/app/layout.js - Root layout → Footer: renders
src/app/layout.js - Root layout → Store provider: provides Redux
src/app/layout.js - Root layout → Authentication context: provides auth
src/app/layout.js - Navigation bar → Cart state and selectors: reads cart count
src/components/Navbar.js - Navigation bar → Authentication context: reads user
src/components/Navbar.js