Skip to content

Commit d55b88c

Browse files
steven-teysteven-tey
committed
Initial commit from Create Next App
0 parents  commit d55b88c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+13369
-0
lines changed

‎.env.example

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
### These env vars are for authentication & database to work. If you don't require them, feel free to enter dummy values for all these.
2+
3+
# Create a free PostgreSQL database: https://vercel.com/postgres
4+
# If you're deploying this template with a Vercel Deploy Button, these will be configured automatically for you.
5+
POSTGRES_PRISMA_URL=
6+
POSTGRES_URL_NON_POOLING=
7+
8+
# Follow the instructions here to create a Google OAuth app: https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-googleprovider-make-sure-you-have-a-google-account
9+
GOOGLE_CLIENT_ID=
10+
GOOGLE_CLIENT_SECRET=
11+
12+
# Only for production – generate one here: https://generate-secret.vercel.app/32
13+
NEXTAUTH_SECRET=
14+
15+
## Only required for localhost
16+
NEXTAUTH_URL=http://localhost:3000

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
.env
31+
32+
# vercel
33+
.vercel
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts
38+
39+
# misc
40+
.vscode

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
yarn.lock
2+
node_modules
3+
.next

‎LICENSE.md

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

‎README.md

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<a href="https://precedent.dev">
2+
<img alt="Precedent – Building blocks for your Next project" src="https://precedent.dev/opengraph-image" />
3+
<h1 align="center">Precedent</h1>
4+
</a>
5+
6+
<p align="center">
7+
Building blocks for your Next project
8+
</p>
9+
10+
<p align="center">
11+
<a href="https://twitter.com/steventey">
12+
<img src="https://img.shields.io/twitter/follow/steventey?style=flat&label=steventey&logo=twitter&color=0bf&logoColor=fff" alt="Steven Tey Twitter follower count" />
13+
</a>
14+
<a href="https://github.com/steven-tey/precedent">
15+
<img src="https://img.shields.io/github/stars/steven-tey/precedent?label=steven-tey%2Fprecedent" alt="Precedent repo star count" />
16+
</a>
17+
</p>
18+
19+
<p align="center">
20+
<a href="#introduction"><strong>Introduction</strong></a> ·
21+
<a href="#one-click-deploy"><strong>One-click Deploy</strong></a> ·
22+
<a href="#tech-stack--features"><strong>Tech Stack + Features</strong></a> ·
23+
<a href="#author"><strong>Author</strong></a>
24+
</p>
25+
<br/>
26+
27+
## Introduction
28+
29+
Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.
30+
31+
## One-click Deploy
32+
33+
You can deploy this template to Vercel with the button below:
34+
35+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent&project-name=precedent&repository-name=precedent&demo-title=Precedent&demo-description=An%20opinionated%20collection%20of%20components%2C%20hooks%2C%20and%20utilities%20for%20your%20Next%20project.&demo-url=https%3A%2F%2Fprecedent.dev&demo-image=https%3A%2F%2Fprecedent.dev%2Fopengraph-image&env=GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,NEXTAUTH_SECRET&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent%2Fblob%2Fmain%2F.env.example&stores=%5B%7B"type"%3A"postgres"%7D%5D)
36+
37+
You can also clone & create this repo locally with the following command:
38+
39+
```bash
40+
npx create-next-app precedent --example "https://github.com/steven-tey/precedent"
41+
```
42+
43+
Then, install the dependencies with your package manager of choice:
44+
45+
```bash
46+
npm i
47+
yarn
48+
pnpm i
49+
```
50+
51+
## Tech Stack + Features
52+
53+
https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4
54+
55+
### Frameworks
56+
57+
- [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience
58+
- [Auth.js](https://authjs.dev/) – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
59+
- [Prisma](https://www.prisma.io/) – Typescript-first ORM for Node.js
60+
61+
### Platforms
62+
63+
- [Vercel](https://vercel.com/) – Easily preview & deploy changes with git
64+
- [Vercel Postgres](https://vercel.com/postgres) – Serverless Postgres at the Edge
65+
66+
### UI
67+
68+
- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development
69+
- [Radix](https://www.radix-ui.com/) – Primitives like modal, popover, etc. to build a stellar user experience
70+
- [Framer Motion](https://framer.com/motion) – Motion library for React to animate components with ease
71+
- [Lucide](https://lucide.dev/) – Beautifully simple, pixel-perfect icons
72+
- [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) – Optimize custom fonts and remove external network requests for improved performance
73+
- [`ImageResponse`](https://nextjs.org/docs/app/api-reference/functions/image-response) – Generate dynamic Open Graph images at the edge
74+
75+
### Hooks and Utilities
76+
77+
- `useIntersectionObserver` –  React hook to observe when an element enters or leaves the viewport
78+
- `useLocalStorage` – Persist data in the browser's local storage
79+
- `useScroll` – React hook to observe scroll position ([example](https://github.com/steven-tey/precedent/blob/main/components/layout/navbar.tsx#L12))
80+
- `nFormatter` – Format numbers with suffixes like `1.2k` or `1.2M`
81+
- `capitalize` – Capitalize the first letter of a string
82+
- `truncate` – Truncate a string to a specified length
83+
- [`use-debounce`](https://www.npmjs.com/package/use-debounce) – Debounce a function call / state update
84+
85+
### Code Quality
86+
87+
- [TypeScript](https://www.typescriptlang.org/) – Static type checker for end-to-end typesafety
88+
- [Prettier](https://prettier.io/) – Opinionated code formatter for consistent code style
89+
- [ESLint](https://eslint.org/) – Pluggable linter for Next.js and TypeScript
90+
91+
### Miscellaneous
92+
93+
- [Vercel Analytics](https://vercel.com/analytics) – Track unique visitors, pageviews, and more in a privacy-friendly way
94+
95+
## Author
96+
97+
- Steven Tey ([@steventey](https://twitter.com/steventey))

‎app/api/auth/[...nextauth]/route.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import NextAuth, { NextAuthOptions } from "next-auth";
2+
import { PrismaAdapter } from "@next-auth/prisma-adapter";
3+
import prisma from "@/lib/prisma";
4+
import GoogleProvider from "next-auth/providers/google";
5+
6+
export const authOptions: NextAuthOptions = {
7+
adapter: PrismaAdapter(prisma),
8+
providers: [
9+
GoogleProvider({
10+
clientId: process.env.GOOGLE_CLIENT_ID as string,
11+
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
12+
}),
13+
],
14+
};
15+
16+
const handler = NextAuth(authOptions);
17+
18+
export { handler as GET, handler as POST };

‎app/favicon.ico

5.03 KB
Binary file not shown.

‎app/fonts/SF-Pro-Display-Medium.otf

328 KB
Binary file not shown.

‎app/fonts/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import localFont from "next/font/local";
2+
import { Inter } from "next/font/google";
3+
4+
export const sfPro = localFont({
5+
src: "./SF-Pro-Display-Medium.otf",
6+
variable: "--font-sf",
7+
});
8+
9+
export const inter = Inter({
10+
variable: "--font-inter",
11+
subsets: ["latin"],
12+
});

‎app/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎app/layout.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import "./globals.css";
2+
import { Analytics } from "@vercel/analytics/react";
3+
import cx from "classnames";
4+
import { sfPro, inter } from "./fonts";
5+
import Nav from "@/components/layout/nav";
6+
import Footer from "@/components/layout/footer";
7+
import { Suspense } from "react";
8+
9+
export const metadata = {
10+
title: "Precedent - Building blocks for your Next.js project",
11+
description:
12+
"Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.",
13+
metadataBase: new URL("https://precedent.dev"),
14+
themeColor: "#FFF",
15+
};
16+
17+
export default async function RootLayout({
18+
children,
19+
}: {
20+
children: React.ReactNode;
21+
}) {
22+
return (
23+
<html lang="en">
24+
<body className={cx(sfPro.variable, inter.variable)}>
25+
<div className="fixed h-screen w-full bg-gradient-to-br from-indigo-50 via-white to-cyan-100" />
26+
<Suspense fallback="...">
27+
<Nav />
28+
</Suspense>
29+
<main className="flex min-h-screen w-full flex-col items-center justify-center py-32">
30+
{children}
31+
</main>
32+
<Footer />
33+
<Analytics />
34+
</body>
35+
</html>
36+
);
37+
}

‎app/opengraph-image.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
import { ImageResponse } from "next/server";
3+
4+
export const runtime = "edge";
5+
export const alt = "Precedent - Building blocks for your Next.js project";
6+
export const contentType = "image/png";
7+
8+
export default async function OG() {
9+
const sfPro = await fetch(
10+
new URL("./fonts/SF-Pro-Display-Medium.otf", import.meta.url),
11+
).then((res) => res.arrayBuffer());
12+
13+
return new ImageResponse(
14+
(
15+
<div
16+
style={{
17+
height: "100%",
18+
width: "100%",
19+
display: "flex",
20+
flexDirection: "column",
21+
alignItems: "center",
22+
justifyContent: "center",
23+
backgroundColor: "white",
24+
backgroundImage:
25+
"linear-gradient(to bottom right, #E0E7FF 25%, #ffffff 50%, #CFFAFE 75%)",
26+
}}
27+
>
28+
<img
29+
src={`https://${process.env.VERCEL_URL || "precedent.dev"}/logo.png`}
30+
alt="Precedent Logo"
31+
tw="w-20 h-20 mb-4 opacity-95"
32+
/>
33+
<h1
34+
style={{
35+
fontSize: "100px",
36+
fontFamily: "SF Pro",
37+
background:
38+
"linear-gradient(to bottom right, #000000 21.66%, #78716c 86.47%)",
39+
backgroundClip: "text",
40+
color: "transparent",
41+
lineHeight: "5rem",
42+
letterSpacing: "-0.02em",
43+
}}
44+
>
45+
Precedent
46+
</h1>
47+
</div>
48+
),
49+
{
50+
width: 1200,
51+
height: 630,
52+
fonts: [
53+
{
54+
name: "SF Pro",
55+
data: sfPro,
56+
},
57+
],
58+
},
59+
);
60+
}

0 commit comments

Comments
 (0)