Building a Blog With Reactjs And Laravel

Building a Blog With Reactjs And Laravel Part 1

In this tutorial we will build a blog application using laravel framework as the backend and reactjs as the frontend.




  • Laravel framework (preferable 5.8)
  • Reactjs
  • React redux store
  • Token authentication


In this series we will build a full featured application using Laravel and Reactjs. The app we are going to implement is a small blog and we will cover creating admin panel and website using reactjs. This is a big series so be aware to follow each article carefully to get the idea. In this article we will start by preparing the project then in each article i will discuss one or more topics until we finish it.


What you learn from this series

  • Using Reactjs to build a big project.
  • Using React router and define routes in separate files for a big project.
  • Using Redux to manipulate the store and how to define actions and reducers.
  • Using multiple stores and combine them together using combineReducer.
  • Dealing with async requests in redux actions.
  • Accessing the store in components using props.
  • Using components inside other components and displaying modals.
  • Submitting forms and displaying validation errors.
  • Using pagination to paginate long lists.


For the purpose of this tutorial i will choose version 5.8 of laravel framework, so let’s begin by creating a fresh laravel project using composer:


Add the proper database settings in .env file:


Next let’s create some migrations that represent those tables:

  • Categories
  • Posts
  • Comments
  • Tags

Besides that laravel provides the users migration out of the box so we don’t need to create it. Now we will open each migration and add the needed columns to create such migration.






Also we need to update the users migration, so we need to include two columns ‘is_admin‘ which indicates the admin user, and ‘api_token‘ which will be in the authentication process to store tokens when we login and register users.



The next step is to create the models, we can do this manually or by using laravel artisan command:






In the above code i have added the required relations in each model that we will need when we retrieve or insert. At first i have setup a relation between categories and posts. The category has many posts and the post belongs to one category represented as:

Next i have added a relation between post and comment, the comment belongs to one post and the post has many comments. Also the post belongs to one user and the user has many posts.

For the tags the relation is many to many so the post belongs to many tags and tag belongs to many posts so i added two relations in both models which is the belongsToMany() method like this in Post model:

Users Table Seeder

Let’s create a seeder for the users table. We will insert the admin user for our app.


Update database/seeds/DatabaseSeeder.php to include the seeder

In terminal run

Now after we created the database and models let’s move on to create the controllers.


Handling Authentication

The first step we want to handle is the authentication process as all other system operations based on this process for example you can’t add or delete posts unless you login.

Open app/Exceptions/Handler.php and update it as follows:

Here we overrided the unauthenticated() method which called when user tries to access a protected resource, in this case i check if the request is a json request then it returns a json response with ‘unauthenticated’ message otherwise it redirect to the login page.


Open app/Http/Middleware/Authenticate.php and update it as follows


Login and register controllers

We need to update both the login and register controllers so that they can work with api requests.

Open app/Http/Controllers/Auth/LoginController.php

In the above code i have override the logout and login methods. The login method store the api token after successful login and return this token in the response. The logout method clears the api token.


In the register controller we save the api_token with the user and return it back in the response.

Now add the auth routes in routes/api.php


To confirm that login and register routes is working, you can try them in Postman as shown in these screenshots:

postman login

postman register

postman logout


Continue to part2: Blog Controllers


Share this: