Checkpoint

Save intentionally. Track visually. Collaborate effortlessly.

Comment 4

Inspiration

When brainstorming for a project idea we always had the goal of creating the largest platform impact. The words “platform improvement” stuck in our heads as we searched through forums and reviews, read blog posts, and spoke with Adobe Express users. Each member put themselves in the shoes of an Adobe Express user to see what they found lacking. When reconvening we had many ideas, but we settled on what we all knew had the greatest potential for platform improvement—current versioning system. We realized that it simply created a save every three minutes, showing a single preview of the first page and having no visual or text description of what changed, who changed it, and why. These saves also expire after only ten days. When conversing with Adobe developers about these drawbacks, they reinforced our sentiments; one of the developers was unable to find where to access their versioning system, and the other referenced their frustration over the current autosave system which filled their history with clutter and forced them to lose their old work they wanted recovered. It was in these moments that we realized even the most frequent users are frustrated or unaware of Adobe’s version control. And it was this that inspired us to create Adobe Checkpoint, an all in one solution to Adobe Express’s lacking version control system.

What it does

Checkpoint goes beyond the default autosave. We created an interactive version control add-on that overhauls the preexisting version history. Upon deploying our add-on, users are met by an innovative user interface and prompted with a version history control panel. They can choose to save their current workspace along with an accompanying title and description, where their specific name is associated with the save. Or they can access a library of prior manual saves from themself or other users. To enhance seamless navigation, the user can sift through files by utilizing a search bar or a multiple preview window, where each save is visible through a pdf snapshot. When viewing previously saved finals, users can select a comparison toggle to view changes between past and current versions, which provides a clear view of edits, transformations, and deletions through colorful overlays.

How we built it

Our Adobe Express Hackathon weekend began on the whiteboard fleshing out our idea with a mind map and creating a list of MVPs and stretch goals accordingly. From there, we delegated a list of tasks and formed three teams—a front end team as well as a back end team that was split to work with AWS Cloud and Adobe SDK respectively.

In the back end, we began by developing JavaScript functions that captured elements of the Adobe Express workspace—its ID, current user, node elements, date, and timestamp — into a JSON file along with a pdf snapshot. We then deployed a RESTful API service on Vercel and utilized AWS services to connect DynamoDB for managing workspace metadata, while storing current workspace elements in an S3 bucket. We then wrote functions to communicate with these buckets, allowing users to access previously saved files, store their current workspace, or pull JSON data to visualize a comparison between their current and past workspaces. This comparison was done by tapping into Adobe’s add-on SDK, which allowed us to analyze differences between the saved workspace and the current rendition, creating color-coded visual overlays that represent edits on the file.

For the frontend, we began by creating project requirements after analyzing current version features and desirable ones from customer feedback. We then made wireframes based on these requirements on our whiteboard. After doing this, we used Tailwind CSS, JavaScript, and the Adobe Express SDK to build out our webpage. We first made a static one, then made it dynamic with JavaScript once we had the backend and SDK done.

Challenges we ran into

From learning DynamoDB to installing a proxy server whilst considering sensitive environmental variables, onboarding downtime was inevitable. Even before the hackathon, non Mac groupmates were unable to set up SSL Certificates. During the event, backend merge conflicts arose alongside classifying node hierarchy. We also had issues using the Adobe SDK as some nodes were not available to us for access, and had some issues utilizing the developer console to debug because Adobe Express had many errors in the console. The biggest challenge we had was integrating everything together, from the frontend, backend, and AWS.

Accomplishments that we're proud of

We are very proud of building an add-on with a big impact to change the platform experience, for working effectively as a team by splitting into sub teams, and completing a working product.

What we learned

This project was an incredible opportunity to enhance our all around skills. On the programming end, we gained expertise in Amazon AWS cloud storage, DynamoDB, JavaScript web development, and the Adobe Express SDK. More importantly, we learned how to seamlesly integrate backend and front end code, ensuring we not only had a sleek and intuitive user interface, but also a smooth running backend to support it.

In addition to software skills, we developed our teamwork skills as well, gaining valuable experience working as a group, delegating tasks, and programming in parallel. Furthermore, throughout this project, we ran into several roadblocks, which required clear communication and collaborative thinking. For example, Through this, we learned how to collaborate under pressure, adapt to the unfamiliar environment of new technologies, and manage our time efficiently through strategic goal planning.

What's next for Checkpoint

Due to the time constraint, we were unable to incorporate all of our initial concepts. Thus we plan on implementing our original ideas of version restoration, cloud stored comments, and a stripe payment system. Through a button click, users can revert to any archived saves, which would increase productivity through ease of error recovery and limitless experimentation. With comments, users would be able to highlight parts of the workspace and leave comments, which would be stored and viewable along with each save iteration in the S3 buckets. This would enhance communication and collaboration between team members, allowing users to receive constructive criticism and boost overall productivity. With the stripe payment, we plan on giving our users a limit on how many documents they can save. Once they reach a certain amount of saves, they are required to make a payment before they can continue, which gives our project a dimension of marketability. By incorporating these features, we aim to further strive toward our initial goals and enhance a platform in a way that benefits all users.

Demo Video: https://youtu.be/YDSgMGFaqPQ

Built With

Share this project:

Updates