背景

不用到处找基于 Cloudflare 服务的开源工具了，来看看这个超赞列表，我看里面已经收集不少的免费项目。
Awesome Cloudflare - 为白嫖 Cloudflare 提供一个省心省时的资源工具清单。

awesome-cloudflare

介绍

选几个我感兴趣的介绍一下：

• 免费图床 cf-image-hosting ：在 Telegraph 上免费无限制地托管图像，部署在 Cloudflare 上。试用地址：https://images.mingming.dev
• 网站分析 analytics_with_cloudflare ：免费开源网页访客计数器, Webviso 是一个基于Cloudflare worker服务+Cloudflare D1数据库实现的完全免费的在线web访客统计服务。 功能与目前常用的 不蒜子 - 极简网页计数器 相同。Webviso完全开源，你可以实现自定义需求。 基于Cloudflare的微服务架构可快速自行部署上线。
• 免费Workers： Cloudflare Workers优秀项目收集。

Add Notification Function

1. Add Alert to SideBarItem Component
2. Add Alert to SideBar Component
3. Add Notification API
4. Add Hook
5. Add Notification Page
6. Add notification content in Like API
7. Add notification content in Comments API
8. Add notification content in Follow API

Add Comments Function

1. Add Comments API
2. Modify Form Component
3. Modify Post page
4. Add CommentFeed Component
5. Add CommentItem Component

Add Like Function

1. Add Like API
2. Add Hooks
3. Modify PostItem Page

Add Post Page

1. Add Post API
2. Add Hooks
3. Add Post Page

Add Follow Function

1. Add Follow API
2. Add hook
3. Modify component UserBio

Add PostFeed

1. Add component PostFeed
2. Add component PostItem
3. Add PostFeed to Home Page

Post Tweet

1. Add post API
2. Add hook
3. Add component Form
4. Add Form to Home page

Add Image Upload Function

1. Install dropzone
2. Add component ImageUpload
3. Modify EditModal

Install Dropzone

1

npm install react-dropzone

Add Edit Function

1. Add edit API
2. Add EditModal
3. Add Hook
4. Add EditModal to App.ts

Add edit API

Add file pages/api/edit.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { NextApiRequest, NextApiResponse } from 'next';
import prisma from '@/libs/prismadb';

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
  if ( req.method !== 'PATCH'){
    return res.status(405).end(); 
  }

  try{
    const { name, username, bio, profileImage, coverImage,userId } = req.body;

    console.log('user username:', name, username, bio )

    if(!name || !username ){
      throw new Error('Missing fields!');
    }

    const updatedUser = await prisma.user.update({
      where: {
        id: userId
      },
      data: {
        name,
        username,
        bio,
        profileImage,
        coverImage
      }
    });

    return res.status(200).json(updatedUser);
  } catch (error){
    console.log(error);
    return res.status(400).end();
  }
}