在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

yangshun/tech-interview-handbook

菜单

门户应用程序架构

相关源文件

目的与范围

本文档提供了 Tech Interview Handbook 仓库中 Portal Application 架构的技术概述。它涵盖了高层结构、关键组件、技术栈以及 Portal 内不同模块的交互方式。有关网站和文档系统的更多信息，请参阅 网站和文档。

概述

Portal Application 是一个 Next.js Web 应用程序，提供交互式的技术面试准备工具。它是文档网站的交互式对应部分，提供简历审查、薪资比较和技术面试题库等功能。

来源： apps/portal/package.json1-70 package.json1-34

技术栈

Portal Application 使用以下技术构建

层技术目的
框架Next.js用于服务器渲染页面的 React 框架
APItRPC客户端和服务器之间的类型安全 API 层
身份验证NextAuth.js用户认证和会话管理
数据库Prisma用于数据库访问的 ORM
样式Tailwind CSS实用优先 CSS 框架
状态管理React Query数据获取和状态管理
部署Vercel托管和部署

来源： apps/portal/package.json18-49 apps/portal/src/pages/_app.tsx1-92

应用程序结构

Portal Application 架构图

来源： apps/portal/src/pages/_app.tsx1-92 apps/portal/src/server/router/index.ts1-78 apps/portal/src/components/global/AppShell.tsx1-250

关键组件

AppShell

AppShell 是整个 Portal Application 的主布局容器。它提供了

  • 全局导航
  • 产品特定导航
  • 用户认证 UI（Profile Jewel）
  • 移动导航
  • Google Analytics 集成

AppShell 根据当前路由动态确定显示哪个导航。

来源： apps/portal/src/components/global/AppShell.tsx133-250

tRPC API 层

tRPC API 层提供了客户端和服务器之间的类型安全通信。API 路由按功能组织，并遵循分层结构。

来源： apps/portal/src/server/router/index.ts1-78

功能模块

Portal Application 由三个主要功能模块组成，每个模块都有其自己的组件、页面和 API 路由。

1. 简历审查系统

简历审查系统允许用户上传简历、浏览其他用户的简历并提供反馈。

关键组件

  • 简历提交
  • 简历浏览
  • 简历评论
  • 简历收藏

2. 技术 Offer 系统

技术 Offer 系统允许用户匿名分享和比较薪酬信息。

关键组件

  • Offer 提交
  • Offer 浏览
  • Offer 分析
  • Offer 评论

3. 题库系统

题库系统包含来自不同公司的技术面试题集合。

关键组件

  • 题目浏览
  • 题目筛选
  • 题目练习
  • 题目回答和评论

来源： apps/portal/src/pages/index.tsx1-86 apps/portal/src/types/questions.d.ts1-92 apps/portal/src/pages/questions/index.tsx1-49

Portal Application 拥有一个动态导航系统，该系统会根据当前路由和用户认证状态进行更改。

全局导航提供指向主要产品部分的链接

  • 机会
  • 问题
  • 简历

产品导航

每个产品都有自己的导航菜单

Offer 导航

简历和题目模块也存在类似的导航结构。

来源： apps/portal/src/components/global/GlobalNavigation.ts1-25 apps/portal/src/components/global/ProductNavigation.tsx1-117 apps/portal/src/components/offers/OffersNavigation.tsx1-48

身份验证流程

Portal Application 使用 NextAuth.js 进行认证。认证状态通过 SessionProvider 管理，并在整个应用程序中可用。

来源： apps/portal/src/components/global/AppShell.tsx32-131 apps/portal/src/pages/_app.tsx1-92

Analytics 集成

Portal Application 集成了 Google Analytics 以跟踪用户行为。这是通过 GoogleAnalytics 组件实现的。

主要功能

  • 页面浏览量跟踪
  • 自定义事件跟踪
  • 用户行为跟踪

来源： apps/portal/src/components/global/GoogleAnalytics.tsx1-99

开发工作流

Portal Application 是一个由 PNPM workspace 管理的 monorepo 结构的一部分。开发工作流程包括

  1. 运行开发服务器： pnpm dev
  2. 生产构建： pnpm build
  3. 类型检查： pnpm tsc
  4. 代码检查： pnpm lint

该应用程序遵循结构化的开发流程，使用 TypeScript 进行类型安全，并使用 ESLint 进行代码质量控制。

来源： package.json1-34 pnpm-workspace.yaml1-4 apps/portal/package.json1-70

结论

Portal 应用程序是一个结构良好的 Next.js 应用程序，提供用于技术面试准备的交互式工具。它使用 tRPC 等现代技术进行类型安全的 API 通信，并组织成简历、职位和问题的功能模块。该应用程序遵循代码组织、类型安全和用户体验的最佳实践。

有关特定功能的更详细信息，请参阅以下 wiki 页面