Quickstart: How to build Blog App using React & Altogic?
Tags: javascript, webdev, react, lowcode
Published: 2022-06-09 08:37:43



## Introduction

This article will cover building a Quickstart Blog App using **React** and [Altogic](https://www.altogic.com), a backend-as-a-service platform using its client library.

The application will cover the following features:

* Create blog post

* List all blog posts

* View single blog post on a separate page

You can reach out the demo [here](https://altogic-react-blog-app-quickstart.vercel.app/).

### YouTube Development Vide

{% embed https://www.youtube.com/embed/HBREz4_RHqs %}

## Altogic Designer

### Create App

We can create an app with the [Altogic Designer](https://designer.altogic.com) really fast. To create an app via the **Designer**:

 1. Log in to **Altogic** with your credentials.

 2. Select **New app**.

 3. In the **App name** field, enter a name for the app.

 4. And click **Next**.

![Define App Info](https://cdn-images-1.medium.com/max/2388/1*X3eQP3s8yed9nJduwM-O-g.png)

 1. Choose **Blank App** template, and click on **Next**.

 2. Click **Create** on the *“Confirm & create”* tab.

![Choose Template](https://cdn-images-1.medium.com/max/2396/1*EVW6M4nLhunex1n_3n7vxQ.png)

Here, you can customize your subdomain, but not necessarily to do, **Altogic automatically creates one for you,** which will be your `envUrl`. You don’t need to worry if you lost your `envUrl`; you can get it from the **Environments** view of **Designer**.

![Getting the environment URL](https://cdn-images-1.medium.com/max/5020/1*UD9qNTdbnBgiD5ABedSeNQ.png)

After creating our app, we need `envUrl` and `clientKey` to access our app via Altogic Client Library to create a web application.

In order to get the `clientKey` we need to enter the app which we have created before and;

 1. Click on **App Settings** at the left-bottom of the designer.

 2. And click on **Client library keys** section.

![Getting the Client Library Key](https://cdn-images-1.medium.com/max/3840/1*LdVvTmqJT44a3mwAbhCRBg.png)

We can create new `clientKey` from that page, but thanks to Altogic for creating one `clientKey` automatically for us, so let’s copy the existing `clientKey` from the list.

Additionally, since we won’t use any authentication user, we have to be able to send requests without session. We should remove the enforcement of the sessions from the client.

 1. Click on the related client key.

 2. Untick the **Enforce session** checkbox

![Enforce Ssssion](https://cdn-images-1.medium.com/max/2348/1*EfghkDCvmucTce_sHa1YQw.png)

### Create Blog Model

 1. Click on **Models** on the left sidebar.

 2. Click **New** on the right of the screen and select **Model.**

 3. Set model name as **blogs**

 4. Ensure that **Enable timestamps** is selected to store the creation date of the blog post.

 5. Click **Next.**

![Create Model](https://cdn-images-1.medium.com/max/3000/1*FZ7Bb2H-Y8Sc_7X4um9zZw.png)

**Altogic** provides basic **CRUD** endpoints and services with the related model by default when you create a new model. Since we use **Altogic Client Library,** we won’t use these endpoints.

![Default Endpoints](https://cdn-images-1.medium.com/max/2372/1*rc06jKidpUMrJ8RTnq1cRQ.png)

We created our first model **”blogs".** All we have to do is define model properties title and content. Since we created the **blogs **model, we should define the **content** property as *rich text* and the **title** as *text.*

 1. Click on the **blogs** model on the *Models* page

 2. Click on **New Field** on the right-top of the page.

 3. Select **Text Field → Text.**

 4. Set model name **title.**

 5. Ensure that the **Required field** is selected.

 6. Click **Create.**

![Create Field](https://cdn-images-1.medium.com/max/2392/1*4om6qJJnOBpsmogNSWrP_A.png)

 1. Click on **New Field** on the right-top of the page.

 2. Select **Text Field → Rich Text.**

 3. Set model name **content.**

 4. Click **Create**

We completed the database design and the model definition on **Altogic** without any coding and complex configuration. Let’s move on to the development of the frontend.

## Frontend Development

### Create React App

First we need to create a React app. Open your terminal and paste the following script. The script will create `altogic-react-blog-app-tutorial` React app.

    npx create-react-app altogic-react-blog-app-tutorial

It is time to install the necessary dependencies!

### Installation of Altogic Client Library

Install the Altogic client library to our project by using NPM or Yarn by running the following command:

    npm install altogic

Create a .env file in the root directory of your application to set environment variables of the app:

    touch .env

Paste the following script to your .env file and replace `YOUR-APPLICATION-ENV-URL` and `YOUR-APPLICATION-CLIENT-KEY` with the `envUrl` and `clientKey` you copied before, then return to your terminal.
{% gist https://gist.github.com/yasinkuyuk/dea111148c4e219759781deeae842fda.js %}
Next, create a file to handle the **Altogic** services and client.

Go back to your root directory and follow the commands below:

    cd src
    mkdir helpers
    cd helpers
    touch altogic.js

`altogic.js` will be created in the `/src/helpers` directory. Open the file in your editor and paste the following.
{% gist https://gist.github.com/yasink7/404d222673f7e62d654fa2aaf1e6877e.js %}
### Installation of React-Router

Since we need different pages for each blog posts and another route for listing all blog posts, we have to implement a route structure for our app. We will use `react-router-dom` in our app.

Open the root directory in the terminal and run the following script:

    npm install react-router-dom@6

### Installation of Tailwind CSS

We will use **Tailwind CSS** for styling the project. Run the following commands in the root directory.

    npm install -D tailwindcss postcss autoprefixer

Below command will create `tailwind.config.js` file:

    npx tailwindcss init -p

Open the `tailwind.config.js` in editor and copy/paste the following script to configure template paths:
{% gist https://gist.github.com/yasinkuyuk/2329374575bc3a9964cbb01b39de5deb.js %}
Open `index.css` file in `src` directory and add the following directives:
{% gist https://gist.github.com/yasinkuyuk/d2c05716eb78384ab4643da3fead84d8.js %}
### Components

We will develop two single components:

* `BlogList`: List all blog posts and create a blog post

* `SingleBlog`: View single blog post details

We will create `BlogList.js` and `SingleBlog.js` files in the `/src/components` directory. Open the root directory in your project and paste the following script line by line.

    cd src
    mkdir components
    cd components
    touch SingleBlog.js BlogList.js

**BlogList**

We will list all the blog posts in this component. There is a form structure on the top of this component to create a new blog post.

**Altogic Client Library** provides us to create, get, update, delete, list any instance on the database by elementary functions. We will use create and get functions in our app:

*` altogic.db.model(<MODEL_NAME>).get()`: Retrieves all instances from the related table

* `altogic.db.model(<MODEL_NAME>).object(<CREATED_INSTANCE>).create()` Creates an instance on the database with the input data

We call the `altogic.db.model("blogs").get()` function inside the `useEffect()` to fetch the blogs from the database when the component is rendered.
{% gist https://gist.github.com/yasink7/ef57e40e59841bfeb3c1621a88764afc.js %}
**SingleBlog**

`SingleBlog` component is the component where you can view a single blog’s details such as blog content and creation date.

Each blog post has its own page in the /blog/:id route where id is the blog’s unique ID. We can reach the ID with the help of the `useParams()` hook inside the React component.

We retrieve the blog data with `altogic.db.model("blogs").object(id).get()` function in the useEffect() hook.
{% gist https://gist.github.com/yasink7/e3c0abf79b17b4111515d1da364426df.js %}
**App**

Since we use `react-router-dom` for routing we have to use the BrowserRouter component in our `index.js` file. Open the `index.js` and paste the following script:
{% gist https://gist.github.com/yasink7/c4fd0dd573953df56af204f2d7ee7fa6.js %}
Now, it only remains the customize the main `App` component. We have to define the routes in the `App` component with rendered components and route params. Paste the following code snippet to your `App.js` file:
{% gist https://gist.github.com/yasink7/9d1fb22fea50da402b5b088f4cebdbf3.js %}
## Conclusion

In this tutorial, we developed a full-stack [React](https://reactjs.org/) blog app using **Altogic** and [Tailwind CSS.](https://tailwindcss.com/docs/guides/create-react-app) Backend development intimidates the frontend developers in the early stages. However, it took only 2 lines of code to build a backend app with the help of **Altogic Client Library.** You can reach out the source code of this app [here](https://github.com/altogic/altogic/tree/main/examples/react-quickstart-blog-app).