Photoshop-like web app driven by headless Drupal
Read a story how we have built online photo editor using Angular and Drupal 8
For about 3 years Drupal Jedi team worked hard to bring to the life a web-to-print application to craft school and university yearbooks for our client.
The idea is to mix rich photo-edition and social networking capabilities at the same time.
It was a long path and finally, the project has been released spring 2019!
The idea is to mix rich photo-edition and social networking capabilities at the same time.
It was a long path and finally, the project has been released spring 2019!
Let's design it together
The collaboration was key to the project success.
While the organization of distributed collaboration became our challenge=)
In the process of yearbook designing users can simultaneously work with materials provided by photographers and students in each yearbook project.
At the same time, the multi-role access model allows building a group to organize students into classes and work with designers.
It allows them to manage roles and access, group students into classes, collect materials from them (photo, name, person introduction).
People can communicate using chat & messages.
Students participate in the creation of a personal page and enjoy by looking at overall progress. They're creating events, uploading photos, editing their personal text, tagging people on the photo.
It's the entire community around each yearbook.
While the organization of distributed collaboration became our challenge=)
In the process of yearbook designing users can simultaneously work with materials provided by photographers and students in each yearbook project.
At the same time, the multi-role access model allows building a group to organize students into classes and work with designers.
It allows them to manage roles and access, group students into classes, collect materials from them (photo, name, person introduction).
People can communicate using chat & messages.
Students participate in the creation of a personal page and enjoy by looking at overall progress. They're creating events, uploading photos, editing their personal text, tagging people on the photo.
It's the entire community around each yearbook.
Access
Communication
Materials
Invite people and manage access
A group manager can send people a defined code for access. Each person can use that code after registration on the site to join that group.
Each person can edit his name, person text, and photos.
Each person can edit his name, person text, and photos.
Being in touch
Communication is an important part of teamwork when a lot of people involved need to have a centralized place to make decisions.
Group interface allows to communicate in real-time chat, leave notification messages and schedule events.
Group interface allows to communicate in real-time chat, leave notification messages and schedule events.
Collecting materials
To build a photo book all members should provide their personal photos, names and "about me" text.
Photographers can upload main part of photos, then members can tag persons on photos.
That allows managing pages in design to make sure that all persons were added into the book.
Photographers can upload main part of photos, then members can tag persons on photos.
That allows managing pages in design to make sure that all persons were added into the book.
Large toolbox
The important part of the application is a handful of rich tools to express your creativity within the yearbook.
At the same time, we need to organize the interface in a clear and intuitive manner. We re-used well-known UI perception patterns from solutions like Photoshop and Sketch.
At the same time, we need to organize the interface in a clear and intuitive manner. We re-used well-known UI perception patterns from solutions like Photoshop and Sketch.
Photo tools
Text tools
Other tools
Work with images
Person's photos are the most important piece of yearbooks. The designer can easily add a photo to the page and edit styles of it like brightness, color balance, sharpen, add masks, frames, clipart, background.
Applied styles can be saved as Photo style and used again for the next photos.
Applied styles can be saved as Photo style and used again for the next photos.
Work with text
Text is the second piece of content, provided by students. Almost every page contains some text. Adding a person's text to page references that student with the exact page and let him edit it.
To simplify the work of designer applied settings can be saved to Text styles and reused many times similar to Photo styles.
To simplify the work of designer applied settings can be saved to Text styles and reused many times similar to Photo styles.
Make it easier
The editor provides a lot of helpful tools and actions like page templates, photo and text filters/styles. It lets the designer reuse the same design and styles for many pages without doing routine work.
It also supports standard actions like copy, paste, undo, redo, clone pages and etc.
It also supports standard actions like copy, paste, undo, redo, clone pages and etc.
Ready to be printed!
The target of the entire project to get a printed version of your yearbooks on paper.
No problem – just press Ctrl+P to get a colorful paper version of your yearbook! We took care of combining hundreds of pages with appropriate DPI quality to deliver delightful results.
No problem – just press Ctrl+P to get a colorful paper version of your yearbook! We took care of combining hundreds of pages with appropriate DPI quality to deliver delightful results.
Project story
First, we meet with our client in 2015. After short conversations about the project, it became clear – we are entering into a long-term partnership.
We invited the client on-site, to our HQ, to meet the team and kick-off the project in the most efficient way – face-to-face. Of course, that's not required to get to our office to sign the contract. But we are always happy to meet and spend some time together. Each of our clients is welcome and supported with accommodation and travel programs.
As it's frequently happening for startups, at the starting point we are not able to get the entire picture of the complete result. That's the place where our addiction to Agile methodology comes in play. Continuous collaboration, from sprint to sprint, with continuous delivery and evolution, made a picture complete step by step.
We split the project into 3 big milestones to build alpha, beta and stable releases.
The project was published at the beginning of 2019. And first real users came to the site to build their yearbooks. And that's only the beginning – there are a lot of things to polish and evolve to increase the traction.
We invited the client on-site, to our HQ, to meet the team and kick-off the project in the most efficient way – face-to-face. Of course, that's not required to get to our office to sign the contract. But we are always happy to meet and spend some time together. Each of our clients is welcome and supported with accommodation and travel programs.
As it's frequently happening for startups, at the starting point we are not able to get the entire picture of the complete result. That's the place where our addiction to Agile methodology comes in play. Continuous collaboration, from sprint to sprint, with continuous delivery and evolution, made a picture complete step by step.
We split the project into 3 big milestones to build alpha, beta and stable releases.
The project was published at the beginning of 2019. And first real users came to the site to build their yearbooks. And that's only the beginning – there are a lot of things to polish and evolve to increase the traction.
Technology stack
Drupal
Headless Drupal setups got a solid success track recently.
Tons of content management tools wrapped with fast API is attractive. Isn't it?
Tons of content management tools wrapped with fast API is attractive. Isn't it?
Angular
Our front-end developers had a strong knowledge of Angular and using it in real projects since the early days of Angular was born. After short debates, we picked Angular over React and Vue.JS.
Fabric.js
During the technical design phase, we are very rigorous in tooling selection. We have found out that Fabric.js library provides a lot of features we need. That's why we put it in the foundation of our application.
Have a similar project in mind?
Request free consultation.
Request free consultation.
