How ditero22/portfolio_frontend works
dtro Portfolio is a React single-page portfolio with public-facing content and a protected admin interface. Visitors browse portfolio sections and dynamic content; administrators sign in, manage content and settings, and publish resume versions. The frontend calls a separate Express/Prisma backend through its API client. The graph preserves major documented capabilities, but some feature implementations were not sampled, so their internal calls are not inferred.
Main entry points: App.tsx App router · api.ts API client · landingPage Landing page · projects Projects
Components 20
Application and access
- App router
src/App.tsx - Authentication
src/features/auth - Protected routes
src/shared/ProtectedRoute.tsx
Public portfolio
- Landing page
src/features/public/landingPage - Portfolio sections
src/features/public - Public blog
src/features/public/blog - Projects
src/features/public/projects - Experience
src/features/public/experience - Resource library
src/features/public/resources - Managed portfolio content
src/features/public/portfolioContent/services/portfolioContent.service.ts - Public resume
src/features/public/resume
Admin management
- Admin dashboard
src/features/admin/dashboard.tsx - Content management
src/features/admin/manage - Blog management
src/features/admin/manage/blog/pages/BlogManagement.tsx - Settings and resume
src/features/admin/manage/settings
API and shared services
- API client
src/shared/api.ts - API transport
src/shared/apiTransport.ts
Other components
- Visitor
- Administrator
- Express API and Prisma
Connections 27
- Visitor → App router: opens
src/App.tsx - Administrator → App router: opens
src/App.tsx - App router → Authentication: provides auth
src/App.tsx - App router → Protected routes: guards admin routes
src/App.tsx - App router → Landing page: routes to
src/App.tsx - App router → Portfolio sections: routes to
src/App.tsx - App router → Public blog: routes to
src/App.tsx - App router → Projects: routes to
src/App.tsx - App router → Experience: routes to
src/App.tsx - App router → Resource library: routes to
src/App.tsx - App router → Admin dashboard: routes to
src/App.tsx - App router → Content management: routes to
src/App.tsx - App router → Blog management: routes to
src/App.tsx - App router → Settings and resume: routes to
src/App.tsx - Protected routes → Authentication: checks session
src/shared/ProtectedRoute.tsx - Landing page → Projects: loads preview
src/features/public/landingPage/hooks/usePortfolioPreview.ts - Landing page → Experience: loads preview
src/features/public/landingPage/hooks/usePortfolioPreview.ts - Landing page → Managed portfolio content: loads previews
src/features/public/landingPage/hooks/useLandingContentPreview.ts - Resource library → Managed portfolio content: loads resources
src/features/public/resources/hooks/useResources.ts - Blog management → API client: requests API
- Settings and resume → API client: requests API
src/features/admin/manage/settings/services/settings.service.ts - Managed portfolio content → API client: requests API
src/features/public/portfolioContent/services/portfolioContent.service.ts - Projects → API client: requests API
src/features/public/projects/services/projects.service.ts - Experience → API client: requests API
src/features/public/experience/services/experience.service.ts - API client → API transport: delegates requests
src/shared/api.ts - API client → Express API and Prisma: sends API traffic
README.md - Public resume → Express API and Prisma: downloads resume