At the end of year 2021, I decide to learn Laravel again after 2 years. When I read its documentation about Laravel The Fullstack Framework, the first paragraph makes me curious especially the statement which I print in bold.

Laravel may serve as a full stack framework. By "full stack" framework we mean that you are going to use Laravel to route requests to your application and render your frontend via Blade templates or using a single-page application hybrid technology like Inertia.js. This is the most common way to use the Laravel framework.

What is Inertia.js? And how the single-page application will be created using Laravel? I decide to dig deeper to answer that which lead me to React. I have a small Android project using React Native before, but it just an application with WebView component which open the mobile version of a website. So, I have no deep understanding about the basic concept and philosophy behind React. After considering for a while, I think it's a good opportunity for me to learn 3 cool things at once: Laravel, Inertia.js, and also React. I decide to start with a simple CMS backend for the case study. I choose it because I think it will cover the basic requirement for understanding how Laravel, Inertia.js, and also React work together. Oh... I also need to mention about Bulma which I choose as CSS framework. Why Bulma? Personally, I think it's simple and lightweight. Only CSS, no Javascript.

After about a month of learning that simple CMS backend application is done and I decide to share its source code in my GitHub with the following repository: https://github.com/w3shaman/laravel-inertia-react-crud. What can be learned from this application? Here is the list.

• Laravel middleware for detecting content existence before editing.
• Image upload, validation, and deletion in Laravel (storage management).
• Working with cookies for search and paging.
• Form post and image upload using Inertia.js.
• Splitting components in React.
• React event handler, props and state concept.
• Image upload and preview in React.
• How does React "react" to the state change.
• Integrate Bulma CSS into React page.
• Image upload validation in React with modal warning provided by Bulma CSS framework
• Integration of Tiny MCE and Date Time Picker in React
• ... etc

After this post, I consider to write more detail explanation by breaking down some parts in this project.