---
# System prepended metadata

title: 网站女工-Milestone3
tags: [homework]

---

# 网站女工-Milestone3

Figma: https://www.figma.com/file/Su6b6XkaDggRzC0oyCd8j0/SnapFoodie?type=design&node-id=0%3A1&mode=design&t=j3bbhcIrny2BYQJT-1

Product Overview Document:
https://docs.google.com/document/d/1MtoCvEl9HJjrIs90tyWB2WQ24ed4h3TetRE5NO4RO0w/edit?usp=sharing

API Doc:
https://docs.google.com/document/d/1yfQByX-VIOPS_NB22bNHsw-zsqubIMew8yhunoWwIco/edit?usp=sharing

大家都太棒了！
# Todo
1. [Lexi] delete console.log from Sophie's code, complete implementation for frontend for edit comment ✅
2. [Lexi] comment - 😎 change text to a form, sophie's tired ✅
3. [Cindy] update Figma after collection's done
4. [Cindy] add 3rd party API usage
5. [Cindy] answer part 3, everyone can help
6. [Someone] Flashing Issue due to Loading


# Class Note for Milestone 3

这个作业的重点/需要注意的地方。



## Highlight this project (Apr 8)

* Group work is optional 
  * github上需要看到每个人的commitment
  * Each member of the team is responsible for at least 1 feature that creates, reads, and updates some data. 
* 需要有CRUD -- 每个人都得有，小组中的每个成员都需要提交自己的feature -- 他强调了feature，煞笔
* 接下来几节课是用Firebase来host我们的application



* 3 components

  * **Part 1 - Prototype -- Figma (Squares on the page is enough)**
    * **"What is your app, and what does it do?"**
    * Free to use Figma Template but you need to jot it down. 
    * Part1 Submission： 
      - Wifeframe (Figma link). 
      - 1-page product overview document describing the features of your app idea, use cases, how features are used on each page. 
      - Exceptional -- 有点**style**的prototype

  

  * **Part 2 - Build it**

    * 要有log-in功能 ✅

    * 数据库可以用Firebase Firestore ✅

    * You should be able to save user's data and display it back to them

    * Part 2 Submission:

      * 老师要看git commit记录打分 (强调了很多次)
      * (如果用Firestore) Submit a screenshot showing some of the data in your Firestore Collection. 
      * 需要deploy，可以用firebase，submit the **public URL**

      * Exceptional（10分） -- 数据需要用有点复杂（maybe多个表，maybe some relational data), 除了用于身份验证和数据的API，你还可以与除了Authentic之外的任何第三方API集成

  

  * **Part 3 - Run It**
    * deploy完了后要回答问题 一共有 7 个 （类似milestone 1 我们做过的）






==========================================


## Recipe Instgram

Module & Features

* User Management (User Information 的CRUD -- 直接用Milestone 2的改改）
* Recipe Card (样式整成intgram card，也可以CRUD)
* **Member 1:  菜谱创建与管理**
  - Landing Page
  - Create Recipe
  - Edit Recipe
  - Recipe Detail
  - User创建新的菜谱（上传图片、输入成分、描述做法等）。
  - User查看自己创建的菜谱列表。
  - User更新自己的菜谱。
  - User删除自己的菜谱。
* **Member 2: 用户评论与互动**
  - Recipe Detail's Comment Sections
  - Notification Page
  * 用户可以对菜谱发表评论。
  * 用户可以查看菜谱下的所有评论。
  * 用户可以编辑或删除自己的评论。
* **Member 3: 个人收藏**
  - Connect the collection icon from the Recipe Detail Page
  - Collection Page
  - Search Page
  * **创建**：添加收藏。
  * **读取**：查看收藏和历史记录。
  * **更新**：更新收藏状态（比如取消收藏）。
  * **删除**：从收藏中删除。

## ChatGPT 生成的

# Database Collections and Member Responsibilities

## Database Collections:

1. **Recipes Collection**
   - **Fields**: `recipe_id`, `user_id` (reference to Users collection), `title`, `description`, `ingredients`, `steps`, `images`, `tags`, `timestamp`.
   
2. **Users Collection**
   - **Fields**: `user_id`, `username`, `email`, `profile_image`, `bio`, `favorites` (array of `recipe_ids`), `recent_views` (array of `recipe_ids`).
   
3. **Comments Collection**
   - **Fields**: `comment_id`, `recipe_id` (reference to Recipes collection), `user_id` (reference to Users collection), `text`, `timestamp`.

4. **Notifications Collection**
   - **Fields**: `notification_id`, `user_id` (reference to Users collection), `message`, `link` (URL or internal link to the trigger event), `timestamp`, `read_status`.


## End Points

`/`: Landing Page, welcome page

### User End Points

``/accounts/signup/ [get, post]``: Register a new user
``/accounts/login/ [get, post]``: Log in user and get and cache an authentication token
``/accounts/logout/ [get]``: Log out user and delete authentication token from cookie
``/accounts/profile/view/ [get]``: View current user profile
``/accounts/profile/edit/ [get, post]``: Edit current user profile
``/accounts/changepassword/ [get, post]``: Change user password

### Recipe Endpoints:
``/recipe/create/ [get, post]``: For user to create a recipe.
``/recipe/<property_id>/edit/ [patch, put]``: For owner to edit a recipe
``/recipe/<property_id>/detail/ [get]``: Anyone can view a recipe detail
``/recipe/<property_id>/delete/ [delete]``: For owner to delete a recipe
``/recipe/list/ [get]``: For user to see all his/her recipe
``/recipe/search/ [get]``: For any user to search for a recipe.

### Comments Endpoints:
``/comments/recipe/<recipe_id>/ [get]``: List all comments of a recipe.
``/comments/recipe/<recipe_id>/ [post]``: For a user to add a new comment on a recipe
``/comments/recipe/<recipe_id>/<comment_id>/ [get]``: To view a recipe comments.
``/comments/recipe/<recipe_id>/<comment_id>/ [post]``: To reply a recipe comments.

### Notifications Endpoints:
``/notifications/ [get]``: List all notifications for a user. 
``/notifications/ [post]``: Create a notification for a user. 
``/notifications/<notification_id> [get]``: Mark a notification as read.


# Backend Setup

跑起来需要
```bash=
firebase init emulators  # 安装emulator -- 相当于模拟已经deploy上去了的情况
firebase emulators:start --only functions
```

在functions下面建file
```javascript=
// functions/hellocindy.js
const functions = require("firebase-functions");

// HTTP 请求处理函数
exports.handler = functions.https.onRequest((request, response) => {
  response.json({ message: "Hello from Cindy!" });
});
```

在functions/index.js里claim一下你有这个东西
```javascript=
const hellocindy = require("./hellocindy");
exports.helloCindy = hellocindy.handler;
```


---
# Firebase admin setup

在你提供的项目架构中，如果你打算使用Firebase Admin SDK来管理Firebase服务（如认证、数据库等），我建议在`lib/firebase`目录下创建一个新的文件用于配置和初始化Firebase Admin SDK。这样可以保持代码的组织性和可维护性。下面是具体的步骤：

### 1. 创建一个新的文件来初始化Firebase Admin SDK

在`lib/firebase`目录下，你可以创建一个名为`admin.js`的文件。这个文件将用于配置和初始化Firebase Admin SDK。代码如下：

```jsx
const admin = require('firebase-admin');

const serviceAccount = require('../path/to/service-account-file.json'); // 替换为实际路径

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

module.exports = admin;

```

### 2. 在需要的地方引用此配置

在你的应用的其他部分，如`getUser.js`或`fakeRestaurants.js`，当需要访问Firebase服务时，可以引入这个初始化过的`admin`对象。例如：

```jsx
const admin = require('./admin'); // 确保路径正确

// 使用admin来访问Firebase服务，如数据库操作
const db = admin.firestore();

```

### 3. 确保安全性和路径正确

- **安全性**：确保你的服务账户密钥文件不会被包含在版本控制中（例如`.gitignore`中应包含此密钥文件）。
- **路径**：在初始化Admin SDK时，确保服务账户密钥文件的路径是正确的，相对于你的`admin.js`文件的位置。

### 4. 使用环境变量

为了进一步提高安全性，你可以考虑使用环境变量来引用服务账户密钥文件，而不是直接在代码中写死。例如，你可以在`.env`文件中设置路径，然后在你的`admin.js`文件中使用`process.env.SOME_ENV_VARIABLE`来获取它。

### 5. 更新`next.config.js`

如果你使用了环境变量，确保在`next.config.js`中正确地配置了环境变量的加载，使其在应用启动时可用。

通过以上步骤，你可以在你的Next.js项目中有效地集成Firebase Admin SDK，同时保持良好的项目结构和安全性。这种方法也使得以后维护和更新配置更为便捷。