Forum application built with Pages Functions, Workers KV and Durable Objects

Overview

This example application showcases a forum application that allows authenticated users to leave comments, like comments and reply on other user’s comments using Pages Functions to handle server-side logic such as Authentication and posting comments to Workers KV. We will also use Workers KV for storage of our comment entries and Durable Objects to keep the count of likes consistent.

Template: Pages-forum-example

This repo contains example code for a forum applications that uses the following:

React with Typescript support and Chakra UI for the user interface.
Cloudflare Pages for deployment and Continuous integration, also Pages Functions for hosting API functions.
Workers KV for storing comment entries.
Durable Objects for storing consistency of likes.
GitHub OAuth for authentication.

Set up

To create a my-project directory using this template, run:

$ npm init cloudflare my-project pages-example-forum-app
# or
$ yarn create cloudflare my-project pages-example-forum-app
# or
$ pnpm create cloudflare my-project pages-example-forum-app

Note: Each command invokes create-cloudflare for project creation.

To run this locally, ensure you have Wrangler version >=16.7.0 then run

npm install && npm run start

Environment variables

Create a .env file and copy to contents of .env.example into the file. Then replace the credentials accordingly.

React Component structure.

The componets can be found in src/components. The image below shows a breakd own of how the components are used

Pages Functions

All Pages Functions are under functions/api folder. The

PencilNavigator/workers-forum