Published
October 12, 2019
Category
Development \ Design \ Branding
client
Ulties
CASE STUDY
Larapack
Engagement
Front End Development
Back End Development
Design
Frameworks
jQuery
Vue
Laravel
Challenges
Version Management
Auto Updates
SERVICES
- Web Development
- Documentation
- Unit Testing
- Management
- Security Optimization
- Repository Integration
DELIVERABLES
- 10+ Pages
- 5+ Pages
- 3+ Remote Integrations
- 3 Environments
OTHER
- UX Research
- UX Psychology Development
- General Competition Research
- Identity and Brand Research
01. About the Project
L
Larapack is a project allowing programmers to integrate their own systems into. Integration between their system and Larapack, will allow them and other developers to build packages (or so called hooks) and upload them on Larapack, thise hooks are pieces of functionality that can then be installed within the system in just one click.
We built Larapack as an integration into the popular PHP package resolution system called Composer. Within Composer we managed to dependencies and requirements for each hook, allowing a hook to have their own set of dependencies regarding both software libraries, packages and hooks. By using Composer, we ease up the learning process for programmers in order to start building their own hooks, due to the high amount of documentation and resources regarding Composer.
All the hooks source code are only located on the authors Github account, ensuring that the author has the full ownership of the source code at all time. Besides that, using Github allows the usage of version control, issue reporting and contribution out of the box. Upon a hook submission, we force the author to setup the required Github events and permissions, ensuring that we automatic get reports of new versions and changes to the source so that we can note that into our APIs for system lookups.
We’ve focused on a simple solution for automatic hook installation, and as a case we did the direct integration sample with Laravel Voyager. We managed to create a single Laravel package adding the required interface to Voyager, allowing a one click installation of any hook submitted to Larapack.
02. Development
The development of Larapack was in first version done for the Laravel Voyager project, but was built in a way allowing any Laravel project to benefit from the system. The development was split into the following systems:
- Larapack Website
The root of success was the website combining it all together. The Larapack.io website was used for the interface to submit and browse hooks available for the systems. This site was built using the Laravel framework. Within this we build and admin management interface using Laravel Voyager and an API for fetching hooks that follows the Composer guidelines. - Laravel Hooks Package
Secondly we build a Laravel package that can be installed with Composer. This package added some helping classes and commands for Laravel to install, fetch, update and uninstall hooks directly from Larapack. - Voyager Hooks Package
At last we built a package specialized for Laravel Voyager, that added the interface on to the Laravel Voyager admin interface. This interface allowed the admin to directly install, fetch, update and uninstall any hooks from Larapack. This was a UI interface for Laravel Voyager to call the Laravel Hooks Package class methods.
At this point we had a full “plugin” system for Laravel Voyager, allowing easy installation and updating directly on the admin interface, along with powerful features such as versioning control, dependency management and one-click installations.
Hook Integrations
In order for the hooks to become powerful, we went into the core of Laravel Voyager to add some Laravel Events around in the code, this way hooks could listen to certain events in order to for example, modify menu structure, add new pages with new functionality or add additional security checks for existing functions.
The hooks were in raw words, mostly just a Laravel Service Provider, allowing the developer to do basicly anything. However, we added some general additional features, such as migrations and tasks that would be run or rolled back on installation, updating or uninstallation of the hook.
Help for Developers
Within the process of creating some sample hooks our self, we ended up building some helping commands that developers can use to build hooks from a stub, much similar to how Laravel handles file creation from their “make” commands.
As and addition, we added stubs depending on the system. Like by default the stub hook would be for a generic Laravel project. However, for projects that included the Voyager Hooks Package, the should would include added a new page to Laravel Voyager and adding a link to the admin menu. This way it was even easier for developers to get started.
02. Design
The design of Larapack.io was done to be easy to browse and find hooks, and easily allowing visitors to find hooks depending on certain tags. Therefor, you will on most pages be able to see the tags in the left menu, from there you will be able to find keywords that match the hooks you are looking for.
Besides that, due to the limited functionality of the site itself, the layout became very basic, and the main goal was for users to be able to browse and easily install hooks along with allowing developers the option to contribute with their own hooks.
Primary Color Choices
#F9F9F9
#22A7F0
#76838F
#233142
#22A7F0
SUPER CLEAN
Hook Overview
Detail wise, everything was designed to be easily shown on the overview when browsing the hooks. First at the top, it would be possible to have a screenshot or image representing the hook, following by the hook name which is used to install it using the command line commands. Additionally it showed the source provider of the hook’s source code along a short description, the amount of views and downloads it has, and at last the date of submission.
BRANDING
Logo Design
The logos for the project was built in matching styles, first the hook system itself would be an icon of a fishing hook, this icon would be overall seen on all the related packages along with the Larapack website.
Then the Larapack visual logo was done, which is a backpack within the hook icon, which felt like indicating Larapack. However, this icon was too big to show it within a smaller context. So the textual logo was built, which is the text “Larapack”, but with the hooks icon indicating the first letter “L”.
