DEV Community

Mariano Pardo
Mariano Pardo

Posted on

How to build a No-Code backend for a Link Sharing app with GraphQL and Rest API support

#graphql #restapi #nocode #backend

In this post I want to show how to build a production ready-backend for a Link Sharing application in just minutes, without writing a single line of code.

Functional requirements

  • Users can create accounts using email and password or using social networks (Google, Facebook or GitHub).
  • Authenticated users can submit links with a title and a description.
  • Authenticated users can update or delete their own submissions.
  • Authenticated users can upvote or downvote any link.
  • Authenticated users can comment on any link.
  • Authenticated users can update or delete their own comments.
  • Authenticated users can upvote or downvote any comment.
  • The vote results (number of upvotes - number of downvotes) must automatically be kept up to date on links and comments.
  • After sign up, users should receive an email for verifying their email address and also a welcome email. Users can also request a password recovery email.
  • Authenticated users can update their email and password.
  • The system can be controlled using GraphQL and/or a Rest API.

For creating this application we will use Commun an Open Source No-Code platform for creating scalable backends for communities and user based apps.

System Requirements

  • Node.js version >= 12 (can be checked with node -v).
  • MongoDB version >= 3.6 (can be checked with mongo --version).

Create an empty project

The fastest way to bootstrap a new project is using the npx tool which is included with node:

npx create-commun-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

After the installation is completed your application should be running and you should see an output similar to this one:

🚀 development server started at http://localhost:3000

    🎩‍ Admin dashboard: http://localhost:3000/dashboard

    💪 API endpoint: http://localhost:3000/api/v1/:entity

    🔑 Register your first admin account: http://localhost:3000/dashboard/signup?code=3d91c05d81b8cdf18997b1d07c6529e9eec3

    👌 GraphQL endpoint: http://localhost:3000/graphql
Enter fullscreen mode Exit fullscreen mode

Let's follow the link to register an admin account. This account will only exist in your local environment. You should see a screen like this one:

Register an admin account on Commun

After you completed the required information, your account will be created and you will have access to your dashboard.

Commun Dashboard

Create entities

Entities represent the components of your application. For this application we will need to create the entities Links, Comments, LinkVotes and CommentVotes. The entity Users exists by default.

Links Entity

On the left sidebar on your dashboard, click on Add entity. Enter the name links and select the checkbox Users can create Links.

After the entity is created, you need to add an attribute for each value a link can have.

  1. Add an attribute with key link and type String. Check the required and unique checkboxes to ensure each link can only be submitted once.
  2. Add an attribute with key title and type String. Check the required checkbox to ensure all links will have a title. Set a maximum length of 150 characters.
  3. Add an attribute with key description and type String.
  4. Add an attribute with key slug, type Slug and set from title. This will automatically create an URL friendly slug from your title. Select the required, unique and read only checkboxes to ensure the slug cannot be changed and it is unique.

Comments Entity

Create a new entity with the name comments and select the checkbox Users can create Comments. Then add the following attributes:

  1. Attribute with key body and type String, which will contain the text of the comment.
  2. Attribute with key link and type Entity Reference. Select Links on the entity reference selector, this attribute will only accept the ID of a link. Then check the index checkbox, which will allow you to efficiently return all the comments for a given link. Last, check the required and read only checkboxes.

Link Votes

Create a new entity with name linkVotes and select the checkbox Users can create LinkVotes. Then add the following attributes:

  1. Attribute with key link, type Entity Reference and entity reference Links. Check the required and read only checkboxes.
  2. Attribute with key value and type Enum. On the list of accepted values add 1 and -1, both with type Number. This attribute will only accept these values, which represent an upvote and downvote respectively. Then check the required and read only checkboxes.

Ensuring an user can only vote a link once

In order to ensure that an user can only vote a link once, we need to create an index on the entity. Go to the indexes section and click add index. On the index keys select user and link, both with type Ascending. Then select the unique checkbox.

Keeping the vote results up to date.

In order to keep the vote results (number of upvotes - number of downvotes) up to date, you need to follow these steps:

  1. Go to the Links entity and add a new attribute with key votes, type Number and default value 0. Then under Attribute Permissions, for create and update permissions select Only the system. This will ensure that users cannot modify the number of votes on a link.
  2. Go back to the LinkVotes entity and open the Hooks section.
    1. Add a new hook with lifecycle After Create, action Increment, target this.link.votes and increment by {this.value}.
    2. Add a new hook with lifecycle After Delete, action Increment, target this.link.votes and increment by {-this.value}.

Comment Votes

Creating comment votes is almost identical to creating link votes. Create a new entity with the name commentVotes and select the checkbox Users can create CommentVotes. Then follow the same steps as for Link Votes, but using the Comments entity instead of the Links entity.

Use your APIs

Your application is now complete. GraphQL and Rest APIs are ready to use.

GraphQL

You can open a GraphQL Explorer by going to the GraphQL link on the left sidebar. The explorer includes documentation for the supported queries and mutations. Read Commun GraphQL documentation.

The endpoint for GraphQL is http://localhost:3000/graphql.

Rest API

You can find the documentation for the API on: https://commun.dev/docs/rest-api

The endpoint for the Rest API is http://localhost:3000/api/v1/:entity

Social Authentication

On the left sidebar click on Users. Check the social authentication methods you want to allow and set your client ID and secret keys for each one. You must provide a callback url on your frontend which will complete the authentication. The supported services are: Google, Facebook and GitHub.

Pushing your chances

After your application is ready, just push the changes to your source control system. All the configuration created by Commun is stored in JSON files that should be pushed to your source control system. The application can be deployed in the same way as any Node application, no special configurations are needed. The app can be started on production by running: npm run start:production.

Top comments (1)

Collapse
 
aaronksaunders profile image
Aaron K Saunders •

looks pretty interesting, will have to check this out