In our previous blog, we had an overview of our project and outlined the prerequisites. Now, in this blog, we'll dive into the process of constructing our Content Schema using Hygraph Headless CMS.

Getting Started

To get started, visit Hygraph and set up your account. Once you're in, navigate to the Add Project section and fill in the project details. While there are premade templates available, in this tutorial we will be creating everything from the ground up.

With your setup complete, proceed to the schema section. Here, you'll craft two new Model Schemas, namely Song and Artist.

The Song model will establish the framework for our songs, encompassing elements like song name, audio file, thumbnail, and more.

On the other hand, the Artist model will outline the content for the artist's page, including essential details such as the artist's name, profile picture, description, banner image, and more.

Creating our Song Schema Model

Song Name

Now, within your Song schema, proceed to create a Song Name field that is a Single Line Text, designed to store the title of your song.

Ensure that you tick the Make field required option within the validations field, and then click on Add to confirm.

Audio File

During the song addition process, the creator must upload the audio file of the song. To facilitate this, let's create an Asset Picker field. Please remember to ensure the "Make field required" box is checked in the validations section (as we've done this previously, I won't be repeating it in the next steps).

Song Thumbnail

In addition to the audio file, it's crucial to include a thumbnail for your song. This visual element not only adds aesthetic appeal but also enhances the overall user experience. Let's include an Asset Picker field in the schema to store the thumbnail for our songs.

Referencing songs to the artist

When creating a song, it's essential to establish a relationship between the song and its creator, the artist. To achieve this, we'll employ a Reference Field, which shows the relationship between the song and its originator. Choose a reference to the artist and ensure it's set as a two-way reference. Click Continue, leave the subsequent fields unchanged, and proceed by clicking Add.

Song Schema Overview

Your Song Schema should now take the following structure:

Creating our Artist Model

Head over to the artist Model and you should see a reference which we established in our song model.

Artist Name

Add a Single Text Field dedicated to storing the artist's name. Remember to mark this field as required to ensure completeness and accuracy of the data.

About

In addition to the Artist Name, we also want to feature a concise one-line description of the artist's work. To achieve this, we'll create another Single Line Text field, named About and mark it as required.

Let's further enhance the artist's profile by incorporating two additional fields: Banner and Profile Picture Utilizing the Asset Picker option, creators can personalize their profile with a distinctive banner and profile picture, enabling them to express their work more effectively. Mark them as required. As demonstrated below for the banner, follow the identical steps for the profile picture.

Description

It would be nice to have a small description of the artist and his work. For this, we will be using the Rich Text field which provides more flexibility on how your paragraph looks. You can add headings, text decorations, etc.

Adding Content

And just like that, we've completed the schema setup for our content. Now, let's take the first step by creating an artist. In our scenario, we'll name our artist Sebastian Mercer. Head to the Content section, choose Artist and initiate the creation of a new entry. Complete the entry by providing all necessary artist details, and then click on Save & Publish.

Your Entry should look something like this:

Next, we will create entries for the Song schema. Make sure you add a minimum of two entries so that we have them available for future use.

Your song content should look something like this:

Conclusion

With our content all set, our next step is to integrate it into our front end. In our upcoming blog, we'll dive into the process of querying this content through our API.

Part 2 - Building the Content Model