A couple of months 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.
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.
Top comments (0)