Merge pull request #31 from hackerspace-ntnu/28-feat-set-up-database-…

…and-trcp

Setup db, s3, trpc and feide auth

.dockerignore

@@ -32,4 +32,7 @@ Dockerfile*
 .gitignore
 
 # docs
-README.md
+README.md
+
+# data
+/data

.env.example

@@ -9,6 +9,27 @@
 # When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 
-# Example:
-# SERVERVAR="foo"
-# NEXT_PUBLIC_CLIENTVAR="bar"
+# General
+NODE_ENV="development"
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+
+# Database
+DATABASE_HOST="localhost"
+DATABASE_PORT="5432"
+DATABASE_USER="user"
+DATABASE_PASSWORD="password"
+DATABASE_NAME="database"
+
+# Storage
+STORAGE_HOST="localhost"
+STORAGE_PORT="9000"
+STORAGE_USER="user"
+STORAGE_PASSWORD="password"
+STORAGE_NAME="images"
+
+# Auth
+FEIDE_CLIENT_ID=
+FEIDE_CLIENT_SECRET=
+FEIDE_AUTHORIZATION_ENDPOINT="https://auth.dataporten.no/oauth/authorization"
+FEIDE_TOKEN_ENDPOINT="https://auth.dataporten.no/oauth/token"
+FEIDE_USERINFO_ENDPOINT="https://auth.dataporten.no/openid/userinfo"

.gitignore

@@ -21,4 +21,7 @@ next-env.d.ts
 
 # site map
 public/sitemap.xml
-public/robots.txt
+public/robots.txt
+
+# data
+/data

Dockerfile

@@ -4,13 +4,14 @@ WORKDIR /app
 
 COPY package.json bun.lockb ./
 
-RUN bun install --production
+RUN bun install --production --frozen-lockfile
 
 COPY . .
 
+ENV SKIP_ENV_VALIDATION=true
 ENV NODE_ENV=production
 RUN bun run build
 
 EXPOSE 3000
 
-ENTRYPOINT [ "bun", "run", "start" ]
+ENTRYPOINT [ "bun", "run", "start" ]

README.md

@@ -2,15 +2,40 @@
 
 Here is a list of documentation to help you get started:
 
+### Frontend
+
 - [React](https://react.dev/reference/react) - Library for building user interfaces
 - [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
 - [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
+- [nuqs](https://nuqs.47ng.com/docs/installation) - Easy to use query params
+- [BlockNote](https://www.blocknotejs.org/docs) - Tool for markdown textboxes
+- [Tanstack Form](https://tanstack.com/form/latest/docs/overview) - When we need to handle form validation (shadcn/ui uses react-hook-form. but I think this is better, we will figure it out)
+- [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - TRPC wraps Tanstack Query which is how we fetch data from the backend
+
+#### Styling
+
 - [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
 - [Class Variance Authority](https://beta.cva.style/) - Tool for creating style variants in our UI components
-- [Shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
-  - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that Shadcn/ui is built on, great documentation if you need to access the underlying components
+- [shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
+  - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that shadcn/ui is built on, great documentation if you need to access the underlying components
+- [Aceternity/ui](https://ui.aceternity.com/components) - More fancy components that can be used (matches shadcn/ui)
+- [tsparticles](https://github.com/tsparticles/react) - Cool particles library we can use as backgrounds
 - [Lucide](https://lucide.dev/icons/) - Icons library
 
+### Backend
+
+- [TRPC](https://trpc.io/docs) - Tool for creating API endpoints as functions
+- [Lucia](https://lucia-auth.com) - Authentication library
+- [Drizzle](https://orm.drizzle.team/docs/overview) - ORM for interacting with the database (Postgres under the hood)
+- [s3-client](https://github.com/aws/aws-sdk-js-v3/tree/main/clients/client-s3) - AWS S3 client for uploading files
+
+### Infrastructure
+
+- [Docker](https://docs.docker.com/get-started/) - Containerization tool for the application, database and storage
+- [Colima](https://github.com/abiosoft/colima) - Container runtime for docker, I recommend this over Docker Desktop because of performance and license
+- [Docker Compose](https://docs.docker.com/compose/) - Tool for running multi-container applications
+- [nginx](https://nginx.org/en/docs/) - Reverse proxy for routing requests to the correct service
+
 ### Other resources
 
 - [Mozilla](https://developer.mozilla.org/en-US/) - Great resource for looking up documentation for web technologies
@@ -24,8 +49,8 @@ Here is a list of documentation to help you get started:
 
 - When you want to link to a new internal page use the `<Link>` component from `@/lib/navigation` instead of the normal anchortag `<a>`. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `<Link>` component from Next.js. Remember to add `prefetch={false}` to the `<Link>` component if the page is not visited often.
   - If you need to use both `<Link>` components from `@/lib/navigation` and Next.js, make sure to import the Next.js `<Link>` component as `ExternalLink` to avoid naming conflicts.
-- Remember to surround Links with the `Button` ui component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button.
-- For interationalization use the `useTranslations` hook from `next-intl`. For client components you can pass the translations as props.
+- Remember to surround Links with the `Button` UI component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button.
+- For internationalization use the `useTranslations` hook from `next-intl`. For client components you can pass the translations as props.
 
 ## Development setup
 
@@ -49,7 +74,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 ## Build
 
-When you build the project, you prerender all the Server Side Generated (SSG) pages. This makes the site load faster and perform better and behave like it will when it is deployed. When serving the built project it will not hot reload when you make changes to the code like it does in development mode.
+When you build the project, you pre-render all the Server Side Generated (SSG) pages. This makes the site load faster and perform better and behave like it will when it is deployed. When serving the built project it will not hot reload when you make changes to the code like it does in development mode.
 
 You can build the project with the following command:
 

docker-compose.yml

@@ -0,0 +1,29 @@
+services:
+  app:
+    depends_on:
+      - db
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+  db:
+    image: postgres:16
+    environment:
+      POSTGRES_USER: ${DATABASE_USER}
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
+      POSTGRES_DB: ${DATABASE_NAME}
+    volumes:
+      - ./data/db:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+  s3:
+    image: bitnami/minio:2024
+    environment:
+      MINIO_ROOT_USER: ${STORAGE_USER}
+      MINIO_ROOT_PASSWORD: ${STORAGE_PASSWORD}
+      MINIO_DEFAULT_BUCKETS: ${STORAGE_NAME}
+    volumes:
+      - ./data/s3:/bitnami/minio/data
+    ports:
+      - "9000:9000"

drizzle.config.ts

@@ -0,0 +1,10 @@
+import { env } from '@/env';
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  schema: './src/server/db/schema/*.ts',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: `postgresql://${env.DATABASE_USER}:${env.DATABASE_PASSWORD}@${env.DATABASE_HOST}:${env.DATABASE_PORT}/${env.DATABASE_NAME}`,
+  },
+});

next-sitemap.config.js

@@ -1,6 +1,8 @@
+import { env } from '@/env';
+
 /** @type {import('next-sitemap').IConfig} */
 const config = {
-  siteUrl: process.env.SITE_URL ?? 'https://localhost:3000',
+  siteUrl: env.NEXT_PUBLIC_SITE_URL,
   generateRobotsTxt: true,
   generateIndexSitemap: false,
 };

next.config.js

@@ -5,7 +5,7 @@ import nextIntl from 'next-intl/plugin';
  * for Docker builds.
  */
 await import('./src/env.js');
-const withNextIntl = nextIntl('./src/i18n.ts');
+const withNextIntl = nextIntl('./src/lib/locale/i18n.ts');
 
 /** @type {import("next").NextConfig} */
 const config = {};

package.json

@@ -10,10 +10,17 @@
     "build": "next build",
     "dev": "next dev --turbo",
     "lint": "biome check --write --unsafe",
-    "start": "next start"
+    "start": "next start",
+    "db:start": "docker-compose up db",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "s3:start": "docker-compose up s3"
   },
   "dependencies": {
-    "@libsql/client": "^0.6.2",
+    "@aws-sdk/client-s3": "^3.637.0",
+    "@lucia-auth/adapter-drizzle": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -23,26 +30,30 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.45.1",
-    "@trpc/client": "^10.45.2",
-    "@trpc/react-query": "^10.45.2",
-    "@trpc/server": "^10.45.2",
+    "@tanstack/react-query": "^5.53.1",
+    "@trpc/client": "^11.0.0-rc.490",
+    "@trpc/react-query": "^11.0.0-rc.490",
+    "@trpc/server": "^11.0.0-rc.490",
     "autoprefixer": "^10.4.19",
+    "client-only": "^0.0.1",
     "cmdk": "1.0.0",
     "country-flag-icons": "^1.5.12",
     "cva": "^1.0.0-beta.1",
-    "drizzle-orm": "^0.31.2",
-    "lucide-react": "^0.429.0",
+    "drizzle-orm": "^0.33.0",
+    "lucia": "^3.2.0",
+    "lucide-react": "^0.396.0",
     "next": "^14.2.4",
-    "next-intl": "^3.15.2",
+    "next-intl": "^3.18.1",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "nuqs": "^1.17.4",
+    "postgres": "^3.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reading-time": "^1.5.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.4",
+    "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.2",
     "zod": "^3.23.8"
   },
@@ -51,7 +62,7 @@
     "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "drizzle-kit": "^0.22.7",
+    "drizzle-kit": "^0.24.1",
     "lefthook": "^1.7.14",
     "postcss": "^8.4.38",
     "tailwind-scrollbar": "^3.1.0",

src/app/[locale]/(default)/layout.tsx

@@ -1,8 +1,7 @@
-import { unstable_setRequestLocale } from 'next-intl/server';
-
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
+import { unstable_setRequestLocale } from 'next-intl/server';
 
 type DefaultLayoutProps = {
   children: React.ReactNode;

src/app/[locale]/(default)/news/(header)/layout.tsx

@@ -1,8 +1,8 @@
-import { SquarePen } from 'lucide-react';
+import { SquarePenIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
-import { Link } from '@/lib/navigation';
+import { Link } from '@/lib/locale/navigation';
 
 import { Button } from '@/components/ui/Button';
 
@@ -23,7 +23,7 @@ export default function NewsHeaderLayout({
         <h1 className='my-4'>{t('title')}</h1>
         <Button asChild size='sm'>
           <Link href='/news/new'>
-            <SquarePen className='mr-2 h-4 w-4' />
+            <SquarePenIcon className='mr-2 h-4 w-4' />
             {t('newArticle')}
           </Link>
         </Button>

src/app/[locale]/(default)/page.tsx

@@ -1,14 +1,17 @@
+import { HelloWorld } from '@/components/home/HelloWorld';
+import { api } from '@/lib/api/server';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
-export default function HomePage({
+export default async function HomePage({
   params: { locale },
 }: {
   params: { locale: string };
 }) {
   unstable_setRequestLocale(locale);
+  const hello = await api.test.helloWorld();
   return (
     <div className='min-h-screen'>
-      <h2>Landing Page</h2>
+      <h2>{hello}</h2>
       <p>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni delectus
         cupiditate debitis! Fuga minus quod ea eligendi exercitationem. Sequi
@@ -44,6 +47,7 @@ export default function HomePage({
         assumenda sequi dolorem asperiores quidem quis eos quaerat dolor.
         Excepturi, aspernatur suscipit.
       </p>
+      <HelloWorld />
     </div>
   );
 }

src/app/[locale]/(default)/storage/layout.tsx

@@ -1,14 +1,12 @@
-import { useTranslations } from 'next-intl';
-
 import { Button } from '@/components/ui/Button';
-
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import { ShoppingCart } from 'lucide-react';
+import { ShoppingCartIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 export default function StorageLayout({
   children,
@@ -25,7 +23,7 @@ export default function StorageLayout({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button className='absolute right-0 bottom-0 md:right-5'>
-                <ShoppingCart />
+                <ShoppingCartIcon />
               </Button>
             </TooltipTrigger>
             <TooltipContent>

src/app/[locale]/(default)/storage/page.tsx

@@ -1,14 +1,7 @@
-import { items } from '@/mock-data/items';
-import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import Image from 'next/image';
-import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
-
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
 import { Button } from '@/components/ui/Button';
 import {
   Card,
-  CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
@@ -23,6 +16,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/Select';
+import { items } from '@/mock-data/items';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import Image from 'next/image';
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/server';
 
 export async function generateMetadata({
   params: { locale },