应用程序开发的第一步🧐

阅读前须知：这篇文章的目的是分享我的学习历程，我既是初学者，也是开发者，更是一位博客作者。你可能不会在这里学到什么有趣的东西，但如果你仍然想看看我的作品，我很乐意向你提供一些建议！

我按照Academind的精彩教程《MERN Fullstack Guide！》构建了这个应用程序。

通过实践学习SPA/RestAPI架构的编码最佳实践和核心概念。

1.概念

a. 想法

这里的想法是建立一个非常简单的社交媒体，用户可以与其他用户分享地点（图像和位置）。

b. 特点

• 查看其他用户的位置
• 添加地点
• Google 地图集成
• 上传图片
• 授权

c. 规划前端

UI 原型看起来就是这样，我们计划用 React 构建我们的前端。

d. 路由

e.规划后端

这是我们使用 Node.js/Express 构建 RestAPI 时要遵循的模式。

2. 流程

a. 构建前端

• 从 create-react-app 开始，第一步是通过删除无用的内容并添加子目录来处理文件夹结构。

• 使用react-router-dom添加路由。

• 创建我的页面和核心组件。

注意：大部分样式由作者提供，因此学生可以完全专注于 JS/JSX 代码。

• 使用虚拟数据处理用户列表组件。

• 显示响应式导航栏。

• 了解 ReactDOM.createPortal() 并实现此功能以渲染用于移动设计的侧边抽屉。

• 使用 React hooks 管理我的组件的状态。

• 使用react-transition-group为我的侧边抽屉添加动画。

• 学习如何使用动态路由 /:something/xxx 和 useParams() 这是react-router-dom提供的功能。

• 构建越来越多的组件...

• 深入研究 Google 的文档并实现动态 Google 地图模式。

• 我现在正在使用带有内置表单验证的自制输入组件。

• 第一次使用自定义钩子（我肯定应该花时间并更深入地了解它们）。

• 准备身份验证页面。

• 使用 createContext() 和 useContext() 管理身份验证状态。

• 前端部分已完成✅。

b. 构建后端

• 通过安装 express、bodyParser 和 nodemon 来设置项目。

• 构建我的目录。

• 根据模式创建我的路线。

• 添加错误处理中间件。

• 按照MVC结构的思想，我们添加了一个控制器文件夹。

• 处理 POST 请求并使用Postman进行测试。

• 使用 express-validator 添加输入验证。

• 调用谷歌的地理编码 API，使用 axios 将地址转换为坐标。

• 设置 MongoDB/Mongoose。

• 处理 CRUD 操作。

• 研究我的 MongoDb 集合之间的关系。

• 完成后端✅。

c.将 React 连接到 API。

• 处理 CORS。

• 使用 fetch() 从我的后端获取数据。

• 为 http 请求构建自定义钩子。

• 修复一些小问题以提供最佳的用户体验。

• 使用 Multer 处理文件上传。

• 使用 bcryptjs 加密用户密码。

• 使用 jsonwebtoken 改进身份验证。

• 将令牌存储在本地存储中。

• 应用程序已完成✅。

3. 构建和部署

• 交换到环境变量。

• 向 React 页面添加延迟加载。

• 在 Heroku 上部署后端。

• 在 Firebase 上部署前端。

我完成了教程，本地一切运行良好，但我真的很失望，我无法在 heroku 上存储图像...我计划稍后将我的后端连接到 AWS。

源代码：