feat: initial commit

.env.example

@@ -0,0 +1,23 @@
+# -----------------------------------------------------------------------------
+# Authentication (NextAuth.js)
+# -----------------------------------------------------------------------------
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=
+
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+# -----------------------------------------------------------------------------
+# Database (MySQL - PlanetScale)
+# -----------------------------------------------------------------------------
+DATABASE_URL="mysql://root:root@localhost:3306/taxonomy?schema=public"
+
+# -----------------------------------------------------------------------------
+# Email (Postmark)
+# -----------------------------------------------------------------------------
+POSTMARK_API_TOKEN=
+SMTP_HOST=smtp.postmarkapp.com
+SMTP_PORT=25
+SMTP_USER=
+SMTP_PASSWORD=
+SMTP_FROM=Taxonomy <[email protected]>

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-head-element": "off"
+  }
+}

.gitignore

@@ -0,0 +1,39 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode

.nvmrc

@@ -0,0 +1 @@
+v14.17.3

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+<p align="center">
+  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
+  <br/>
+  <h1 align="center">Taxonomy</h1>
+	<p align="center">An open source application built using the new router, server components and everything new in Next.js 13.</p>
+</p>
+
+> This app is a work in progress. I'm building this in public. You can follow the progress on Twitter [@shadcn](https://twitter.com).
+
+## Demo
+
+See https://www.youtube.com/watch?v=G5vCj8wWkuc
+
+## Features
+
+- New `/app` dir,
+- Routing, Layouts, Nested Layouts and Layout Groups.
+- Data fetching, Caching and Mutation.
+- Loading UI,
+- Server and Client Components.
+- API Routes and Middlewares.
+- Authentication using **NextAuth.js**.
+- ORM using **Prisma**.
+- UI Components built using **Radix UI**.
+- Styled using **Tailwind CSS**.
+- Validations using **Zod**.
+- Written in **TypeScript**.
+
+## Roadmap
+
+> This app is a work in progress. I'm building this in public. You can follow the progress on Twitter [@shadcn](https://twitter.com).
+
+- Responsive styles.
+- Subscriptions using Stripe.
+- Add Media Library.
+- Add Pages.
+- Build the front-end for blogs.
+- Add support for custom domains for blogs.
+- Build marketing pages (use a headless CMS?)
+- Add MDX support for basic pages.
+- Add OG image for blog using @vercel/og.
+- Dark mode.
+
+## Issues
+
+A list of things not working for now:
+
+1. GitHub authentication (use email)
+2. NextAuth.js middleware (getSession not updated to work with Next.js 13)
+3. Returning `notFound()` is resulting in a linting error.
+
+## Why not trpc, Turborepo, pnpm or X?
+
+I might add this later. For now, I want to see how far we can get using Next.js only.
+
+If you have some suggestions, feel free to create an issue.
+
+## Running Locally
+
+1. Install dependencies using Yarn:
+
+```sh
+yarn
+```
+
+2. Copy `.env.example` to `.env.local` and update the variables.
+
+3. Start the development server:
+
+```sh
+yarn dev
+```
+
+## License
+
+Licensed under the [MIT license](https://github.com/reflexjs/reflex/blob/master/LICENSE).

app/(auth)/layout.tsx

@@ -0,0 +1,9 @@
+import "styles/globals.css"
+
+interface AuthLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: AuthLayoutProps) {
+  return <div className="grid min-h-screen grid-cols-2">{children}</div>
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link"
+
+import { Icons } from "@/components/icons"
+import { UserAuthForm } from "@/components/user-auth-form"
+
+export default function LoginPage() {
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center">
+      <Link
+        href="/"
+        className="absolute top-8 left-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3  text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
+      >
+        <>
+          <Icons.chevronLeft className="mr-2 h-4 w-4" />
+          Back
+        </>
+      </Link>
+      <div className="p-8">
+        <div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
+          <div className="flex flex-col space-y-2 text-center">
+            <Icons.logo className="mx-auto h-6 w-6" />
+            <h1 className="text-2xl font-bold">Welcome back</h1>
+            <p className="text-sm text-slate-500">
+              Enter your email to sign in to your account
+            </p>
+          </div>
+          <UserAuthForm />
+          <p className="px-8 text-center text-sm text-slate-500">
+            <Link href="/register" className="underline hover:text-brand">
+              Don&apos;t have an account? Sign Up
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

app/(auth)/register/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link"
+
+import { Icons } from "@/components/icons"
+import { UserAuthForm } from "@/components/user-auth-form"
+
+export default function RegisterPage() {
+  return (
+    <div className="grid h-screen w-screen grid-cols-2 flex-col items-center justify-center">
+      <Link
+        href="/login"
+        className="absolute top-8 right-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3  text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
+      >
+        Login
+      </Link>
+      <div className="h-full bg-slate-100" />
+      <div className="p-8">
+        <div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
+          <div className="flex flex-col space-y-2 text-center">
+            <Icons.logo className="mx-auto h-6 w-6" />
+            <h1 className="text-2xl font-bold">Create an account</h1>
+            <p className="text-sm text-slate-500">
+              Enter your email below to create your account
+            </p>
+          </div>
+          <UserAuthForm />
+          <p className="px-8 text-center text-sm text-slate-500">
+            By clicking continue, you agree to our{" "}
+            <Link href="/terms" className="underline hover:text-brand">
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link href="/privacy" className="underline hover:text-brand">
+              Privacy Policy
+            </Link>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

app/(dashboard)/dashboard/layout.tsx

@@ -0,0 +1,54 @@
+import { headers } from "next/headers"
+
+import { getSession } from "@/lib/session"
+import { DashboardBranding } from "@/components/dashboard-branding"
+import { DashboardNav } from "@/components/dashboard-nav"
+import { UserAccountNav } from "@/components/user-account-nav"
+import { notFound } from "next/navigation"
+
+interface DashboardLayoutProps {
+  children?: React.ReactNode
+}
+
+async function getUser() {
+  const session = await getSession(headers().get("cookie"))
+
+  if (!session?.user) {
+    return null
+  }
+
+  return session.user
+}
+
+export default async function DashboardLayout({
+  children,
+}: DashboardLayoutProps) {
+  const user = await getUser()
+
+  if (!user) {
+    return notFound()
+  }
+
+  return (
+    <>
+      <div className="flex h-screen overflow-hidden">
+        <aside className="hidden w-14 flex-col border-r border-slate-100 bg-slate-50 py-4 md:flex lg:w-56 lg:flex-shrink-0 lg:px-4">
+          <div className="flex flex-1 flex-col space-y-4">
+            <DashboardBranding />
+            <DashboardNav />
+          </div>
+          <UserAccountNav
+            user={{
+              name: user.name,
+              image: user.image,
+              email: user.email,
+            }}
+          />
+        </aside>
+        <main className="flex w-0 flex-1 flex-col overflow-hidden px-12 py-10">
+          {children}
+        </main>
+      </div>
+    </>
+  )
+}

app/(dashboard)/dashboard/loading.tsx

@@ -0,0 +1,21 @@
+import { DashboardHeader } from "@/components/dashboard-header"
+import { DashboardShell } from "@/components/dashboard-shell"
+import { PostCreateButton } from "@/components/post-create-button"
+import { PostItem } from "@/components/post-item"
+
+export default function DashboardLoading() {
+  return (
+    <DashboardShell>
+      <DashboardHeader heading="Posts" text="Create and manage posts.">
+        <PostCreateButton />
+      </DashboardHeader>
+      <div className="divide-y divide-neutral-200 rounded-md border border-slate-200">
+        <PostItem.Skeleton />
+        <PostItem.Skeleton />
+        <PostItem.Skeleton />
+        <PostItem.Skeleton />
+        <PostItem.Skeleton />
+      </div>
+    </DashboardShell>
+  )
+}