Build Laravel apps in record time with Backpack and the Backpack Figma Template

Admin panel builders, such as Backpack for Laravel, are a great way to easily code, customize and maintain Laravel apps. But what about other parts of the development process? That`s where the Backpack Figma Template comes in. The Backpack Figma Template allows you to create designs and mock-ups in record time. And because it uses the same visual components and building blocks as Backpack for Laravel, it makes implementing the designs significantly easier. How much easier? To find out, read about how we used Backpack for Laravel and the Backpack Figma Template to design, plan and code one of our own projects. 

A couple of weeks ago, we began a new internal project: an IT dictionary, where non-technical people can find witty, well-explained definitions for tech terms. We called it Get IT Dictionary, and it recently came to life.

This article is the third part of a series about building a tech dictionary using Backpack for Laravel and the Backpack Figma Template. Check out all the articles:

1. Ready-to-code design: build your apps in record time with the Backpack Figma Template

2. Instant planning for web projects with the Backpack Figma Template 

3. Build Laravel apps in record time with Backpack and the Backpack Figma Template (this article)

Starting with the basis: the backend

Development projects always start with a setup. Here, we began by installing the frameworks and packages we were going to use: Laravel, Livewire, Backpack for Laravel, Tailwind, Choices.js, Fingerprint.js.

Afterwards, we worked on the logic behind the functionalities to understand what our database and models should contain (attributes, foreign keys, relation type). We started off the backend portion by identifying the entities we’ll work with - such as words, definitions, categories or letters. We referred to the design to identify these elements, which made the process easier.

After that, based on the functionalities, we added specific attributes or relations between them. For example, a word could have one or more definitions, or one or more categories. And of course, each word belonged to a letter.

Then, we dove deeper into the backend portion - starting with coding the types of operations admins can take to manage the website, like adding, editing and deleting words, definitions or categories.

A Backpack with just the right tools

A big part of this project was Backpack for Laravel. Backpack gives the chance of customizing or adding buttons or features. Backpack’s main feature is that it helps in creating, editing, deleting and displaying your item. Besides that, we were able to add custom buttons for different operations like approving or disapproving submissions, or for making big imports work.

The Backpack Figma Template helped guide us in terms of design and functionalities. Plus, having everything laid out with all the details really helped us understand the app’s logic. As for Backpack itself, it helped a lot with the CRUD operations - which, in turn, made the coding process easier

Making it all click together

The backend was done, which meant we were ready for the next stage - the frontend. This was coded using a CSS framework, Tailwind CSS. We started by applying Tailwind CSS classes to our page - and if we needed something more peculiar, we’d create custom responsive CSS classes for those tricky elements. This way, we managed to follow the design without sacrificing functionality.

Once this portion was complete, we used Livewire to make sure the frontend and backend match up. Livewire makes it pretty easy to create a connection between the two - and the testing round proved its efficiency.

Bug fixing and trouble solving.

As much as we wanted to celebrate the end of the coding portion, a big chunk of work was still ahead of us: bug fixing. This was the part that took the most time. Finding bugs was easy for the most part, since there were more people testing the staging branch. Fixing them was straightforward as well - we would identify the issue, discuss what caused it, and we’d figure out how to fix it.

Overall, we learned a lot from this project. Backpack and its Figma Template made the process so much smoother - the design was done in no time, the devs didn’t need extra design help, and planning the project took way less. Our website was up and running in no time. 

By the way, if you’re looking for a team of software pros to help grow your business, contact us.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.