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?
│ 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?
│ @/
└
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
- `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,
});
Step 4: Create a router in @/src/server/api/routers/crackeddevs.ts
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(
`https://api.crackeddevs.com/v1/get-jobs?limit=${LIMIT}&active=${ACTIVE}`,
{
headers: {
"api-key": `${env.API_KEY}`,
},
},
);
return jobs.json();
}),
});
Step 5: Add crackeddevs router to @/src/server/api/root.ts
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
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() {
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>
);
}
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/