feat: bump node and nextjs verison + general upgrades

this commit upgrades versions and adds a few quality of life features like environment variable checking

.env.example

@@ -0,0 +1,14 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.js"
+# should be updated accordingly.
+
+# Example:
+# SERVERVAR="foo"
+# NEXT_PUBLIC_CLIENTVAR="bar"

.eslintrc.cjs

@@ -0,0 +1,37 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+  ],
+  rules: {
+    // These opinionated rules are enabled in stylistic-type-checked above.
+    // Feel free to reconfigure them to your own preference.
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        checksVoidReturn: { attributes: false },
+      },
+    ],
+  },
+};
+
+module.exports = config;

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ["18.12.0"]
+        node-version: ["21.5.0"]
 
     steps:
       - name: Check out code

.github/workflows/style.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ["18.12.0"]
+        node-version: ["21.5.0"]
 
     steps:
       - name: ☁ Checkout code
@@ -41,7 +41,7 @@ jobs:
         run: npm ci
 
       - name: 🎨 Check code formatting
-        run: npm run test:format
+        run: npm run format:check
 
       - name: 🐛 Lint the code
-        run: npm run test:lint
+        run: npm run lint

.gitignore

@@ -8,9 +8,14 @@
 # testing
 /coverage
 
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build
@@ -23,13 +28,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
 .env*.local
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts

.tool-versions

@@ -1 +1 @@
-nodejs 18.12.0
+nodejs 21.5.0

README.md

@@ -1,34 +1,28 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Create T3 App
 
-## Getting Started
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
 
-First, run the development server:
+## What's next? How do I make an app with this?
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
 
 ## Learn More
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
 
-## Deploy on Vercel
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## How do I deploy this?
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

app/layout.tsx

@@ -1,5 +1,5 @@
 import "/styles/globals.css";
-import { Inter, Orbitron } from "@next/font/google";
+import { Inter, Orbitron } from "next/font/google";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
@@ -25,7 +25,7 @@ export default function RootLayout({
         {/* --> checkered lines */}
         <div className="absolute -z-50 h-full w-full">
           <div>
-            {[...Array(7)].map((_, index) => (
+            {[...Array<null>(7)].map((_, index) => (
               <div
                 key={index}
                 className="absolute h-0.5 w-full bg-gray-50 shadow-inner"
@@ -34,7 +34,7 @@ export default function RootLayout({
             ))}
           </div>
           <div className="flex flex-row">
-            {[...Array(20)].map((_, index) => (
+            {[...Array<null>(20)].map((_, index) => (
               <div
                 key={index}
                 className="absolute h-full w-0.5 bg-gray-50 shadow-inner"

app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Hero from "@/components/Hero";
 import Banners from "@/components/Banners";
-import CalendariumBenefits from "@/components/CalendariumBenefits";
+// import CalendariumBenefits from "@/components/CalendariumBenefits";
 import NewsAndEvents from "@/components/NewsAndEvents";
 
 export default function Home() {

components/DatePicker.tsx

@@ -29,7 +29,7 @@ const Date: React.FC<DateProps> = ({
         className="w-16 items-center text-xl text-slate-400 transition-colors hover:text-gray-900"
         onClick={() => {
           const prevYearIndex = Math.max(0, selectedYearIndex - 1);
-          onYearChange(yearDataList[prevYearIndex].year);
+          onYearChange(yearDataList[prevYearIndex]!.year);
         }}
       >
         <i className="bi bi-chevron-left"></i>
@@ -46,8 +46,8 @@ const Date: React.FC<DateProps> = ({
               parseInt(yearData.year) === parseInt(selectedYear) - 2
                 ? "gradient-text-left"
                 : parseInt(yearData.year) === parseInt(selectedYear) + 2
-                ? "gradient-text-right"
-                : ""
+                  ? "gradient-text-right"
+                  : ""
             }`}
             key={yearData.year}
             onClick={() => onYearChange(yearData.year)}
@@ -64,7 +64,7 @@ const Date: React.FC<DateProps> = ({
             selectedYearIndex + 1,
             yearDataList.length - 1,
           );
-          onYearChange(yearDataList[nextYearIndex].year);
+          onYearChange(yearDataList[nextYearIndex]!.year);
         }}
       >
         <i className="bi bi-chevron-right"></i>

components/Navbar.tsx

@@ -9,6 +9,7 @@ export default function Navbar() {
   return (
     <div className="flex h-10 items-center justify-between">
       <a href="/">
+        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
         <Image src={logo} alt="" width={136} height={46} priority />
       </a>
       <div className="flex flex-row">

components/SeiComponent.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import sei from "@/public/sei.png";
 import { MdOutlineVideoLibrary } from "react-icons/md";
-import Link from "next/link";
+// import Link from "next/link";
 
 export default function Index() {
   return (

env.js

@@ -0,0 +1,40 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  },
+
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+});

next.config.js

@@ -1,4 +1,10 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import("./env.js");
 
-module.exports = nextConfig;
+/** @type {import("next").NextConfig} */
+const config = {};
+
+export default config;