What is Hygraph and how can it be used to build a job aggregator with no backend code?
Hygraph is a GraphQL-native content platform that enables you to build applications like job aggregators without writing backend code. By leveraging features such as Remote Sources and content federation, you can aggregate job listings from external APIs (e.g., Remotive) and present them in a unified format. The tutorial on building a job aggregator demonstrates how to use Hygraph with SvelteKit and Tailwind CSS to create a fully functional job board app, fetching and displaying jobs via Hygraph's API. Source: Hygraph Blog
What are Remote Sources in Hygraph and how do they help with content federation?
Remote Sources in Hygraph allow you to integrate external APIs (such as REST or GraphQL endpoints) directly into your content models. This enables content federation, meaning you can unify data from multiple sources and expose it through a single GraphQL API. For example, in the job aggregator tutorial, the Remotive API is added as a Remote Source, making it possible to fetch and display job listings alongside your own content. Source: Hygraph Documentation
What are some other use cases for Hygraph besides job aggregators?
Hygraph is used for a variety of digital experiences, including e-commerce, inventory and catalog management, and structured content organization. Its flexible schema and API-first approach make it suitable for building modern web apps, content-rich platforms, and integrating with other services. Source: Hygraph Use Cases
Features & Capabilities
Does Hygraph provide an API for managing and fetching content?
Yes, Hygraph offers a powerful GraphQL API that allows you to efficiently fetch and manage content. This API is central to building applications like job aggregators, enabling seamless integration with frontend frameworks and external data sources. Source: Hygraph API Reference
What integrations does Hygraph support?
Hygraph supports a wide range of integrations, including hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. Source: Hygraph Integrations
What are the key capabilities and benefits of Hygraph?
Hygraph provides a GraphQL-native architecture, content federation, and scalability. Key benefits include faster speed-to-market, control at scale, and lower total cost of ownership. These capabilities make it ideal for modern digital experiences and complex content management needs. Source: Hygraph Features
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans tailored to specific business needs. For the most up-to-date details, visit the Hygraph Pricing Page.
Technical Requirements & Documentation
What technical skills are required to build a job aggregator with Hygraph?
To follow the job aggregator tutorial, you should have working knowledge of HTML, CSS, and JavaScript, as well as Node.js and npm installed on your local machine. Familiarity with frontend frameworks like SvelteKit and styling tools like Tailwind CSS is also recommended. Source: Hygraph Blog
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation for Hygraph is available at Hygraph Documentation. It covers everything from getting started to advanced integrations and API usage.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Source: Hygraph Security Features
Support & Implementation
How easy is it to get started with Hygraph?
Hygraph is designed for ease of use, even for non-technical users. You can sign up for a free account and start building projects quickly. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Resources such as documentation, onboarding guides, and video tutorials are available to help you get started. Source: Hygraph Documentation, Top Villas Case Study
What customer support options are available with Hygraph?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel for further assistance. Source: Hygraph Contact Page
Customer Proof & Success Stories
Who are some of Hygraph's customers?
Hygraph is trusted by leading brands across various industries, including Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. Source: Hygraph Case Studies
Can you share specific customer success stories with Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More success stories are available on the Hygraph product page.
Pain Points & Solutions
What common pain points does Hygraph solve for its users?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). Source: Hygraph Product Page
How does Hygraph solve these pain points?
Hygraph provides an intuitive interface for non-technical users, modernizes legacy tech stacks with its GraphQL-native architecture, enables content federation for global teams, and streamlines workflows to reduce costs and speed up time-to-market. It also simplifies development, query management, and schema evolution, and resolves cache and integration challenges. Source: Hygraph Product Page
Performance & Metrics
How does Hygraph optimize content delivery performance?
Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. Source: Headless CMS Checklist
Getting Started & Resources
How can I get started with Hygraph?
You can get started by signing up for a free-forever account at Hygraph. Resources such as documentation, video tutorials, and onboarding guides are available to help you navigate the platform effectively. Source: Hygraph Documentation
How to build a job aggregator with no backend code
In this tutorial, you'll learn how to create a job aggregator without any backend code using Hygraph and SvelteKit. You'll also use Tailwind CSS, a utility-first CSS framework, for styling the app.
Written by Ashutosh
on Mar 07, 2023
A job aggregator is a website or platform that gathers job listings from various sources on the web and presents them in one place, which makes it easier for job seekers to search and find job opportunities.
However, gathering these listings from multiple sources—including job boards, recruitment agencies, and company websites—and integrating them into a unified format can be a tedious and time-consuming task to set up and maintain manually. After all, once it's ready to go, you also need to make sure that the job listings remain up-to-date and accurate.
Luckily, there are tools that can help you out. Hygraph, for example, is a GraphQL content platform that has many use cases, such as in e-commerce, inventory and catalog management, as well as structuring and organizing content. For developing a job aggregator app, it offers Remote Sources, a content federation utility that allows you to quickly and easily add content from multiple sources, such as job boards, and create a single GraphQL API.
In this tutorial, you'll learn how to create a job aggregator without any backend code using Hygraph and SvelteKit. You'll also use Tailwind CSS, a utility-first CSS framework, for styling the app.
In this tutorial, you'll build a job aggregator that sources job listings from Remotive. You'll also create a Page data model. The job listings will then be fetched from the Remotive API and displayed on the SvelteKit frontend using the data fetched from the Hygraph GraphQL API.
Prerequisites
To follow along with this tutorial, you need the following:
Working knowledge of HTML, CSS, and JavaScript
Node.js and npm installed on your local dev machine
Any code editor of your choice (for example, VS Code)
Setting up Hygraph
This section outlines the process of setting up Hygraph and creating a project for a job aggregator application. The first step is to create a Hygraph account, which you'll use to create the project and run the job aggregator application.
On your Hygraph dashboard, click Add project to create a new blank project.
You will be prompted to enter some details. Name the project "Job Aggregator" and choose the region closest to your location. You can also optionally add a project description. Click Add Project to create the project.
Create a model in Hygraph
In this section, you'll create a model for our application in Hygraph. A model is a blueprint or schema that defines the structure of our application's data. By creating a model, you provide a structure for our data and ensure that it conforms to a specific format.
Head over to your Hygraph dashboard and click on the Schema tab on the left sidebar.
Click on + Add on the left sidebar next to Models and name the model “Page”. Click Add Model on the bottom right, after naming the model to save it.
Next, you'll add fields to this Page model. From the right sidebar, click on the Single line text field.
You'll be prompted to add a Display name to this field. Add "Title" as the display name and click Add.
Now, click on Rich text on the right sidebar, enter "Body" as the Display name of this field, and click Add to save it.
In this section, you'll learn how to add the Remotive API as a remote source to fetch job listings for your application. By doing so, you can retrieve data from an external API and use it in your Hygraph application.
Click Add next to the Remote Sources tab in the left sidebar. When prompted, name the Remote Source "Remotive" and select Type as REST.
To ensure that the app runs quickly for this tutorial, the response from the Remotive API is limited to five jobs. However, in a real-world application, you would typically retrieve a larger dataset and paginate the results to improve performance.
The next step is to add a custom type definition to define the structure of REST API. Click on + Add custom type definition.
Add the following code to create a type named Query in the custom type definition section for the response from Remotive API:
typeQuery{
legalNotice:String
jobCount:Int
jobs:[Job]
}
You also need to create another type for the actual job object present in the Query type. Create another type named Job by clicking on + Add custom type definition and add the following code to it:
typeJob{
id:Int
url:String
title:String
company_name:String
company_logo:String
category:String
job_type:String
publication_date:String
candidate_required_location:String
salary:String
description:String!
tags:[String]
}
Here is how this will look in the Hygraph dashboard:
Click on Add on the top right to save this Remote Source. Now, you'll add this Remotive remote source to your Page Model. Click on the Page model on the left sidebar. On the right sidebar, scroll down to the bottom. Click the field named REST.
You'll be prompted to enter details about this field:
Display name: "JobsQuery"
API ID: "jobsQuery" (this will be auto-generated)
Remote source: "Remotive"
Method:"GET"
Return type: "Query" (the custom type created in the previous steps)
You can leave the other fields blank.
Click Add to save this field. You've successfully added the Remotive remote source to your Page model.
You now have the Page model that defines the structure of the content, but you're missing the actual content that will be shown on the front end. In this section, you'll add data to the fields in the Page model you created previously and test it in the API playground.
Click on Content in the left sidebar and click + Add entry on the top right.
Enter the following data:
Title: "Svelte + Hygraph Job Aggregator"
Body: "Find the Best Remote Jobs"
After adding the data, click Save & publish.
Now, you will query this data in the API playground. Click on API playground tab in the left sidebar.
Add the following GraphQL query, and hit Run:
queryPages{
pages{
id
title
body{
html
}
jobsQuery{
jobs{
id
url
title
company_name
company_logo
category
job_type
publication_date
candidate_required_location
salary
tags
}
}
}
}
Below is how the playground looks after the successful execution of the query. The response can be viewed on the right side of the playground, and the jobs array fetched from Remotive API is located under the jobsQuery field.
Setting up permissions for the Content API
In this step, you'll set up permissions for the Content API so that your data can be accessed only through authenticated requests. Content API is a read-and-write endpoint that allows querying and mutating data in your project as well as caching it for best performance, and setting up permissions which allows you to control who can access your data and what actions they can perform on it.
Click Project settings in the left sidebar and then click API Access, as shown below. You will see all the endpoints for your project, such as Content API, Management API, etc. You will use the Content API to fetch your data from Hygraph and copy this endpoint.
Next, you'll create an auth token for your project and use it to make authenticated requests to your Content API. Click on Permanent Auth Tokens in the left sidebar and then click + Add token.
When prompted for the Token name, enter "Svelte Job Aggregator" and click Add & Configure permissions.
Your token will look something like the screenshot below. Copy this token, as it will be later used on the frontend to fetch data from the Content API.
On the same page, scroll down to the Content API section and click Yes, initialize defaults to add Read permissions to this token.
The no-code backend setup with Hygraph is now complete.
Setting up SvelteKit with Tailwind CSS
The next step is to create the frontend of this app using SvelteKit and Tailwind CSS.
First, you'll initialize a SvelteKit project. In your project's root directory, run the following commands in the terminal:
When prompted for Svelte app template, select Skeleton project:
? Which Svelte app template? › - Use arrow-keys. Return to submit.
SvelteKit demo app
❯ Skeleton project - Barebones scaffolding for your new SvelteKit app
Library skeleton project
Select No for other configs:
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
Run the following commands to install Tailwind CSS to the SvelteKit project:
cd svelte-hygraph-job-aggregator
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
Update the svete.config.js file like this:
importadapterfrom"@sveltejs/adapter-auto";
import{ vitePreprocess }from"@sveltejs/kit/vite";
/** @type {import('@sveltejs/kit').Config} */
const config ={
kit:{
adapter:adapter(),
},
preprocess:vitePreprocess(),
};
exportdefault config;
Modify the tailwind.config.cjs file like this:
/** @type {import('tailwindcss').Config} */
module.exports={
content:["./src/**/*.{html,js,svelte,ts}"],
theme:{
extend:{},
},
plugins:[],
};
The next step is to create an app.css file in the src directory. Run the following command in the project root directory to create the file:
touch src/app.css
Now, add the @tailwinddirectives to app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the following command to create a +layout.svelte file in the src/routes folder:
touch src/routes/+layout.svelte
Add the following code to +layout.svelte file to import the newly created app.css file:
<script>
import"../app.css";
</script>
<slot/>
Run the following commands to install dotenv and create a file named .env to securely store our Content API endpoint and auth token as environment variables:
npm i dotenv
touch .env
Paste your content API endpoint and auth token from Hygraph in this .env file:
First, you start by importing GraphQLClient and gql from graphql-request. You also import your environment variables from $env/static/private.
You create a load function containing a GraphQL client for your Content API endpoint. You then pass the Content API endpoint and auth token to the GraphQLClient method.
Next, you create the GraphQL query using the gql syntax. You fetch all the data necessary to construct the job listing, which you can customize to meet your needs.
Finally, you make the API request and return the data from the load() function.
First, you export a variable named data. This data is updated with the response from the load function in the +page.svelte file so you can extract pages from it:
<script>
export let data;
let pages = data.pages;
let { title, body, jobsQuery } = pages[0];
let jobs = jobsQuery.jobs;
</script>
You then extract the title, body, and jobsQuery from the first element of the pages array. You also create jobs variable which holds the actual jobs listing data from the jobsQuery variable.
Next, you display the title and the body on your app. We can use the {@html ...} tag to render html from body.html directly in your app:
In this code block, you create an input field and bind its value to the value variable.
Your app will look something like this:
Now, you have a static search bar, but typing in it doesn’t do anything. You need to create a function that filters the jobs based on the input in the search bar. Update the script tag like this:
In this tutorial, you learned how to build a job aggregator app with Hygraph and SvelteKit, two modern web development tools for fast and responsive web apps.
Specifically, you created a comprehensive web app with no backend code using Hygraph's powerful API for web scraping and data collection capabilities, as well as SvelteKit to build server-side-rendered pages and APIs solely with frontend code. You also learned how to create server-only modules in SvelteKit. These modules let you do server-side tasks such as fetching data or interacting with APIs. These tools help you create a great user experience without having to worry about complex server setups.
You used Remotive API as the job board API in this tutorial, but you can follow the same steps for other APIs such as Remote OK API or We Work Remotely API to build similar job aggregator apps.
Blog Author
Ashutosh Singh
Ashutosh is a writer, learner, and JavaScript developer who enjoys writing articles that help people.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.