How ihtishamzameer/reactjs_deployment_demo works
This is a React portfolio site with a protected project-management dashboard. Visitors browse the portfolio, projects, blog, résumé, and contact page; authenticated users enter the dashboard, where route protection checks authentication and the dashboard presents project and task information. The sampled source confirms the auth request path and portfolio data usage; dashboard internals and most page implementations were not sampled, so their detailed wiring is intentionally limited.
Main entry points: AppRouter.jsx Route dispatch · main.jsx React entry · RequireAuth.jsx Route guard · Portfolio.jsx Portfolio page
Components 30
Application shell
- React entry
src/main.jsx - Route dispatch
src/routes/AppRouter.jsx - Redux store
src/store/store.js - Theme provider
src/styles/ThemeContext.jsx - Global styles
src/styles/GlobalStyle.js - Theme values
src/styles/theme.js
Public portfolio
- Portfolio page
src/pages/Portfolio.jsx - Portfolio navigation
src/Components/portfolio/PortfolioNav.jsx - Portfolio content
src/data/portfolioData.js - Project listings
src/pages/ProjectsList.jsx - Project detail
src/pages/ProjectDetail.jsx - Blog listing
src/pages/BlogList.jsx - Blog post
src/pages/BlogPost.jsx - Résumé page
src/pages/ResumePage.jsx - Contact page
src/pages/ContactPage.jsx
Protected dashboard
- Dashboard layout
src/Components/layout/Layout.jsx - Dashboard overview
src/pages/Home.jsx - Dashboard widgets
src/Components/dashboard/UpcomingTasks.jsx - Dashboard sample data
src/data/dashboardData.js - Dashboard state
src/features/dashboard/dashboardSlice.js - Dashboard requests
src/features/dashboard/dashboardApi.js
Authentication
- Login page
src/pages/Login.jsx - Registration page
src/pages/Register.jsx - Route guard
src/Components/common/RequireAuth.jsx - Auth state
src/features/auth/authSlice.js - Auth requests
src/features/auth/authApi.js - HTTP client
src/services/apiClient.js - Token utility
src/utils/token.js
Other components
- Visitor
- Backend API
Connections 27
- Visitor → Route dispatch: opens routes
- React entry → Redux store: provides state
- React entry → Theme provider: provides theme
- React entry → Global styles: applies styles
- React entry → Route dispatch: mounts routes
- Route dispatch → Portfolio page: routes to
- Route dispatch → Project listings: routes to
- Route dispatch → Project detail: routes to
- Route dispatch → Blog listing: routes to
- Route dispatch → Blog post: routes to
- Route dispatch → Résumé page: routes to
- Route dispatch → Contact page: routes to
- Route dispatch → Login page: routes to
- Route dispatch → Registration page: routes to
- Route dispatch → Route guard: guards dashboard
- Route guard → Dashboard layout: allows child routes
- Dashboard layout → Dashboard overview: renders overview
- Dashboard overview → Dashboard widgets: presents tasks
- Dashboard widgets → Dashboard sample data: reads tasks
- Portfolio page → Portfolio navigation: renders navigation
- Portfolio page → Portfolio content: reads content
- Theme provider → Theme values: selects palette
- Route guard → Auth state: dispatches logout
- Route guard → Token utility: validates token
- Auth state → Auth requests: calls auth requests
- Auth requests → HTTP client: sends requests
- HTTP client → Backend API: calls API