Full-stack portfolio & web application by Bryan Cordes
bcordes.dev is a server-side rendered full-stack web application built with TanStack Start and powered by React 19. It serves as a professional portfolio and technical showcase featuring real-time data, authentication, and a modern component-driven UI.
- Server-Side Rendering — TanStack Start with Nitro for fast, SEO-friendly pages
- Authentication — OIDC-based auth flow with sealed sessions and automatic token refresh
- Real-time Updates — Microsoft SSE WebSocket integration for live data
- Modern UI — Custom green-on-white theme built with Tailwind CSS v4 and shadcn/ui
- Database — PostgreSQL 16
- Backend Integration — Connected to the .NET Wallow API with retry logic
- CI/CD — Docker multi-stage builds published to GHCR, deployed via Portainer
| Layer | Technologies |
|---|---|
| Framework | TanStack Start, React 19, Vite 7 |
| Routing | TanStack Router (file-based) |
| Data | TanStack Query, PostgreSQL 16 |
| Styling | Tailwind CSS v4, shadcn/ui, Lucide icons |
| Auth | OpenID Connect, iron-webcrypto sessions |
| Real-time | Microsoft SSE |
| Forms | React Hook Form + Zod |
| Testing | Vitest, Testing Library |
| Tooling | ESLint, Prettier, Storybook 9 |
| Infra | Docker, GitHub Actions, GHCR, Portainer |
pnpm install
pnpm dev| Command | Description |
|---|---|
pnpm dev |
Start dev server on port 3000 |
pnpm build |
Production build |
pnpm test |
Run tests with Vitest |
pnpm lint |
Lint with ESLint |
pnpm format |
Format with Prettier |
pnpm check |
Format + lint fix |
pnpm storybook |
Launch Storybook on port 6006 |
src/
├── routes/ # File-based route definitions
├── components/ # React components (ui + features)
├── server-fns/ # TanStack Start server functions
├── lib/
│ ├── auth/ # OIDC authentication
│ └── wallow/ # Backend API client
├── hooks/ # Custom React hooks
└── content/ # Static content (blog, projects)
Private repository.