Update README

.dev.vars.example

@@ -1,3 +1,3 @@
 DATABASE_URL=
-GITHUB_TOKEN=
+GITHUB_API_TOKEN=
 GITHUB_WEBHOOK_SECRET=

README.md

@@ -1,8 +1,72 @@
-```
-npm install
-npm run dev
+# Hono Github Tracker
+
+> Measure interactions on your Github repositories! Reach out to your fans!
+
+Hono Github Tracker is a simple app to track interactions on your Github
+repositories. It listens to Github Webhooks and stores the events in a database.
+
+## Getting started
+
+This app is using the [HONC](https://honc.dev) stack - this includes
+[Neon](https://neon.tech), for which you will need to create an account for.
+
+As we're interacting with both Github Webhooks and the Github API, you will
+need to create/add an API token and [set a webhook secret](https://docs.github.com/en/webhooks/using-webhooks/creating-webhooks#creating-a-repository-webhook) on the repo you'd like
+to monitor.
+
+> [!note]
+> Make sure you configure the webhook to listen to the changes you're
+> interested in, and update the array of the event listener in
+> `src/api/index.ts`.
+
+To get started locally, you will need to create a `.dev.vars` file in the root
+of the project, with the following three variables:
+
+```shell
+# .dev.vars
+DATABASE_URL=postgresql://neondb_owner:...
+GITHUB_API_TOKEN=github_...
+GITHUB_WEBHOOK_SECRET=...
 ```
 
+> [!tip]
+> If using `bun` feels too edgy, just use your favourite package manager.
+
+```shell
+bun install
+bun dev
 ```
-npm run deploy
+
+Your app will start on `localhost:8787`.
+
+### Receiving Webhooks
+
+To receive webhooks, you will need to expose your local server to the internet.
+You could use Ngrok, VS Code Ports or any other tool you're comfortable with.
+
+Hono Github Tracker is using FPX for local development, which has a neat feature
+to [proxy Webhook requests](https://fiberplane.com/docs/features/webhooks/) to
+your local development server.
+
+To make use of FPX proxying, run FPX in a separate terminal:
+
+```shell
+bun studio
 ```
+
+> [!important]
+> When using any proxy tool, make sure to append the URL with `/api/ghwh`
+
+## Dashboard
+
+The app exposes a dashboard on `localhost:8787/` with basic information about
+the repositories you're tracking.
+
+## TODO
+
+This app is under active (though not always fast) development. If you're running
+into issues, have questions or suggestions, feel free to open an issue.
+
+- [ ] [Authenticated dashboard](https://github.com/oscarvz/hono-github-tracker/issues/14):
+      we shouldn't expose the dashboard to the public.
+      s

src/client/Dashboard.tsx

@@ -29,7 +29,7 @@ export function Dashboard({ repositories }: DashboardProps) {
               stargazersCount,
               watchersCount,
             }) => (
-              <GridCol key={fullName} span={4}>
+              <GridCol key={fullName} span="content">
                 <Card shadow="sm" padding="lg" radius="md" withBorder>
                   <Text fw={500}>{fullName}</Text>
 

src/db/schema.ts

@@ -42,7 +42,6 @@ export const events = pgTable("events", {
 
 export const repositoriesEvents = relations(repositories, ({ many }) => ({
   events: many(events),
-  users: many(users),
 }));
 
 export const usersEvents = relations(users, ({ many }) => ({

src/middleware/githubApiMiddleware.ts

@@ -19,7 +19,7 @@ function getOctokitInstance(token: string) {
  */
 export const githubApiMiddleware = createMiddleware<HonoEnv, "ghws">(
   async (c, next) => {
-    const githubToken = c.env.GITHUB_TOKEN;
+    const githubToken = c.env.GITHUB_API_TOKEN;
     const octokit = getOctokitInstance(githubToken);
 
     const fetchUserById: FetchUserById = async (id) => {

src/types.ts

@@ -14,7 +14,7 @@ type Variables = {
 
 type EnvVars = {
   DATABASE_URL: string;
-  GITHUB_TOKEN: string;
+  GITHUB_API_TOKEN: string;
   GITHUB_WEBHOOK_SECRET: string;
 };