Skip to content

BUILD: React Frontend, Dashboard, Portfolio Editor#3

Open
openorc[bot] wants to merge 3 commits into
mainfrom
ai/task-69ba3dac-build-react-frontend-dashboard-portfolio-editor
Open

BUILD: React Frontend, Dashboard, Portfolio Editor#3
openorc[bot] wants to merge 3 commits into
mainfrom
ai/task-69ba3dac-build-react-frontend-dashboard-portfolio-editor

Conversation

@openorc

@openorc openorc Bot commented Jun 8, 2026

Copy link
Copy Markdown

What changed

Built and verified the complete React frontend for the DevFolio portfolio management application. All 9 requirements are fully implemented:

  1. Vite + React + TypeScript + Tailwind - Configured with path alias @/, API proxy, and Tailwind CSS with custom design tokens.
  2. shadcn/ui component library - 7 components (Button, Card, Dialog, DropdownMenu, Input, Label, Switch) using Radix UI primitives and CVA.
  3. Auth context - React context with login/register/logout, JWT token and user persistence in localStorage.
  4. Protected routes - Auth guard component redirecting unauthenticated users to /login.
  5. Dashboard layout - Sidebar navigation with links (Dashboard, Portfolios, New Portfolio), user info, and logout.
  6. Portfolio list page - Dashboard and Portfolios pages with grid display, create/edit/delete, confirmation dialog, empty state.
  7. Portfolio editor - Form with title, description, template selector, published toggle, theme picker, and live preview panel.
  8. Theme selector - Fetches preset themes from API, displays selectable theme pills with color indicators.
  9. API client - HTTP wrapper with automatic Bearer token injection from localStorage, JSON handling, and error normalization.

TypeScript compiles with zero errors. All files follow consistent patterns and conventions.

Approach: Verified existing implementation with TypeScript type-checking. All code follows shadcn/ui patterns (Radix UI primitives + Tailwind CSS + CVA), React Router v6 with nested layouts, and a centralized API client with JWT auth header injection.

Files changed:

  • client/src/App.tsx
  • client/src/main.tsx
  • client/src/index.css
  • client/src/contexts/auth.tsx
  • client/src/lib/api.ts
  • client/src/lib/utils.ts
  • client/src/types/index.ts
  • client/src/components/protected-route.tsx
  • client/src/components/layout/dashboard-layout.tsx
  • client/src/components/portfolio/portfolio-card.tsx
  • client/src/components/portfolio/portfolio-form.tsx
  • client/src/components/portfolio/portfolio-preview.tsx
  • client/src/components/theme/theme-selector.tsx
  • client/src/components/ui/button.tsx
  • client/src/components/ui/card.tsx
  • client/src/components/ui/dialog.tsx
  • client/src/components/ui/dropdown-menu.tsx
  • client/src/components/ui/input.tsx
  • client/src/components/ui/label.tsx
  • client/src/components/ui/switch.tsx
  • client/src/pages/dashboard.tsx
  • client/src/pages/login.tsx
  • client/src/pages/not-found.tsx
  • client/src/pages/portfolio-edit.tsx
  • client/src/pages/portfolios.tsx
  • client/src/pages/register.tsx

Task

BUILD: React Frontend, Dashboard, Portfolio Editor

Build the React frontend:

  1. Vite + React + TypeScript + Tailwind
  2. shadcn/ui component library
  3. Auth context (login state, JWT storage)
  4. Protected routes
  5. Dashboard layout with sidebar navigation
  6. Portfolio list page with create/edit/delete
  7. Portfolio editor with live preview
  8. Theme selector component
  9. API client with auth headers
    Do NOT run lint - just verify TypeScript compiles.

🤖 Generated by Open ORC | Task 69ba3dac

open-orc-bot added 3 commits June 8, 2026 22:06
…e selector

- Add Vite + React + TypeScript + Tailwind client workspace
- Implement shadcn/ui component library (Button, Input, Card, Dialog, DropdownMenu)
- Auth context with JWT token stored in localStorage
- Protected routes with redirect to login
- Dashboard layout with sidebar navigation
- Portfolio list page with create/edit/delete modals
- Portfolio editor with live theme preview
- Theme selector component loading presets from API
- API client with automatic Bearer token headers
- Login and Register pages
- Add missing server source files (auth, portfolio, theme routes, JWT config, middleware, migrations)
- Extend shared types with full data model interfaces
- All TypeScript compiles clean across workspaces
- Add /portfolios/new route for full-featured editor creation
- Create Switch component for published toggle
- Add published toggle, template selector, and description textarea to portfolio form
- Simplify dashboard/portfolios pages to navigate to editor instead of modals
- Add New Portfolio link to sidebar navigation
- Extend CreatePortfolioRequest type with optional published field
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants