While working on our the Generative AI project, Gara, I was introduced to Laravel and Inertia. Initially, I focused solely on the front end, where I built user interfaces and implemented features. These features included authentication, data filtering, image rendering, subscription services, attribute customization, and image generation using React and TypeScript.
About Laravel and Inertia
Laravel is a web application framework with expressive, elegant syntax. It attempts to take the pain out of development by easing common tasks used in many web projects, such as authentication, routing, sessions, and caching. Laravel aims to make the development process pleasing for the developer without sacrificing application functionality. It’s accessible, yet powerful, providing powerful tools needed for large, robust applications.
On the other hand, Inertia is a library that combines the best of both server-side rendering (SSR) and client-side rendering (CSR) by allowing developers to build single-page applications (SPAs) using classic server-side routing and controllers. Inertia shares data from your server-side framework to your client-side JavaScript framework (such as React or Vue) using the same request-response lifecycle that you’re used to in server-side-driven apps.
Frontend data Rendering with Inertia
Over time, I was tasked with integrating a payment gateway into our large-scale Laravel-React-Inertia application, requiring me to delve into the backend. Initially, I was overwhelmed by the extensive codebase. With only a basic understanding of PHP, I knew I needed to familiarize myself with Laravel quickly. I referred to the Laravel documentation, which provided a comprehensive guide to the framework. Transitioning from React-Router to Inertia was initially challenging due to Inertia’s lack of client-side routing and support for server-driven navigation. However, I soon appreciated Inertia’s powerful data-sharing capabilities:
Heres some code snippets that shows how easy it easy to display data using Inertia and React:
{viewData?.map((wish, index) => (
<div className="flex items-center justify-center bg-gray-100 w-full">
<div className="rounded overflow-hidden shadow-lg relative card-overlay w-full ">
<div className="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center text-white opacity-0 transition-opacity duration-300 overlay-content p-4"
onClick={() => handleClick(wish, index)}>
<span className="text-lg font-open">
{wish?.description ? (
wish.description.length > 50 ?
`${wish.description.substring(0, 100)}...` :
wish.description
) : 'No description available'}
</span>
</div>
<div
key={wish.id}
className={`${!loading ? "animate-pulse border border-black rounded" : ''} min-h-[200px] lg:min-h-[100px] flex ? "col-span-4 row-span-auto" : "mine"}`} >
<img
src={wish?.image}
alt="wish_image"
className={`object-cover w-[100%] h-[100%]`}
loading="lazy"
decoding="async"
onLoad={() => setLoading(true)}
/>
</div>
</div>
</div>
))}Backend Stuff
Next, I wrote the application logic within controllers, handled user authentication through middleware, and interacted with the database using models. These models enabled me to perform data manipulation operations, such as creating, updating, and deleting records. I also set up relationships between tables, including one-to-one and one-to-many associations:
// User model
public function orders(){
return $this->hasMany(Order::class);
}
// Order model
public function user(){
return $this->belongsTo(User::class);
}Implementing Push Notifications With Laravel and Inertia
One of the most challenging aspects of this project was the implementation of push notifications. This required a comprehensive understanding of both the frontend and backend components, ensuring smooth communication between them. We utilized service workers to manage push notifications:
Additionally, we implemented a feature to update the cache data using IndexedDB when the user is online.
Rookie Mistakes and Lesson learned
I once mistakenly deleted my entire database while trying to add a new column, turning my screen into a void of nothingness 🤣. It was one of those moments where you wish the ground would open up and swallow you whole.
Thankfully, I managed to resurrect the data by frantically calling my manager, who, like a hero swooping in, provided his backup database.
This little fiasco taught me the hard way that being meticulous with database operations and consistently backing up data is crucial. To dodge such blunders in the future, I’ll double-check my commands, test migrations in a staging environment, and make sure my database is more backed up than my grandmother’s cookie recipe!
Through this journey, I was introduced to Laravel and Inertia, and gained a deep understanding of the their capabilities. The experience has significantly broadened my skills as a full-stack developer, and I look forward to leveraging this knowledge in future projects.