How jakeberggren/udemy-complete-react-developer works
The repository contains two React products. Monsters Rolodex fetches user records, filters them by a search term, and displays matching cards. Crwn Clothing is an e-commerce storefront with home, shop, authentication, and checkout routes; its documented capabilities include Firebase-backed accounts and Google sign-in. The graph shows only call and data-flow relationships supported by sampled source or the README. Several storefront component connections and Firebase internals are not sampled, so those links are left out.
Main entry points: src/App.js Route selection · src/App.js Fetch and filter · firebase.utils.js Firebase operations · authentication.component.jsx Authentication page
Components 28
Monsters Rolodex
- Rolodex entry
monsters-rolodex/src/index.js - Fetch and filter
monsters-rolodex/src/App.js - Search box
monsters-rolodex/src/components/search-box/search-box.component.jsx - Monster cards
monsters-rolodex/src/components/card-list/card-list.component.jsx - JSONPlaceholder users
Storefront
- Storefront entry
crwn-clothing/src/index.js - Route selection
crwn-clothing/src/App.js - Navigation route
crwn-clothing/src/routes/navigation/navigation.component.jsx - Home page
crwn-clothing/src/routes/home/home.component.jsx - Shop page
crwn-clothing/src/routes/shop/shop.component.jsx - Category directory
crwn-clothing/src/components/directory/directory.component.jsx - Category item
crwn-clothing/src/components/category-item/category-item.component.jsx - Product card
crwn-clothing/src/components/product-card/product-card.component.jsx
Authentication
- Authentication page
crwn-clothing/src/routes/authentication/authentication.component.jsx - Sign-in form
crwn-clothing/src/components/sign-in-form/sign-in-form.component.jsx - Sign-up form
crwn-clothing/src/components/sign-up-form/sign-up-form.component.jsx - User state
crwn-clothing/src/contexts/user.context.jsx
Commerce State
- Products state
crwn-clothing/src/contexts/products.context.jsx - Shop data
crwn-clothing/src/shop-data.json - Cart state
crwn-clothing/src/contexts/cart.context.jsx - Cart icon
crwn-clothing/src/components/cart-icon/cart-icon.component.jsx - Cart dropdown
crwn-clothing/src/components/cart-dropdown/cart-dropdown.component.jsx - Cart item
crwn-clothing/src/components/cart-item/cart-item.component.jsx - Checkout page
crwn-clothing/src/routes/checkout/checkout.component.jsx - Checkout item
crwn-clothing/src/components/checkout-item/checkout-item.component.jsx
Firebase Backend
- Firebase operations
crwn-clothing/src/utils/firebase/firebase.utils.js - Firebase
Other components
- Shopper / visitor
Connections 21
- Shopper / visitor → Rolodex entry: opens
- Rolodex entry → Fetch and filter: renders
- Fetch and filter → JSONPlaceholder users: fetches users
- Fetch and filter → Search box: renders
- Search box → Fetch and filter: search input
- Fetch and filter → Monster cards: passes filtered data
- Shopper / visitor → Storefront entry: opens
- Storefront entry → Route selection: renders
- Route selection → Navigation route: routes through
- Route selection → Home page: routes to
- Route selection → Shop page: routes to
- Route selection → Authentication page: routes to
- Route selection → Checkout page: routes to
- Authentication page → Sign-in form: renders
- Authentication page → Sign-up form: renders
- Products state → Shop data: loads products
- Sign-in form → Firebase operations: requests sign-in
- Sign-up form → Firebase operations: creates account
- User state → Firebase operations: subscribes to auth
- User state → Firebase operations: creates user record
- Firebase operations → Firebase: uses Firebase