40 个问题 - 深度自我反思工具

一个基于 Next.js 的网页应用，帮助用户通过回答 40 个深度问题进行自我反思和记录。

💡 项目灵感

本项目的问题内容和理念灵感来自于 kepano/40-questions，这是一个优秀的自我反思问题集合。我们在此基础上：

• 🌐 创建了网页版本：将原本的文本问题转化为交互式网页应用
• 💾 增加了自动保存功能：解决了填写过程中数据丢失的问题
• 📊 添加了进度跟踪：可视化显示完成情况，提升用户体验
• 📄 支持一键导出：将答案导出为格式化的 Markdown 文档
• 🎨 现代化界面设计：提供更好的视觉体验和交互感受

感谢 @kepano 提供了如此有价值的问题集合，为自我反思和个人成长提供了很好的框架。

🌐 在线体验

立即访问： https://40-questions-web.vercel.app

✨ 功能特点

🎯 核心功能

• 📝 两套问题集：年度问题和十年问题，适合不同时间维度的反思
• 💾 智能自动保存：使用浏览器 localStorage 实时保存答案，无需担心数据丢失
• 📊 可视化进度跟踪：实时显示完成百分比和已答题数，激励用户完成所有问题
• 📄 一键 Markdown 导出：支持将答案导出为格式化的 Markdown 文档，包含统计信息

🎨 用户体验

• ✨ 现代化设计：渐变背景、动画效果、卡片式布局
• 🎭 交互反馈：已回答问题显示绿色勾号，悬停动画效果
• 📱 完全响应式：完美适配桌面、平板和移动设备
• 🚀 流畅体验：快速加载，平滑过渡动画

🔧 技术特性

• 🌐 零服务器依赖：纯前端应用，数据本地存储
• 🔒 隐私保护：所有数据仅在本地保存，不上传服务器
• ⚡ 高性能：基于 Next.js 14，优化的构建和渲染
• 🛠️ 易于部署：支持 Vercel、Netlify 等平台一键部署

问题集内容

年度问题（40个）

适合每年年末进行回顾，包含：

• 个人成长和成就
• 人际关系变化
• 生活体验和感悟
• 未来规划和期望

十年问题（40个）

适合每十年进行深度反思，包含：

• 人生重大转折点
• 价值观的变化
• 长期目标的实现
• 人生经验总结

技术栈

• 框架：Next.js 14
• 样式：Tailwind CSS
• 语言：JavaScript (React)
• 存储：浏览器 localStorage
• 部署：支持 Vercel、Netlify 等平台

本地开发

1. 克隆项目

git clone <repository-url>
cd 40-questions-web

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 打开浏览器访问 http://localhost:3000

🚀 使用方法

在线使用（推荐）

直接访问 https://40-questions-web.vercel.app 即可开始使用。

使用步骤

1. 🏠 访问首页：浏览功能介绍，选择适合的问题集
2. 📋 选择问题集：点击"年度问题"或"十年问题"卡片
3. ✍️ 填写答案：在文本框中输入你的深度思考，系统会实时自动保存
4. 📈 查看进度：页面顶部的进度条显示当前完成情况
5. 💾 导出答案：点击"下载为 Markdown"按钮导出格式化文档
6. 🔄 管理答案：可随时修改已填写的答案，或清空重新开始

💡 使用建议

• 安静环境：选择一个安静的时间和空间进行深度思考
• 诚实回答：真实记录内心想法，这是自我成长的关键
• 定期备份：建议定期导出答案进行备份
• 重复使用：可以每年或每十年重新填写，对比成长变化

数据存储

• 所有答案都存储在浏览器的 localStorage 中
• 数据仅在本地保存，不会上传到服务器
• 清除浏览器数据会导致答案丢失，建议定期导出备份

📄 导出格式

导出的 Markdown 文件包含：

• 📋 问题集标题：清晰标识问题类型
• 📅 填写日期：记录完成时间
• 📊 完成统计：总题数、已答题数、完成百分比
• ❓ 所有问题和答案：完整的问答内容
• 🎯 格式化排版：使用 Markdown 标准格式，便于阅读和分享
• ⏰ 生成时间戳：记录导出时间

示例文件名

• 每年问自己的-40-个问题-2024-12-31.md
• 每-10-年问自己的-40-个问题-2024-12-31.md

项目结构

40-questions-web/
├── app/
│   ├── components/
│   │   └── QuestionnaireForm.js    # 问答表单组件
│   ├── utils/
│   │   └── loadQuestions.js        # 问题加载工具
│   ├── year/
│   │   └── page.js                 # 年度问题页面
│   ├── decade/
│   │   └── page.js                 # 十年问题页面
│   ├── layout.js                   # 根布局
│   ├── page.js                     # 首页
│   └── globals.css                 # 全局样式
├── public/
│   └── zh-hans/
│       ├── year.md                 # 年度问题文件
│       └── decade.md               # 十年问题文件
└── package.json

自定义问题

如需修改问题内容，可以编辑以下文件：

• public/zh-hans/year.md - 年度问题
• public/zh-hans/decade.md - 十年问题

每行一个问题，格式为：序号. 问题内容

🚀 部署

一键部署到 Vercel（推荐）

手动部署到 Vercel

1. Fork 本项目到你的 GitHub 账户
2. 在 Vercel 中导入项目
3. 自动部署完成，获得专属域名

其他部署平台

项目是标准的 Next.js 应用，支持以下平台：

• Netlify：拖拽部署或 Git 集成
• GitHub Pages：需要配置静态导出
• 自托管：使用 npm run build 构建后部署

环境要求

• Node.js 18+
• 支持现代浏览器（Chrome、Firefox、Safari、Edge）

🤝 贡献

欢迎各种形式的贡献！

如何贡献

1. 🐛 报告问题：在 Issues 中报告 bug 或提出功能建议
2. 💡 功能建议：提出新的问题集或功能改进想法
3. 🔧 代码贡献：Fork 项目，创建分支，提交 Pull Request
4. 📝 文档改进：帮助完善文档和使用说明
5. 🌍 国际化：添加其他语言支持

开发指南

• 遵循现有的代码风格
• 添加适当的注释
• 确保功能正常工作
• 更新相关文档

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

• 问题集来源：感谢 kepano/40-questions 提供的优秀问题集合
• 开源社区：感谢所有为这个项目做出贡献的开发者和用户
• 技术栈：感谢 Next.js、React、Tailwind CSS 等开源项目

---

开始你的深度思考之旅 ✨ 立即访问