Merge branch 'main' into feat/add-link-tags-clickable-365

.env.example

@@ -2,23 +2,11 @@
 # Database 
 #
 DATABASE_URL="postgres://postgres:password@localhost:5432/postgres"
-
 #
 # AUTH 
 #
 NEXTAUTH_SECRET="koXrQGB5TFD4KALDX4kAvnQ5RHHvAOIzB"
 NEXTAUTH_URL="http://localhost:3000"
-
-# PRISMA STUDIO DOCKER
-POSTGRES_URL=postgres://postgres:postgres@db:5432/job-board-db
-POSTGRES_HOST=db
-POSTGRES_USERNAME=postgres
-POSTGRES_PASSWORD=postgres
-
-AWS_S3_REGION=your-aws-region
-AWS_S3_ACCESS_KEY_ID=your-access-ID
-AWS_S3_SECRET_ACCESS_KEY=your-access-key
-AWS_S3_BUCKET_NAME=your-bucket
 #
 # Bunny CDN
 #

docker-compose.yaml

@@ -46,4 +46,4 @@ services:
       - 5555:5555
 
 volumes:
-  postgres-data:
+  postgres-data:

next.config.js

@@ -1,3 +1,12 @@
+import { fileURLToPath } from "node:url";
+import createJiti from "jiti";
+
+const jiti = createJiti(fileURLToPath(import.meta.url));
+
+// Import env here to validate during build. Using jiti we can import .ts files :)
+jiti("./src/env/client");
+jiti("./src/env/server");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -9,12 +18,11 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        //Change it with your cdn access domain here
-        hostname: 'job-board.b-cdn.net',
+        protocol: "https",
+        hostname: "job-board.b-cdn.net", // Change this to your CDN domain
       },
     ],
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig; // ES module export

package.json

@@ -2,6 +2,7 @@
   "name": "100xdevs-job-board",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -47,6 +48,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
     "@uidotdev/usehooks": "^2.4.1",
@@ -56,6 +58,7 @@
     "dayjs": "^1.11.13",
     "framer-motion": "^11.5.4",
     "linkify-react": "^4.1.3",
+    "jiti": "^1.21.6",
     "lodash": "^4.17.21",
     "lucide-react": "^0.426.0",
     "next": "^14.2.12",

src/app/api/upload-to-cdn/route.ts

@@ -1,9 +1,10 @@
+import { serverEnv } from '@/env/server';
 import { NextResponse } from 'next/server';
 import { v4 as uuidv4 } from 'uuid';
 
-const CDN_BASE_UPLOAD_URL = process.env.CDN_BASE_UPLOAD_URL;
-const CDN_BASE_ACCESS_URL = process.env.CDN_BASE_ACCESS_URL;
-const CDN_API_KEY = process.env.CDN_API_KEY!;
+const CDN_BASE_UPLOAD_URL = serverEnv.CDN_BASE_UPLOAD_URL;
+const CDN_BASE_ACCESS_URL = serverEnv.CDN_BASE_ACCESS_URL;
+const CDN_API_KEY = serverEnv.CDN_API_KEY!;
 
 export async function POST(req: Request): Promise<NextResponse> {
   try {

src/components/UserCard.tsx

@@ -93,7 +93,7 @@ function UserCard() {
       {profiles.map((profile, index) => (
         <div
           key={index}
-          className="flex items-start space-x-4 bg-white p-4 border border-gray-200 rounded-lg"
+          className="flex items-start space-x-4 bg-white text-gray-700 p-4 border border-gray-200 rounded-lg"
         >
           <div className="w-16 flex-shrink-0">
             <Image

src/components/gmaps-autosuggest.tsx

@@ -1,5 +1,6 @@
 import Script from 'next/script';
 import { Input } from './ui/input';
+import { clientEnv } from '@/env/client';
 
 export type TgmapsAddress = { city: string; fullAddress: string };
 
@@ -26,7 +27,7 @@ export function GmapsAutocompleteAddress({ form }: { form: any }) {
   return (
     <>
       <Script
-        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
+        src={`https://maps.googleapis.com/maps/api/js?key=${clientEnv.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
         strategy="lazyOnload"
         onLoad={initializeGmaps}
       />

src/components/job-landing.tsx

@@ -103,9 +103,11 @@ const JobCard = async ({ searchParams }: PaginatorProps) => {
                     ? `$${formatSalary(job.maxSalary)}`
                     : 'Not Disclosed'}
                 </span>
-                <p className=" md:text-right text-xs text-muted-foreground mt-1">
-                  per annum
-                </p>
+                {job.minSalary && job.maxSalary && (
+                  <p className="md:text-right text-xs text-muted-foreground mt-1">
+                    per annum
+                  </p>
+                )}
               </div>
             </div>
           </Link>

src/env/client.ts

@@ -0,0 +1,13 @@
+// client-env.ts
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const clientEnv = createEnv({
+  client: {
+    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: z.string().min(1),
+  },
+  runtimeEnv: {
+    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:
+      process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
+  },
+});

src/env/server.ts

@@ -0,0 +1,22 @@
+// server-env.ts
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const serverEnv = createEnv({
+  server: {
+    DATABASE_URL: z.string().url(),
+    NEXTAUTH_SECRET: z.string().min(1),
+    NEXTAUTH_URL: z.string().url(),
+    CDN_API_KEY: z.string().min(1),
+    CDN_BASE_UPLOAD_URL: z.string().url(),
+    CDN_BASE_ACCESS_URL: z.string().url(),
+  },
+  runtimeEnv: {
+    DATABASE_URL: process.env.DATABASE_URL,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+    CDN_API_KEY: process.env.CDN_API_KEY,
+    CDN_BASE_UPLOAD_URL: process.env.CDN_BASE_UPLOAD_URL,
+    CDN_BASE_ACCESS_URL: process.env.CDN_BASE_ACCESS_URL,
+  },
+});