Fetching Data from CrackedDevs API with create-t3-app

This tutorial will guide you through the process of using the CrackedDevs API with a create-t3-app application.

Step 1: Create a new create-t3-app application

First, you need to create a new create-t3-app application. You can do this by running the following command in your terminal:

npx create-t3-app@latest

Step 2: Choose the following while scafolding create-t3-app.

  What will your project be called?

  Will you be using TypeScript or JavaScript?

  Will you be using Tailwind CSS for styling?

  Would you like to use tRPC?

  What authentication provider would you like to use?

  What database ORM would you like to use?

   EXPERIMENTAL  Would you like to use Next.js App Router?

  Should we initialize a Git repository and stage the changes?

  Should we run 'bun install' for you?

  What import alias would you like to use?

Step 3:Add API Key to .env file and add properties to env.js file

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
client: {


- 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,
- 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,

Step 4: Create a router in @/src/server/api/routers/crackeddevs.ts


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(
        headers: {
          "api-key": `${env.API_KEY}`,

    return jobs.json();

Step 5: Add crackeddevs router to @/src/server/api/root.ts


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;

Step 6: Call the procedure in front-end.

Call api procedure in @/src/app/page.tsx


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() {
  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

Step 7: Run the application

Finally, you can run your application by executing the following command

npm run dev

Step 8: Visit the page

Finally, you can visit the page by navigating to http://localhost:3000/

Step 9: If any issues, you can check out the code

Visit https://github.com/CrackedDevs/examples

Was this page helpful?