How shelcia/dynamic-portfolio works
Dynamic Portfolio is a React app for creating and publishing personal portfolio sites through forms. Its main journey is account access, selecting a template, entering profile and portfolio content, saving it, then viewing and sharing the resulting site. The graph includes the documented three-template render and theme capabilities. Source excerpts confirm login, dashboard portfolio retrieval/deletion, and Template 1 submission; wiring for other authoring and rendering details is based on the README and file tree.
Main entry points: routes.jsx Route definitions · Portfolio.jsx Portfolio entry · CommonModel.js Portfolio API model · Dashboard.jsx Portfolio dashboard
Components 21
Application flow
- App routing
src/App.jsx - Route definitions
src/routes.jsx - Template catalog
src/context/TemplateContext.jsx
Account access
- Sign in
src/pages/auth/Login.jsx - Sign up
src/pages/auth/Signup.jsx - Email verification
src/pages/auth/Verification.jsx
Portfolio authoring
- Portfolio dashboard
src/pages/dashboard/Dashboard.jsx - Portfolio authoring
src/pages/dashboard/addPortfolio/AddPortflio.jsx - Student portfolio form
src/pages/dashboard/addPortfolio/templates/Template1.jsx - Content form parts
src/pages/dashboard/addPortfolio/components/Project.jsx - Portfolio editing
src/pages/dashboard/editDashboard/EditPortfolio.jsx
Portfolio presentation
- Portfolio entry
src/pages/portfolio/Portfolio.jsx - Student template
src/pages/portfolio/template/template1/Template1.jsx - Photographer template
src/pages/portfolio/template/template2/Template2.jsx - Designer writer template
src/pages/portfolio/template/template3/Template3.jsx - Theme state
src/context/ThemeContext.jsx
API services
- Portfolio API model
src/services/models/CommonModel.js - Authentication API model
src/services/models/AuthModel.js - HTTP provider
src/services/utilities/provider.js
Other components
- Visitor
- Application backend
Connections 27
- Visitor → App routing: opens
- App routing → Route definitions: resolves routes
- Route definitions → Sign in: routes to
- Route definitions → Sign up: routes to
- Route definitions → Email verification: routes to
- Route definitions → Portfolio dashboard: routes to
- Route definitions → Portfolio authoring: routes to
- Route definitions → Portfolio editing: routes to
- Route definitions → Portfolio entry: routes to
- Portfolio dashboard → Template catalog: reads choices
- Portfolio dashboard → Portfolio authoring: opens selected
- Portfolio authoring → Student portfolio form: selects form
- Student portfolio form → Content form parts: uses fields
- Sign in → Authentication API model: submits credentials
- Sign up → Authentication API model: submits registration
- Email verification → Authentication API model: requests verification
- Portfolio dashboard → Portfolio API model: loads and deletes
- Student portfolio form → Portfolio API model: saves portfolio
- Portfolio editing → Portfolio API model: updates portfolio
- Portfolio entry → Portfolio API model: loads portfolio
- Portfolio entry → Student template: renders template
- Portfolio entry → Photographer template: renders template
- Portfolio entry → Designer writer template: renders template
- Portfolio entry → Theme state: uses theme
- Authentication API model → HTTP provider: delegates requests
- Portfolio API model → HTTP provider: delegates requests
- HTTP provider → Application backend: sends HTTP