Road to creating Product Roadmap Tool without coding

Understanding what your users need is the core for any product. Therefore, most SAAS products these days have a public facing roadmap. We at Canonic also wanted to provide the same within our platform. The goal was simple:

• accept feature requests from the users
• provide visibility for features in the backlog, in progress, to be picked up next and the recently released features
• We also wanted to provide details around the feature requests and enable users to upvote for it

The front-end of the application is gonna be built on react, and the backend will be built on Canonic. We’ll show how easy, fast and flexible it is to build your production ready backend in less than 15 minutes.

The application will look like this:

Roadmap Tool

What are we waiting for then! Go to app.canonic.dev and Log In. If you don’t have an account, Signup! It’s free to use under very generous limits! After you log in, you’ll come straight to the dashboard.

Creating a Project

Create a New Project by clicking on the + Create New button on the top.

Creating a new project

After you click, you’ll be presented with the options to name your project, select which category it belongs to, etc.

Filling out creation options

After filling the details, click Next. It’ll present you with 3 options for the Database Configurations. Since we are making a new project from the start, we’ll select the first option Create, where canonic will automatically provision a database for your project!

Final screen for creating project

Hit Create, and your new project is created! You can find more about creating a project here.

Creating a backend involves three main parts:

1. Defining your Model: How the data structure is gonna look like for your database, your schema basically!
2. Feeding Data: After you define your structure/model of your database, entering data into it.
3. Fetching Data: Getting the data over REST or GraphQL APIs for your frontend to consume and show!

I — Defining your Model

Now as per our requirements, we have 3 main points of information that we need to make the backend for our Roadmap:

• Ticket: Our frontend will need to fetch all the tickets that are created by the users
• Upvote: Our frontend will need to fetch all the upvotes on the the various features

In database terms, we can think of them as tables that will hold all the information related to them respectively. Let’s start defining them! Once you fill in all the information, you’ll see an option to create a table:

Creating “Ticket” table

Enter the name: Ticket. We’ll chose the type of the table as LIST since we can have multiple tickets in our database. Think of list type as an Array if you are coming from a coding background. Hit Create!

Now we define all the attributes our Ticket table can have. We’ll define three attributes to our category:

• Title of the ticket.
• Description of the ticket
• Release date of the ticket
• Tags of the ticket
• Status of the ticket
• Upvotes (Count) on the ticket
• Upvoted (Function) for the ticket
• User Information of who created the ticket

Click on the + Field option to add these attributes to our table. A panel will come up from below, where you can set, of what type the field should be, its name, etc. Different types are available for different needs like: TEXT, NUMBER, DATE, IMAGE, etc. You can see some system generated fields automatically for you! + Fieldset option allows you to group certain fields for better structuring of cms system.

Adding fields to “Ticket” model

Listed below are the various field types you can define for various characteristics. You can also set default values for your fields, setup validations if you like, etc.

• Title of the ticket. — TEXT
• Description of the ticket — TEXT
• Release date of the ticket — DATE
• Tags of the ticket — PICKER
• Status of the ticket — PICKER
• Upvotes (Count) on the ticket — COMPUTED
• Upvote (Function) for the ticket — TOGGLE
• User Information of who created the ticket — FIELD SET
• Name for the user — TEXT
• Email for the user — TEXT

Here is how to create a TEXT field type under the name Title.

Creating TEXT field in our model

After adding the Description field, also as TEXT. Create User Information as a FIELD SET and then add the Names and Email fields as TEXT. Your graph should look like this:

Next, you can click on + Field option and create a field type called Status and set PICKER as a field type.

Creating “picker” type field

On the right click on EDIT OPTIONS to add some of the statuses. It should look something like this

Adding picker options

Similarly create a PICKER option for Tags. Once you do this, the graph should look something like this:

“Ticket” model

Now we will add the Upvote Functionality. Create a new field called Upvoted and select TOGGLE Field Type.

Creating a toggle field

Now we will add the Upvotes Count. Create a new field called Upvotes and select COMPUTED Field Type. You can set the output key as count and type as INT.

Computed Field type for Upvotes

Now we will create another new field to add Release Date. Create a new field called Release Date and select DATE Field Type.

Date field type for “Release Date”

WOHOOO! Your first table is complete now. This is how the graph schema would look like:

Final “Ticket” model

Now we will add another table. Create a new table called Upvote and select LIST option.

“Upvote” table

Listed below are the various field types you can define for various characteristics of Upvote Table.

• Ticket for linking to ticket thats upvoted. — LINK
• User Information of the person who upvoted — FIELD SET
• Email of the user who upvoted — TEXT
• UserID of the user who upvoted — TEXT

Click on the + Field option to add a Field, Ticket and select LINK field style and from the dropdown chose the table, Ticket

Linking one table to another (foreign key)

Click on the + Field option again to add a Fieldset, Upvoter Information and add 2 new fields (Email Id and User ID) to this set as TEXT Field Types. This is how your graph should look:

“Upvote” Table

This is incredible. Your database for building a Roadmap is now defined using the schema. Just hit Deploy!

Deploying your project

Canonic will:

• Deploy your project
• Give you a CMS (Content Management System) tailored for your project so that you can start adding data into your tables immediately!
• Spit out the CRUD (Create, Read, Update, Delete) APIs, both REST and GraphQL for all the tables you’ve defined to consume your data by your frontend.
• Generate documentation for your APIs for you get started immediately!

You can find more documentation on modelling your content here.

II — Feeding Data

Navigate to the CMS to start entering or managing the data!

CMS to instantly start adding data

III — Fetching Data

Once you deploy your project, all the CRUD APIs are also deployed and are there to use straight-up for you. If you head to the DOCS tab, you’ll be able to see all necessary information needed to fetch your data over REST and GraphQL Endpoints. You’ll be able to see:

• The endpoint you need to call to fetch the data
• The request and response parameters
• Example requests and responses for all of the available APIs

Autogenerated documentation for your APIs

Now, you simply need to consume these APIs on a frontend and your roadmap tool is ready to go. You can use any framework you want like ReactJs, AngularJs, VueJs, or even Gatsby!

Hope this guide was helpful and we are excited to see you built your roadmap using Canonic. If you want you can also duplicate this project from Canonic’s sample app and easily get started by customising it as per your experience. If you want to experience how our roadmap turned out. Check it out app.canonic.dev.

Please let us know if you have any questions or doubts regarding this guide in the comments. Looking forward to hearing from you! Checkout our website to know more about Canonic.