HomeEducationWaterBear: Constructing A Free Platform For Impactful Documentaries (Half 1) — Smashing...

WaterBear: Constructing A Free Platform For Impactful Documentaries (Half 1) — Smashing Journal Get hold of US

Adrian’s kicking off a two-part sequence, sharing his journey as a lead developer. Be a part of him as he delves into his first main mission — WaterBear, a free platform for documentaries. Within the course of, you’ll study concerning the classes and insights Adrian gained at work, together with the methods that went into the technical stack of the mission and what it appears to be like prefer to collaborate with a group he’s main for the primary time.

Just a few months in the past, I labored on what might be essentially the most outstanding and thrilling mission of my profession thus far. It’s an exquisite free platform that brings collectively inspiration and motion known as WaterBear, and I’m thrilled to inform you all about it on this two-part article sequence.

I need to introduce you to the WaterBear mission and canopy the objectives, technical stack, and group dynamics that went into it. As that is additionally my first time taking up the position of lead developer on a mission, I’ll additionally share some necessary engineering administration challenges I encountered and insights from this expertise the place I felt like I used to be studying on the fly. Within the following article, I’ll concentrate on particular technical challenges that got here up within the course of, together with front-end efficiency, accessibility, and web optimization.

(Large preview)

Earlier than we dive into the nitty-gritty, you is likely to be questioning what makes WaterBear stand out among the many plethora of competing providers. Let’s discover out!

About WaterBear

WaterBear is a free platform bringing collectively inspiration and motion with award-winning high-production environmental documentaries masking varied subjects, from animals and local weather change to individuals and communities. The WaterBear group produces their very own authentic movies and documentaries and hosts curated movies and content material from varied high-profile companions, together with award-winning filmmakers, giant manufacturers, and important non-governmental organizations (NGOs), like Greenpeace, WWF, The Jane Goodall Institute, Ellen MacArthur Basis, Nikon, and lots of others.

WaterBear’s video list page
WaterBear’s video listing web page. (Large preview)

That is the place the worth proposition of different comparable providers would normally finish — customers binge-watching movies into perpetuity. WaterBear, nevertheless, takes a special, extra aware method. Assume again to an impactful film or a documentary that moved you a lot that it left you feeling such as you wanted to do one thing concerning the matter or situation you simply realized about. However perhaps you didn’t know the place to start or if it was even doable so that you can make any distinction.

WaterBear actively invitations and encourages customers to take part in some significant method. We wish individuals to be engaged within the situation by signing petitions, donating to a trigger, spreading the phrase, volunteering, or just altering their habits in a optimistic method. Primarily, WaterBear goals to flip passive viewers into energetic and aware contributors by providing impactful content material with choices to be told on a problem and impressed to do one thing about it.

A screenshot with the call to action banner in the bottom-right corner of the “Don’t Stop” video inviting users to sign a petition
Discover the decision to motion banner within the bottom-right nook of the “Don’t Cease” video inviting customers to signal a petition. (Large preview)

WaterBear and its work have been regularly featured in varied publications, and the platform is very praised and endorsed. And, hey, in the event you spot a familiar-looking tardigrade whereas strolling round London or some other place, make certain to snap an image and share it with me!

WaterBear advertisement at London’s Liverpool Street station
WaterBear commercial at London’s Liverpool Avenue station. (Photograph courtesy of WaterBear) (Large preview)

Defining Challenge Goals

For context, I’m presently working at a software program growth firm known as Q Agency based mostly in Zagreb, Croatia. We collaborated with WaterBear and its accomplice firms to construct a revamped and redesigned model of the net and cell app from the bottom up utilizing trendy applied sciences.

The WaterBear app was initially launched in December 2020, and the group realized so much concerning the consumer expertise by gathering suggestions. This information was then used to create a contemporary new design and description some new options.

Whereas I’m unable to share particular information from that analysis effort, I can inform you that it led us to the next essential objectives:

  • Create a responsive net app and cell app utilizing a contemporary tech stack based mostly on the design offered by the WaterBear group.
  • Develop instruments that can enable the WaterBear group to simply create and customise touchdown pages for promotional campaigns and movies.
  • Determine potential efficiency bottlenecks and handle them early on.
  • Construct dynamic, server-side generated sitemaps for improved web optimization.
  • Hearken to consumer suggestions to continuously iterate and implement new options.
A promotional campaign page for Ludovico Einaudi’s film on bird poaching with a “donate now” button to set the birds free campaign
One in all our objectives was to develop instruments the WaterBear group can use to simply create promotional marketing campaign pages like this. (Large preview)

The Technical Stack

Earlier than my group began working with WaterBear, nearly all of the tech stack and infrastructure was set in stone, so we solely needed to resolve on the front-end and cell applied sciences we might use to construct it. We agreed to make use of the React-powered Next.js framework for the net app and Flutter for cell apps (i.e., Android and iOS). The work was cut up between the 2 groups: the net app group and the cell group.

Subsequent.js was our go-to selection as a result of it allowed us to simply create dynamic server-side rendered sitemaps and use superior optimizations for pictures and JavaScript bundle that present choices for improved efficiency. We’ll cowl these subjects in additional element within the subsequent article. For now, let’s spotlight the remaining integral components of the mission:

  • Sanity CMS
    An open-source headless content material administration system (CMS) that may be simply built-in with Subsequent.js and different front-end frameworks.
  • Firebase Authentication
    A back-end service can authenticate customers by way of social media accounts, in addition to a typical e-mail and password.
  • Cloud Firestore
    A versatile and scalable NoSQL cloud database for cell and net. This was a logical selection for our database, as Firebase Authentication was required proper from the beginning.
  • Video.js
    A flexible open-source video participant with customizable UI and plugin help.
A diagram showing that both the web app and mobile app interact with Sanity CMS, Firebase Auth, Cloud Firestore, and there is also one empty box with an ellipsis inside
Each the net app and cell app work together with the identical providers. (Large preview)

Technique And Communication

Because the work started, we got here throughout our first hurdle. As you’ll be able to see from the earlier diagram, each net and cell apps needed to work together with the identical providers (together with the CMS, database, authentication, and so forth), so we additionally needed to guarantee constant habits between them.

For instance, we would have liked to make sure that our CMS queries yielded the identical outcomes to the extent that movies appeared in the identical order on each the net and cell apps and that length filters and sorting labored persistently.

We needed to do the identical with our Cloud Firestore occasion to maintain the database construction intact whereas being aware to write down the right worth sorts and browse the right fields so they’re mapped to the construction. Every developer labored on their native occasion utilizing Firebase Local Emulator Suite to hurry up growth, so we had to make sure every thing was so as after we have been prepared to modify to staging and manufacturing databases.

It was necessary to set up a collaborative environment between the 2 growth groups from the beginning, much more so contemplating we have been all working in a distant atmosphere. We made positive to communicate both by way of fast video calls or Slack messages to share information and queries that we’d be utilizing.

As for the database, we stored an in depth diagram of our database construction and worth sorts with a purpose to remove all doubt and guarantee each apps work together with the database identically. This served as our single supply of reality and was made available to the groups for reference in any respect levels of growth.

A diagram showing a portion of the database structure
This diagram exhibits a portion of the database construction. Area names and particular values are obfuscated. (Large preview)

These methods proved surprisingly extra helpful than we anticipated, as they allowed us to rapidly and safely swap from the emulator to the staging and manufacturing database with none hiccups. As a bonus, it resulted in fewer bugs that originated from the interaction between the net and cell functions.

My takeaway from this expertise: It’s very important to maintain the communication channels open to collaborate, focus on challenges, and share information concerning the integrations and options each of our groups needed to implement. It’s additionally worthwhile investing some further time and care into sustaining essential mission documentation and diagrams. Having info available in a handy format can save time and clear any doubts throughout growth. Not solely that, this documentation may even find yourself being an ideal onboarding information for brand new group members sooner or later.

What I Realized As A First-Time Lead Developer

As I’ve talked about earlier than, this was my first gig as a lead developer. Builders are normally thrust into this type of position sooner or later of their careers. Aside from that, there’s normally little or no preparation or coaching for it — we have now to study rapidly and adapt on the fly based mostly on our personal experiences as builders.

The day-to-day growth work on my group will get a bit managerial in consequence. As a lead developer, I’m liable for the work the group does, supporting and mentoring particular person group members, and advocating for the group’s priorities. I used to be additionally extra immediately concerned with planning and speaking with shoppers and stakeholders. For me, it was a lot of added duty that might really feel overwhelming at varied instances.

I made a decision to method the position thoughtfully by setting guidelines and guiding rules for myself, versus placing the brand new duties apart and focusing totally on growth work. What are these guidelines and rules? Let’s focus on them one by one.

Main By Instance And Mentoring On The Fly

First, I wished to make sure that my group was producing constant code high quality throughout the board, with a precedence on efficiency, accessibility, web optimization, and value. I prefer to refer to those as The 4 Pillars of high quality growth.

In my very own expertise, it’s simpler to comply with current, well-established, and documented footsteps. That’s the place The 4 Pillars served a major position on our group, as they have been emphasised throughout our group check-ins, demos, and opinions. Furthermore, I set these expectations by way of my very own pull requests (PR) by asking the group to evaluate my work alongside these rules.

On the very begin of the mission, I requested my group to scaffold the mission and full fundamental integration duties that may very well be accomplished by following current documentation. In the meantime, that allowed me to chart the trail ahead by engaged on a set of characteristic duties that established the muse of The 4 Pillars, then asking my group to evaluate PRs to set expectations for the standard I used to be pursuing for the mission. This manner, that they had an excellent quantity of hands-on expertise abiding by the rules, and I used to be in a position to lead that by instance. My group ought to anticipate the identical stage of high quality from me that I anticipate of them.

The opposite advantage of this method is that it allowed me to mentor the group on the fly. I may share assets and documentation supporting my work within the PRs, and the group may develop their very own information and understanding by requesting modifications to my work. In different phrases, I managed to seamlessly introduce the group to new ideas.

My takeaway from this expertise: Use each alternative to share your information with the group, even when it’s on the fly! And help the group’s studying journey by setting good examples which are aligned with well-defined expectations.

Appearing As The Tiebreaker

As a part of my very own introduction to the position of lead developer, I picked up Alex MacCaw’s ebook The Manager’s Handbook, and it helped me overcome one other attention-grabbing scenario that got here up in the course of the mission: performing as a tiebreaker when making choices.

Early within the mission, we had a gathering with the cell group about our shared database structure. Some group members proposed a considerably radical method to how you can construction a really essential a part of our database. It didn’t sit properly with me and different group members because it wasn’t documented or talked about wherever else and wasn’t the usual follow throughout the firm. We might additionally should decide to this method, and it might have price us so much if we hit a roadblock and needed to roll again our work. The one factor we needed to go on was a fundamental small-scale proof of idea — removed from what we would have liked to do the work — however the group members who got here up with the concept have been adamant concerning the proposal.

It was my name to make, and it was this particular recommendation from The Manager’s Handbook that got here in helpful at simply the appropriate time:

“Don’t let individuals stress you into choices you don’t imagine in. They’ll maintain you liable for them later, and so they’ll be proper. Selections are your duty.”

I made a decision to step again a bit and define the doable dangers and rewards of the proposed method. It sounds so easy, however it allowed me to achieve a greater grasp on the controversy and formulate my very own conclusion that it wasn’t value journeying into the unknown.

I made my ultimate resolution and defined my reasoning to the group at our subsequent inside assembly. I made positive to give props to the group members who got here up with the progressive concept as a result of it’s necessary to take care of an inclusive environment the place everybody feels heard and free to discover new concepts.

Rejecting or postponing an idea shouldn’t be viewed as a negative outcome but as a part of the bigger picture of building a high-quality product, which was, of course, our primary goal.

Be taught To Say “No” And Provide A Compromise

What I didn’t point out in that final story is that I supplied the group members who got here up with the progressive database construction a compromise by suggesting they current that concept to their group lead and discover its potential in a devoted check mission.

The identical precept applies when speaking with shoppers and stakeholders. It’s widespread for shoppers to provide you with concepts and strategies in the course of the mission timeline, which comes with the territory of initiatives utilizing an Agile methodology. Nonetheless, you continue to need to keep away from overcommitting and pushing the group to its limits, and particularly forestall your self from carrying the burden of all the additional work your self.

I’ve realized {that a} lead developer acts as an advocate for the group. Meaning knowing when to say “no” to requests, notably people who may make your group’s work noticeably tough or anxious.

Saying “no” might seem cold or come across as a negative reaction because it effectively puts a lid on the discussion. However, you can always acknowledge the suggestion and offer a compromise that both parties can agree on.

Listed below are some actual examples of how I used to be in a position to say “no” to an concept whereas providing a compromise:

  • Reducing the scope
    “We’d not have the ability to do X, Y, and Z and end them in time to fulfill our deadlines. That stated, we solely want X at this stage, and maybe we will postpone Y and Z within the subsequent section.”
  • Suspending
    “We will’t spare the time for X at this stage, however it’s an ideal suggestion, and we should always make word of it despite the fact that we have to postpone it.”
  • Switching priorities
    “If X is a excessive precedence and ought to be finished this dash, can we postpone a decrease precedence job in order that we’re in a position to dedicate sufficient time on this dash to complete it in time?”

Rebecca Knight shares some great principles and practical examples which have resonated with me in terms of saying “no”:


  • Consider whether or not you could have the need and the bandwidth to assist with the request and ask if priorities could be shifted or trade-offs made.
  • Present a willingness to pitch in by inquiring if there are small methods you could be useful to the mission.
  • Apply saying no out loud. Finally, it can turn out to be simpler.


  • Use a harsh or hesitant tone, and don’t be overly well mannered both. As an alternative, try for a gentle and clear no.
  • Maintain again the true cause you’re saying no. To restrict frustration, give causes with good weight up entrance.
  • Distort your message or act tentatively since you’re making an attempt to maintain your colleague completely happy. Be trustworthy and ensure your no is known.

Be Thoughtful And Talk Clearly

This goes hand-in-hand with all of the earlier factors I’ve made, and also you would possibly suppose it goes with out saying. Nonetheless, I need to spotlight the significance of embedding empathy and thoughtful habits in a group.

Constructing and sustaining mutual belief inside a group is essential. At any time when we had inside conferences to debate the duties for a present dash, I made positive to go over every characteristic, clear any doubts and blockers, and make sure whether or not anybody had any issues about their assigned duties. Somebody might need little to no expertise with the service they’re integrating, and so they would possibly really feel not sure whether or not they’re in a position to full the duty. Or they might have a scheduled physician appointment in the course of the dash that threatens to delay their work and requires your help.

Workforce members ought to be at liberty to talk up and share their issues, issues, and opinions with out judgment and repercussions. This lets you plan, adapt, and remedy issues early on and ease any stress and frustration a group member would possibly really feel if their progress will get stalled.

Coming Up Subsequent

On this article, I mentioned the main points of WaterBear, a big mission that gives a free platform for documentaries that intention to tell viewers about points and encourage them to take motion. I took on the mission as a first-time lead developer at Q Agency and shared the challenges I confronted all through the mission. Particularly, I targeted on what I realized about growing and fostering a productive and collaborative group atmosphere and the particular approaches I took to set expectations, lead by instance, and talk with empathy and inclusiveness.

We mentioned the technique round defining aims and the technical stack used to construct the mission. I’ll go over that in a lot better element within the concluding article of this two-part sequence.

Please take a look at WaterBear on the web, Android, and iOS, and share with us your favourite documentaries! I’d additionally love so that you can take a look at this glorious post-launch interview with WaterBear CEO Sam Sutaria. He provides a bunch of extra insights on our work from the shopper’s perspective.


Many because of WaterBear and Q Company for serving to out with this text and making it doable. I actually wouldn’t have finished this with out their help. I’d additionally prefer to commend everybody who labored on the mission for his or her excellent work! You have got taught me a lot thus far, and I’m grateful for it.

Smashing Editorial

#WaterBear #Constructing #Free #Platform #Impactful #Documentaries #Half #Smashing #Journal

Continue to the category


Please enter your comment!
Please enter your name here

- Advertisment -spot_img

Most Popular

Recent Comments