Initial commit from Create Next App

Author: sanjayprabhu

.env.example

@@ -0,0 +1,4 @@
+KV_URL=
+KV_REST_API_URL=
+KV_REST_API_TOKEN=
+KV_REST_API_READ_ONLY_TOKEN=

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,32 @@
+# Redis Example (with Upstash)
+
+This example showcases how to use Redis as a data store in a Next.js project.
+
+The example is a roadmap voting application where users can enter and vote for feature requests. It features the following:
+
+- Users can add and upvote items (features in the roadmap)
+- Users can enter their email addresses to be notified about the released items.
+
+## Demo
+
+- [https://roadmap-redis.vercel.app/](https://roadmap-redis.vercel.app/)
+
+## Deploy Your Own
+
+This examples uses [Upstash](https://upstash.com) (Serverless Redis Database) as its data storage. During deployment. The integration will help you create a free Redis database and link it to your Vercel project automatically.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-redis&project-name=redis-roadmap&repository-name=redis-roadmap&demo-title=Redis%20Roadmap&demo-description=Create%20and%20upvote%20features%20for%20your%20product.&demo-url=https%3A%2F%2Froadmap-redis.vercel.app%2F&stores=%5B%7B"type"%3A"kv"%7D%5D&)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-redis roadmap
+# or
+yarn create next-app --example with-redis roadmap
+# or
+pnpm create next-app --example with-redis roadmap
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

app/actions.tsx

@@ -0,0 +1,46 @@
+"use server";
+
+import { kv } from "@vercel/kv";
+import { revalidatePath } from "next/cache";
+import { Feature } from "./types";
+
+export async function saveFeature(feature: Feature, formData: FormData) {
+  let newFeature = {
+    ...feature,
+    title: formData.get("feature") as string,
+  };
+  await kv.hset(`item:${newFeature.id}`, newFeature);
+  await kv.zadd("items_by_score", {
+    score: Number(newFeature.score),
+    member: newFeature.id,
+  });
+
+  revalidatePath("/");
+}
+
+export async function saveEmail(formData: FormData) {
+  const email = formData.get("email");
+
+  function validateEmail(email: FormDataEntryValue) {
+    const re =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+  }
+
+  if (email && validateEmail(email)) {
+    await kv.sadd("emails", email);
+    revalidatePath("/");
+  }
+}
+
+export async function upvote(feature: Feature) {
+  const newScore = Number(feature.score) + 1;
+  await kv.hset(`item:${feature.id}`, {
+    ...feature,
+    score: newScore,
+  });
+
+  await kv.zadd("items_by_score", { score: newScore, member: feature.id });
+
+  revalidatePath("/");
+}

app/favicon.ico

@@ -0,0 +1,186 @@
+"use client";
+
+import clsx from "clsx";
+import { useOptimistic, useRef, useTransition } from "react";
+import { saveFeature, upvote } from "./actions";
+import { v4 as uuidv4 } from "uuid";
+import { Feature } from "./types";
+
+function Item({
+  isFirst,
+  isLast,
+  isReleased,
+  hasVoted,
+  feature,
+  pending,
+  mutate,
+}: {
+  isFirst: boolean;
+  isLast: boolean;
+  isReleased: boolean;
+  hasVoted: boolean;
+  feature: Feature;
+  pending: boolean;
+  mutate: any;
+}) {
+  let upvoteWithId = upvote.bind(null, feature);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let [isPending, startTransition] = useTransition();
+
+  return (
+    <form
+      action={upvoteWithId}
+      onSubmit={(event) => {
+        event.preventDefault();
+
+        startTransition(async () => {
+          mutate({
+            updatedFeature: {
+              ...feature,
+              score: Number(feature.score) + 1,
+            },
+            pending: true,
+          });
+          await upvote(feature);
+        });
+      }}
+      className={clsx(
+        "p-6 mx-8 flex items-center border-t border-l border-r",
+        isFirst && "rounded-t-md",
+        isLast && "border-b rounded-b-md",
+      )}
+    >
+      <button
+        className={clsx(
+          "ring-1 ring-gray-200 rounded-full w-8 min-w-[2rem] h-8 mr-4 focus:outline-none focus:ring focus:ring-blue-300",
+          (isReleased || hasVoted) &&
+            "bg-green-100 cursor-not-allowed ring-green-300",
+          pending && "bg-gray-100 cursor-not-allowed",
+        )}
+        disabled={isReleased || hasVoted || pending}
+        type="submit"
+      >
+        {isReleased ? "✅" : "👍"}
+      </button>
+      <h3 className="text font-semibold w-full text-left">{feature.title}</h3>
+      <div className="bg-gray-200 text-gray-700 text-sm rounded-xl px-2 ml-2">
+        {feature.score}
+      </div>
+    </form>
+  );
+}
+
+type FeatureState = {
+  newFeature: Feature;
+  updatedFeature?: Feature;
+  pending: boolean;
+};
+
+export default function FeatureForm({ features }: { features: Feature[] }) {
+  let formRef = useRef<HTMLFormElement>(null);
+  let [state, mutate] = useOptimistic(
+    { features, pending: false },
+    function createReducer(state, newState: FeatureState) {
+      if (newState.newFeature) {
+        return {
+          features: [...state.features, newState.newFeature],
+          pending: newState.pending,
+        };
+      } else {
+        return {
+          features: [
+            ...state.features.filter(
+              (f) => f.id !== newState.updatedFeature!.id,
+            ),
+            newState.updatedFeature,
+          ] as Feature[],
+          pending: newState.pending,
+        };
+      }
+    },
+  );
+
+  let sortedFeatures = state.features.sort((a, b) => {
+    // First, compare by score in descending order
+    if (Number(a.score) > Number(b.score)) return -1;
+    if (Number(a.score) < Number(b.score)) return 1;
+
+    // If scores are equal, then sort by created_at in ascending order
+    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+  });
+
+  let featureStub = {
+    id: uuidv4(),
+    title: "", // will used value from form
+    created_at: new Date().toISOString(),
+    score: "1",
+  };
+  let saveWithNewFeature = saveFeature.bind(null, featureStub);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let [isPending, startTransition] = useTransition();
+
+  return (
+    <>
+      <div className="mx-8 w-full">
+        <form
+          className="relative my-8"
+          ref={formRef}
+          action={saveWithNewFeature}
+          onSubmit={(event) => {
+            event.preventDefault();
+            let formData = new FormData(event.currentTarget);
+            let newFeature = {
+              ...featureStub,
+              title: formData.get("feature") as string,
+            };
+
+            formRef.current?.reset();
+            startTransition(async () => {
+              mutate({
+                newFeature,
+                pending: true,
+              });
+
+              await saveFeature(newFeature, formData);
+            });
+          }}
+        >
+          <input
+            aria-label="Suggest a feature for our roadmap"
+            className="pl-3 pr-28 py-3 mt-1 text-lg block w-full border border-gray-200 rounded-md text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-300"
+            maxLength={150}
+            placeholder="I want..."
+            required
+            type="text"
+            name="feature"
+            disabled={state.pending}
+          />
+          <button
+            className={clsx(
+              "flex items-center justify-center absolute right-2 top-2 px-4 h-10 text-lg border bg-black text-white rounded-md w-24 focus:outline-none focus:ring focus:ring-blue-300 focus:bg-gray-800",
+              state.pending && "bg-gray-700 cursor-not-allowed",
+            )}
+            type="submit"
+            disabled={state.pending}
+          >
+            Request
+          </button>
+        </form>
+      </div>
+      <div className="w-full">
+        {sortedFeatures.map((feature: any, index: number) => (
+          <Item
+            key={feature.id}
+            isFirst={index === 0}
+            isLast={index === sortedFeatures.length - 1}
+            isReleased={false}
+            hasVoted={false}
+            feature={feature}
+            pending={state.pending}
+            mutate={mutate}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

app/form.tsx

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-50;
+}
+
+input {
+  /** Remove shadow on Safari iOS */
+  -webkit-appearance: none;
+}

app/globals.css

@@ -0,0 +1,14 @@
+import "./globals.css";
+import { GeistSans } from "geist/font/sans";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={GeistSans.variable}>
+      <body>{children}</body>
+    </html>
+  );
+}