Building a Blog With Reactjs And Laravel finishing website

Building a Blog With Reactjs And Laravel Part13: Wrapping up

This is the last article in this series and we will complete the remaining pieces such as the registration, login and commenting functionality.

 

 

 

Authentication

Before creating the comments functionality we need to create the authentication functionality so we have to enable the user to register and login.

Create files Auth.js and Comment.js in resources/js/website/apis/ and update them as shown below:

Auth.js

Comment.js

Well, the next step is to update the register and login components we have done similar thing in the admin panel before.

Update resources/js/website/components/pages/Register.js as follows:

Also update resources/js/website/components/pages/Login.js as follows:

resources/js/website/css/form.css

Then let’s add the logout functionality, this is done in the Header component so open resources/js/website/components/partials/Header.js and update it as shown:

Commenting

Update resources/js/website/components/partials/CommentForm.js like so:

Now run

and go to the website then try to register, login, browse categories and posts. By completing the comment form we finished this series, i added the repository url in bitbucket below so you can clone and run it.

 

Repository in bitbucket

Clone the repository from this url. Do the following steps to get it up and running:

– Set your db settings in .env

-composer install

-npm install

-php artisan migrate

-npm run dev

 

 

Final thoughts

Up till now in this series you have learned how to build a Single page application using Reactjs, this series covered a lot of features in Reactjs such as dealing with components, using react router, most important using the Redux state manager as we implemented modules in admin panel. Also you see how to connect this with backend in this case laravel powers the backend of our application. Try to extend this series to add more functionality like using roles and permissions and much more.

 

 

Share this: