Cloudinary Builds MediaJams, A New Learning Destination for Developers using modern Jamstack and best in breed technologies
Overview
Cloudinary's Developer Relations team had a vision to build MediaJams, a learning destination with easy navigation featuring learn-by-example content with articles and accompanying code snippets.
This Dot Labs served as a partner by supplementing the Cloudinary team with our expert developers to help implement modern Jamstack best practices and leveraging meta frameworks such as NextJS and MDNext.
Services Provided
Building on the great work of MDNext, we provided best of breed services to create a unified platform.
We helped develop authentication and authorization with Auth0, a headless CMS and content portal with Sanity, custom data persistence with Hasura, flexible and dynamic content with MDX, interactive code samples and projects with CodeSandbox, and wrapped everything in a platform on NextJS with react-query to create the best user experience.
Tech-stack
- NextJS deployed to Vercel.
- Auth0 Auth0 for user authentication and role authorization.
- MixPanel for analytics and event capturing.
- Hasura for aggregation of Sanity content and persistent storage through a single GraphQL endpoint.
- Sendgrid for email notifications for authors and moderators on workflow status of an article.
- Cloudinary for image & video storage and optimization.
- Sanity for headless CMS.
- Chakra-UI for core CSS building components.
- CodeSandbox for embedded interactive code examples in MediaJam articles.
- Github Actions to auto generate a codesandbox for the author and moderator to verify before publication.
- MDX allowing authors to write with markdown, and add React Components mixed with standard HTML.
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
Cloudinary is a cloud-based image and video management services provider.
The Cloudinary platform allows users to store, manage, and deploy images and video assets for websites and applications.
Building a Unified Workflow for Content Contributors
MediaJam articles are written by a variety of authors who use a CMS to submit blog content directly into a multi-stage moderation workflow.
The MediaJam moderation flow includes a content review, code review, and a final checklist. The team built a custom workflow within the CMS, offering unique tools and capabilities that allow both authors and moderators to collaborate on blog content, including:
-
A ‘Submit for Review’ button for authors that becomes enabled after some programmatic requirements are met.
-
‘Request Changes’ and ‘Approve’ buttons for moderators that alert authors to proposed changes or content approvals.
-
A record of all proposed drafts and changes to content.
-
A ‘Publish’ button for moderators that triggers a new build to the site, which includes only the approved draft.
Capturing Errors for Early Stage Debugging
The team built a live preview feature that opens the article on the site as it would appear when it is published. This updates in real time as the author makes changes, so they can tweak the content to their liking, and allows moderators to see proposed formatting and content cadences.
This feature also captures errors ahead of time, and bubbles them up in a ‘debug’ format in the live preview, with line numbers and messages. Since all the articles are written in MDX, this debugging is especially helpful when adding code examples, or using pre-built components.
We hope to achieve a great developer experience by creating a learning journey for developers that focuses on low-friction, bite-size, learn-by-example content.
Doron Sherman VP, Developer Relations Cloudinary.
Integrating MixPanel for Analytics
In order to increase conversion rates, companies must understand the conversion funnel and encourage site visitors to open accounts or further engage with the company.
By integrating MixPanel, Cloudinary is able to understand user behavior by tracking and analyzing engagement with certain content and assets, implement A/B testing, and more. In doing this, their engineering team is better able to respond to user needs, and increase the volume of visitors who go on to open accounts with Cloudinary to better manage their image and video based assets.
Without the provided consistency, expertise, and reliability from This Dot Labs, we couldn’t have brought MediaJams across the finish line. Whenever we hit a wall or need, This Dot delivered.
Domitrius Clark Developer Experience Engineer Cloudinary.
Let's see how This Dot can help you
Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions
topics covered in this case study:
Chainlink, the company behind the Web3 services platform and blockchain oracle network of the same name, approached This Dot Labs to build a showcase application featuring Chainlink Functions.
Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products
topics covered in this case study:
This Dot Labs took over architectural decision making and development for the e-commerce store and provided a seamless transition with timely deliver of the platform.
WebXR Performance Testing with React: Revolutionizing Mixed Reality Development
topics covered in this case study:
This collaborative endeavor demonstrated the potential of WebXR and showcased the power of leveraging community support and expertise in the open-source ecosystem.
Automating Code Maintenance: This Dot Labs’ Successful Partnership with an Online Metaverse Platform
topics covered in this case study:
Our team created an automated conversion tool to detect newly released code, determine changes introduced by it, and trigger an automatic upgrade to the converted library.
Creating an AI gesture recognition game with next generation Angular and Tensorflow.js
topics covered in this case study:
Ahead of Google I/O in May 2023, the Angular Core Team reached out to This Dot Labs to help them deliver a demo application, showcasing a highly interactive ML integrated application built using Angular with TensorFlow.js in time for the conference.
Enhancing Sentry’s Suite of Debugging Tools with a Cutting Edge Replay Feature
topics covered in this case study:
Sentry’s Emerging Technologies team approached This Dot Labs to augment their team developing a new feature offering a visual replay of user interactions that would seamlessly fit in with Sentry’s portfolio of error and performance monitoring tools.
- See full portfolio