Fetching Data from CrackedDevs API with create-t3-app

│
◇  What will your project be called?
│  crackeddevs
│
◇  Will you be using TypeScript or JavaScript?
│  TypeScript
│
◇  Will you be using Tailwind CSS for styling?
│  Yes
│
◇  Would you like to use tRPC?
│  Yes
│
◇  What authentication provider would you like to use?
│  None
│
◇  What database ORM would you like to use?
│  None
│
◇   EXPERIMENTAL  Would you like to use Next.js App Router?
│  Yes
│
◇  Should we initialize a Git repository and stage the changes?
│  Yes
│
◇  Should we run 'bun install' for you?
│  Yes
│
◆  What import alias would you like to use?
│  @/
└

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"]),
API_KEY: z.string(), // Example of a required string
},

/\*\*

- 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,
API_KEY: process.env.API_KEY,
// 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,
});

import { createTRPCRouter, publicProcedure } from "@0/server/api/trpc";
import { env } from "@0/env";

export const crackeddevsRouter = createTRPCRouter({
  getJobs: publicProcedure.query(async () => {
    const LIMIT = 20;
    const ACTIVE = true;

    const jobs = await fetch(
      `https://api.crackeddevs.com/v1/get-jobs?limit=${LIMIT}&active=${ACTIVE}`,
      {
        headers: {
          "api-key": `${env.API_KEY}`,
        },
      },
    );

    return jobs.json();
  }),
});

import { postRouter } from '@/server/api/routers/post';

import { createTRPCRouter } from '@/server/api/trpc';

import { crackeddevsRouter } from './routers/crackeddevs';

/**

* This is the primary router for your server.

*

* All routers added in /api/routers should be manually added here.

*/

export const appRouter = createTRPCRouter({
  post: postRouter,

  crackeddevs: crackeddevsRouter,
});

// export type definition of API

export type AppRouter = typeof appRouter;

import { unstable_noStore as noStore } from 'next/cache';
import { api } from '@/trpc/server';
import Link from 'next/link';

type jobType = {
  id: string;
  title: string;
  description: string;
  company: string;
  technologies: string[];
  main_technology: string;
  job_type: string;
  max_payment_usd: number;
  country_iso: string;
  applications: number;
  views: number;
  apply_url: string;
};

export default async function Home() {
  noStore();
  const jobs = await api.crackeddevs.getJobs.query();

  return (
    <div className="p-5">
      <h1 className="mb-5 text-4xl">Jobs</h1>
      {jobs.map((job: jobType) => (
        <div key={job.id} className="m-5 rounded-md border border-gray-300 p-5">
          <h2 className="mb-2 text-2xl">{job.title}</h2>
          <p className="mb-2">{job.description}</p>
          <p className="mb-2">Company: {job.company}</p>
          <p className="mb-2">Technologies: {job.technologies.join(', ')}</p>
          <p className="mb-2">Main Technology: {job.main_technology}</p>
          <p className="mb-2">Job Type: {job.job_type}</p>
          <p className="mb-2">Salary: {job.max_payment_usd} USD</p>
          <p className="mb-2">Location: {job.country_iso || 'Remote'}</p>
          <p className="mb-2">Applications: {job.applications}</p>
          <p className="mb-2">Views: {job.views}</p>
          <Link href={job.apply_url} className="text-blue-500 hover:underline">
            Apply Here
          </Link>
        </div>
      ))}
    </div>
  );
}