How to Build a Web Portal with GraphQL

The term web portal is a broad term that serves as the core web application that houses information surrounding a specific topic, often from multiple sources. Portals can serve a broad list of use cases, typically under the domain of Knowledge Management, such as company intranets, FAQ sections, support portals, and media hubs, for example. Building a portal is a complex task that requires teams to consider what types of information will be housed, how the data should be organized, what platforms will people consume this information, and who would be creating content with which level of authentication, to name a few. In this post, we will break down different types of web portals and how to build a web portal with GraphQL.

#What is a Web Portal?

Websites typically have a single purpose or message. There are some websites that can bring together resources from across the web to become a data rich repository of information called portals. Web portals are online sites which bring together pages either from a specific brand, or from across the internet, including search engines and thematic content hubs.

Web portals can also be thematic content hubs or more curated platforms which bring together sites with a specific theme, such as health information, journal articles, and banking information.

#Types of Web Portals

The various types of portals indicate the type of information they house and the audience they serve. We’ll take a look at three types of portals: general portals, commerce portals, and knowledge portals.

General Portals

General portals are portals that serve information which covers a wide array of topics and interests. Search engines can be examples of a general portal. The goal of a general web portal is to connect the users with information from multiple sources that contribute relevant and helpful information around a particular topic. Using web portals makes more content accessible to users.

Commerce Portals

Commerce portals are portals that allow companies to conduct transactions at any time and house up-to-date information on inventory or order management. This allows users to place orders with ease and makes the order process more reliable. Commerce portals are particularly helpful for B2B business transactions. They typically are intended for larger orders than a normal eCommerce site or for sites with extensive product offerings.

Knowledge Portals

Knowledge portals are one of the most common types of portals. They house curated content around a specific topic while pulling information from a broad range of sources. Many companies have intranet portals where employees can access all of the information pertaining to the company in one place. Knowledge portals can also give users information on an industry, government actions, or current events. In having a specific topic of purpose, knowledge portals realize the goal of creating an accessible wealth of information on a particular topic.

#How to Build a Web Portal

The details of building a web portal depend highly on the use case and the information that teams are looking to serve. In this example, we will keep things simple and discuss how to create a basic portal for people who are looking for information around Digital Experience Platforms similar to BuildyourDXP project maintained by Hygraph.

Step 1: Map the Information and Data Sources

In order to choose the best tech stack for your use case, it is first important to consider what kind of information you will be sharing and where that data will come from.

Important considerations include:

• Is the content static or dynamic?

• Is it media heavy?

• How should the data be organized to provide a meaningful user experience?

• Will all of the data come from a single source or will the data be federated from multiple sources?

• Should it include ‘Search’ functionality?

• Does the content need to be localized?

Step 2: Decide on the Tech Stack

Based on the answers to these questions and having a greater understanding of what functionality you need the tech stack to provide. In simple use cases, teams will typically need a backend content platform or flexible headless CMS to organize, federate, and store the data, a modern frontend framework to build engaging user experiences, and additional services to provide additional functionality such as Search, Personalization, and Chatbots.

Step 3: Build out your Content Model

Hygraph is a GraphQL native content platform that enables teams to federate content from external services, or migrate data into the CMS, and have it queried in the frontend making it easily accessible.

To build your content model within Hygraph teams use the Schema Editor UI to add the fields that are relevant to the particular content model to build a structured content model. While some teams may choose to use the schema editor to build out pages, it is recommended that teams take a structured content approach, keeping data modular and flexible. We take a closer look at modeling data in Hygraph in additional blog posts.

For BuildyourDXP, our data models follow a mixture of structured content for the categorization logic, and GraphQL Union Types for custom sorting.

Step 4: Design the Portal

Good design brings cohesion and helps provide a pleasurable user experience. Design can also include giving users more context on your brand and its values. This can be particularly helpful for intranet portals.

Step 5: Build the Frontend

Using a flexible GraphQL backend means that teams have the power to build a performant frontend that matches their needs. Popular frontend frameworks like NextJS help teams optimize their performance on the frontend and find a good balance of short project timelines without compromising functionality. Using a GraphQL client, teams can query data from the GraphQL backend for the frontend framework.

Step 6: Deploy your Web Portal

Pushing a web portal live is one of the final steps to creating a web portal that is ready for consumption by users. To deploy your portal quickly and easily, teams can use services like Vercel or Netlify to handle all of the deployments and hosting.

Building a web portal with a flexible GraphQL backend makes it easy to quickly build a web portal that suits your needs. Teams use Hygraph to build web portals in production for a wide range of circumstances from internal knowledge portals to external knowledge portals.