这是对 DEV 周末挑战：社区（dev.to 在 Bing 上）的提交

Source: Dev.to

resetreel6879.web.app

项目概述

我为巴吞鲁日的青少年打造了 Reset Reel，他们行动迅速、感受快速，有时甚至在喘息之前就做出反应。许多人会经历情绪波动、过度刺激以及“要硬气”的压力，即使他们内心已经不堪重负。Reset Reel 的目的是打断那一刻——不是说教，而是给他们一个重新选择自己的机会。

该应用是一个小型 React + Vite 项目，设计为一种点触式情绪中断工具。它通过一系列暗色调、平静的引导屏幕，帮助那些感到过度刺激且不想要任何幼稚或说教内容的青少年。

应用流程

1. Opening – 一个呼吸的瞬间
2. PeelLayer – 快速情绪复位
3. SelfiePrompt – 要求用户拍摄自拍
4. SelfieReview – 将自拍展示给用户
5. ChooseYourself – 最后一次自我认同的时刻

在最后一个屏幕之后，应用会停留在一个占位页面，后续会添加更多工具。

屏幕状态示例

const [screen, setScreen] = useState("opening");

每个屏幕返回其对应的组件，使逻辑易于理解和扩展。

构建方式

• React + Vite 实现快速开发
• 基于组件的屏幕流
• 状态驱动的导航
• 简单的 CSS‑in‑JS 样式
• 本地开发（无 GitHub 仓库）

工具与致谢

我仍在学习 React，这个项目让我学到了很多关于调试导入、大小写敏感、JSX 结构以及保持组件整洁有意的知识。我在 Microsoft Copilot 的帮助下完成了项目，它在排查问题和保持组织方面提供了很大帮助。该项目完全由我独立完成，感谢所有帮助我实现它的指导。