README.md

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Flexhire Challenge

Credits:

• Profile page Tailwind design based on: Profile Page
  author: jamesbhatta
• Set Key page Tailwind design based on: Tailwind CSS Password and confirm validation
  author: Sisableng

To run project locally will need few env vars

** Vercel deployed version at: https://flexhire-challenge.vercel.app

Profile Page

Nextjs-React 18 server components were used

1- Query the default api-key as env var
2- If saved api key available and saved before 1 hour, uses saved key
3- urql core-node were used to fetch data from flexhire graphql api

  const keyRow = await redis.hgetall<FlexhireData>(process.env.REDIS_HSET_KEY_NAME!);
  const currentApiKey = keyRow?.key;
  const updatedAt = keyRow?.updatedAt;
  // security measure; only the keys stored less than one hour ago are used
  const isFresh = isOneHourFresh(updatedAt);
  let response: OperationResult<Query, {}>;
  try {
    const client = createClient({
      url: flexhireBaseUrl!,
      fetchOptions: {
        headers: { "FLEXHIRE-API-KEY": isFresh && currentApiKey ? currentApiKey : flexhireApiKey! },
      },
    });

    type ProfileData = Query;

    const query = `
  query {
    currentUser {
      avatarUrl
      name
      userSkills {
        experience
        skill {
          name
        }
      }
      answers {
        optimizedUrl
        question {
          title
        }
      }
      profile {
        textIntroduction
        createdAt
        availability
        urlGithub
        urlLinkedin
        urlBlog
      }
    }
  }
  `;
    response = await client.query<ProfileData, {}>(query, {}).toPromise();

Screen cast

Job Applications Page

Since still do not have Applications records

No job applications at the moment

So I queryed the job opportunities instead

  type JobOpportunitiesData = Query;

  const query = `
  query {
    currentUser {
      jobOpportunities(first: 4) {
        nodes {
          title
          description
          positionTypes
          rateMode
          id
          freelancerRate {
            cents

Job opportunities page

Set Web Hook

Created a Webhook based on GraphQL schema for input type CreateWebhookInput.

HTTP POST requests with JSON bodies will be sent to this URL. The fields on
the body are 'event_name', 'timestamp' (unix integer format) and 'records'
(array of string IDs of related records)

The webhook url of deployed project looks like: POST https://flexhire-challenge.vercel.app/api/webhook

webhook flow goes like this

1- Nextjs route handler /api/webhook receives a POST HTTP 2- handler get's request body and validates against ZOD schema
3- after validation, handlers produce @upstash/kafka message
4- Next hook-events page reads(consume) @upstash/kafka messages not reactive-wise

Webhook flow

demo: check video