How vectokse/react-mini-projects works
This repository is a React mini-project showcase with a landing page and two implemented applications. Users can browse project cards, manage a grocery list, or open a responsive sidebar demo. The grocery app keeps list state in its root component and passes actions and derived totals to UI components; the sidebar app shares open/closed state through context. The README also lists shopping cart and cocktail search as planned projects, but no corresponding source directories appear in the tree. Some component wiring is inferred from names and the unsampled gallery implementation is not verified.
Main entry points: src/App.jsx Grocery App · src/App.jsx Showcase App · src/App.jsx Sidebar App · ProjectGallery.jsx Project Gallery
Components 21
Project Showcase
- Showcase Entry
home/src/main.jsx - Showcase App
home/src/App.jsx - Header
home/src/components/Header.jsx - Project Gallery
home/src/components/ProjectGallery.jsx - Project Cards
home/src/components/ProjectCard.jsx - Project Data
home/src/data/projects.js - Footer
home/src/components/Footer.jsx
Grocery List
- Grocery Entry
apps/01-grocery-list/src/main.jsx - Grocery App
apps/01-grocery-list/src/App.jsx - New Product Form
apps/01-grocery-list/src/components/NewProductForm.jsx - List Summary
apps/01-grocery-list/src/components/ListSummary.jsx - Product List
apps/01-grocery-list/src/components/ProductList.jsx - Product Card
apps/01-grocery-list/src/components/ProductCard.jsx
Sidebar Demo
- Sidebar Entry
apps/02-sidebar/src/main.jsx - Sidebar App
apps/02-sidebar/src/App.jsx - Sidebar Context
apps/02-sidebar/src/context/SideBarContext.js - Sidebar Navigation
apps/02-sidebar/src/components/SideBar/SideBar.jsx - Navigation Menu
apps/02-sidebar/src/components/SideBar/NavMenu.jsx - Main View
apps/02-sidebar/src/components/Main.jsx - Toggle Button
apps/02-sidebar/src/components/ToggleButton.jsx
Other components
- Visitor
Connections 24
- Visitor → Showcase Entry: opens showcase
- Showcase Entry → Showcase App: renders
- Showcase App → Header: renders
- Showcase App → Project Gallery: renders
- Showcase App → Footer: renders
- Project Gallery → Project Data: reads projects
- Project Gallery → Project Cards: renders cards
- Visitor → Grocery Entry: opens app
- Grocery Entry → Grocery App: renders
- Grocery App → New Product Form: passes add action
- New Product Form → Grocery App: submits product
- Grocery App → List Summary: passes totals
- Grocery App → Product List: passes products and actions
- Product List → Product Card: renders items
- Product Card → Product List: fires item actions
- Visitor → Sidebar Entry: opens app
- Sidebar Entry → Sidebar App: renders routes
- Sidebar App → Sidebar Context: provides state
- Sidebar App → Sidebar Navigation: renders
- Sidebar App → Main View: renders
- Sidebar Navigation → Sidebar Context: reads menu state
- Sidebar Navigation → Navigation Menu: renders navigation
- Main View → Sidebar Context: reads and updates state
- Main View → Toggle Button: passes toggle action