Initial Commit

railway-bot · railway-bot · commit e8295b7e6053 · 2022-08-17T12:37:56.000Z
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,34 @@
+# 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
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: yarn start
diff --git a/README.md b/README.md
@@ -0,0 +1,39 @@
+---
+title: NextJS Prisma
+description: A NextJS app using Prisma with a PostgreSQL database
+tags:
+  - next
+  - prisma
+  - postgresql
+  - typescript
+---
+
+# NextJS Prisma Example
+
+This example is a [NextJS](https://nextjs.org/) todo app that uses
+[Prisma](https://www.prisma.io/) to store todos in Postgres.
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new?template=https%3A%2F%2Fgithub.com%2Frailwayapp%2Fexamples%2Ftree%2Fmaster%2Fexamples%2Fnextjs-prisma&plugins=postgresql)
+
+## ✨ Features
+
+- Prisma
+- NextJS
+- Postgres
+- TypeScript
+
+## 💁‍♀️ How to use
+
+- [Provision a Postgres container on Railway](https://dev.new)
+- Connect to your Railway project with `railway link`
+- Migrate the database `railway run yarn migrate:dev`
+- Run the NextJS app `railway run yarn dev`
+
+## 📝 Notes
+
+This app is a simple todo list where the data is persisted to Postgres. [Prisma
+migrations](https://www.prisma.io/docs/concepts/components/prisma-migrate#prisma-migrate)
+can be created with `railway run yarn migrate:dev` and deployed with `railway run yarn migrate:deploy`. The Prisma client can be regenerated with
+`yarn generate`.
+
+[swr](https://swr.vercel.app/) is used to fetch data on the client and perform optimistic updates.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "with-nextjs-postgres",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "yarn migrate:deploy && next build",
+    "start": "next start --port ${PORT-3000}",
+    "migrate:dev": "prisma migrate dev --preview-feature",
+    "migrate:deploy": "prisma migrate deploy --preview-feature",
+    "migrate:status": "prisma migrate status --preview-feature",
+    "generate": "prisma generate"
+  },
+  "dependencies": {
+    "@prisma/client": "2.30.0",
+    "next": "12.1.0",
+    "pg": "^8.5.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "swr": "^0.4.1"
+  },
+  "devDependencies": {
+    "prisma": "2.30.0",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "typescript": "^4.1.3"
+  }
+}
diff --git a/prisma/migrations/20210130000309_init/migration.sql b/prisma/migrations/20210130000309_init/migration.sql
@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "Todo" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "text" TEXT NOT NULL,
+    "completed" BOOLEAN NOT NULL,
+
+    PRIMARY KEY ("id")
+);
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,2 @@
+# Please do not edit this file manually
+provider = "postgresql"
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -0,0 +1,18 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model Todo {
+  id        String   @id @default(uuid())
+  createdAt DateTime @default(now())
+  text      String
+  completed Boolean
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/vercel.svg b/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
diff --git a/src/api.ts b/src/api.ts
@@ -0,0 +1,42 @@
+import useSWR, { mutate } from "swr";
+import { Todo } from "./types";
+
+const todoPath = "/api/todos";
+
+export const useTodos = () => useSWR<Todo[]>(todoPath);
+
+export const createTodo = async (text: string) => {
+  mutate(
+    todoPath,
+    todos => [{ text, completed: false, id: "new-todo" }, ...todos],
+    false,
+  );
+  await fetch(todoPath, {
+    method: "POST",
+    body: JSON.stringify({ text }),
+  });
+
+  mutate(todoPath);
+};
+
+export const toggleTodo = async (todo: Todo) => {
+  mutate(
+    todoPath,
+    todos =>
+      todos.map(t =>
+        t.id === todo.id ? { ...todo, completed: !t.completed } : t,
+      ),
+    false,
+  );
+  await fetch(`${todoPath}?todoId=${todo.id}`, {
+    method: "PUT",
+    body: JSON.stringify({ completed: !todo.completed }),
+  });
+  mutate(todoPath);
+};
+
+export const deleteTodo = async (id: string) => {
+  mutate(todoPath, todos => todos.filter(t => t.id !== id), false);
+  await fetch(`${todoPath}?todoId=${id}`, { method: "DELETE" });
+  mutate(todoPath);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/src/pages/api/todos.ts b/src/pages/api/todos.ts
@@ -0,0 +1,38 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "GET") {
+    // get all todos
+    const todos = await prisma.todo.findMany({
+      orderBy: { createdAt: "desc" },
+    });
+    res.json(todos);
+  } else if (req.method === "POST") {
+    // create todo
+    const text = JSON.parse(req.body).text;
+    const todo = await prisma.todo.create({
+      data: { text, completed: false },
+    });
+
+    res.json(todo);
+  } else if (req.method === "PUT") {
+    // update todo
+    const id = req.query.todoId as string;
+    const data = JSON.parse(req.body);
+    const todo = await prisma.todo.update({
+      where: { id },
+      data,
+    });
+
+    res.json(todo);
+  } else if (req.method === "DELETE") {
+    // delete todo
+    const id = req.query.todoId as string;
+    await prisma.todo.delete({ where: { id } });
+
+    res.json({ status: "ok" });
+  }
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -0,0 +1,95 @@
+import { NextPage } from "next";
+import Head from "next/head";
+import { useMemo, useState } from "react";
+import { createTodo, deleteTodo, toggleTodo, useTodos } from "../api";
+import styles from "../styles/Home.module.css";
+import { Todo } from "../types";
+
+export const TodoList: React.FC = () => {
+  const { data: todos, error } = useTodos();
+
+  if (error != null) return <div>Error loading todos...</div>;
+  if (todos == null) return <div>Loading...</div>;
+
+  if (todos.length === 0) {
+    return <div className={styles.emptyState}>Try adding a todo ☝️️</div>;
+  }
+
+  return (
+    <ul className={styles.todoList}>
+      {todos.map(todo => (
+        <TodoItem todo={todo} />
+      ))}
+    </ul>
+  );
+};
+
+const TodoItem: React.FC<{ todo: Todo }> = ({ todo }) => (
+  <li className={styles.todo}>
+    <label
+      className={`${styles.label} ${todo.completed ? styles.checked : ""}`}
+    >
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        className={`${styles.checkbox}`}
+        onChange={() => toggleTodo(todo)}
+      />
+      {todo.text}
+    </label>
+
+    <button className={styles.deleteButton} onClick={() => deleteTodo(todo.id)}>
+      ✕
+    </button>
+  </li>
+);
+
+const AddTodoInput = () => {
+  const [text, setText] = useState("");
+
+  return (
+    <form
+      onSubmit={async e => {
+        e.preventDefault();
+        createTodo(text);
+        setText("");
+      }}
+      className={styles.addTodo}
+    >
+      <input
+        className={styles.input}
+        placeholder="Buy some milk"
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button className={styles.addButton}>Add</button>
+    </form>
+  );
+};
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Railway NextJS Prisma</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <header className={styles.header}>
+        <h1 className={styles.title}>Todos</h1>
+        <h2 className={styles.desc}>
+          NextJS app connected to Postgres using Prisma and hosted on{" "}
+          <a href="https://railway.app">Railway</a>
+        </h2>
+      </header>
+
+      <main className={styles.main}>
+        <AddTodoInput />
+
+        <TodoList />
+      </main>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
diff --git a/src/styles/globals.css b/src/styles/globals.css
diff --git a/src/types.ts b/src/types.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/// <reference types="next" />`
	`2`	`+/// <reference types="next/types/global" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Please do not edit this file manually`
	`2`	`+provider = "postgresql"`