# 网站女工-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

跑起来需要

firebase init emulators  # 安装emulator -- 相当于模拟已经deploy上去了的情况
firebase emulators:start --only functions

在functions下面建file

// 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一下你有这个东西

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。代码如下：

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`对象。例如：

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，同时保持良好的项目结构和安全性。这种方法也使得以后维护和更新配置更为便捷。